Dynamicky závislý select příklad z planette
Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
- Miky0007
- Člen | 73
Pomůže někdo prosím s rozchozením dynamicky závislého selectu? Nějak
se mně nedaří rozjet tento příklad:
https://blog.nette.org/…-and-pure-js
Presenter:
public function handleSelectLoad($static_id)
{
$form = $this->getComponent("selectForm"); // our form
// for demo only! this part will use database to load your select using $value
// $this->models->options->getItemsForGroup($static_id);
$newArray = array(
"I am new, I have changed!",
);
$form["dynamic"]->setItems($newArray); // set up new values
$this->invalidateControl("form"); // invalidate ajax snippet
}
/**
* Simple form
**/
protected function createComponentSelectForm()
{
$staticArray = array(
"I am static",
"I am static two/too",
);
$dynamicArray = array(
"Change the 'static' and I will change",
"Me too",
);
$form = new UI\Form;
$form->addSelect("static","Choose me:", $staticArray);
$form->addSelect("dynamic","I am dynamic:", $dynamicArray);
$form->addSubmit("send", "Submit");
$form->onSuccess[] = callback($this, "selectFormSent");
return $form;
}
/**
* Shows values from selects
* @param form
**/
public function selectFormSent(Form $form)
{
$values = $form->getHttpData(); // getValues() is not enough for $form["dynamic"]
unset($values["send"]); // we don't need this
// save values...
}
Latte:
{form selectForm}
{label static /} {input static}
{snippet form}
{label dynamic /} {input dynamic}
{/snippet}
{/form}
<script type="text/javascript">
$("form").delegate('#'+{$control["selectForm-static"]->htmlId}, 'change', function() {
$.nette.ajax({
url: {link Sign:default, do => 'selectLoad'},
type: 'get'
});
});
</script>
Nějak se při změně prvního selectu nic nestane…
- Miky0007
- Člen | 73
<head>
<meta charset="UTF-8">
<meta name="description" content="Nette Framework web application skeleton">
<meta name="robots" content="{$robots}" n:ifset="$robots">
<title>{include #title}</title>
<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/style.css">
<link rel="stylesheet" media="print" href="{$basePath}/css/print.css">
<link rel="shortcut icon" href="{$basePath}/favicon.ico">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="{$basePath}/js/netteForms.js"></script>
<script src="{$basePath}/js/nette.ajax.js"></script>
{block head}{/block}
</head>