Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery autocomplete with dialog updating value
    text
    copied!<p>I have a form that opens up in a dialog. One of the fields has autocomplete. All fields are built and server values are stored in them to pre-fill the form.</p> <pre><code>var mydiv = jQuery("#editform"); var $myform = jQuery("&lt;form id='EditForm' method='post' action='index.php?option=com_component&amp;task=edit'&gt;&lt;/form&gt;"); ... var $mylabel10 = jQuery("&lt;label for='EditSelect'&gt;A label&lt;/label&gt;"); var $myinput9 = jQuery("&lt;input id='EditSelect' name='EditSelect' type='text' /&gt;"); var $mylabel9 = jQuery("&lt;label for='EditSelect2'&gt;Another label&lt;/label&gt;"); var $myinput8 = jQuery("&lt;input id='EditSelect2' name='add_path' value='" +path + "' /&gt;"); //path is a value passed in from the server $myform.append(... $mylabel10, $myinput9, $mylabel9, $myinput8); mydiv.append($myform); //autocomplete code - order is important to have autocomplete go outside dialog var available = [ { label : 'foo', value : 'bar' }, { label : 'xyz', value : 'abc' }, ... ]; jQuery( "#EditSelect", mydiv ).autocomplete({ source: available, focus : function(){ return false; } }) .on( 'autocompleteselect', function( e, ui ){ var t = jQuery(this), details = jQuery('#EditSelect2'), label = ( e.type == 'autocompleteresponse' ? ui.content[0].label : ui.item.label ), value = ( e.type == 'autocompleteresponse' ? ui.content[0].value : ui.item.value ); t.val( label ); details.val( value ); //doesn't update the form here? return false; }); // get reference to autocomplete element var autoComplete = jQuery("#EditSelect", mydiv).autocomplete("widget"); var dialogOpts = { modal: true, autoOpen: true, resizable: false, width: 525, height: 'auto', title: 'Edit settings' }; mydiv.dialog(dialogOpts); autoComplete.insertAfter(mydiv.parent()); </code></pre> <p>In this edit dialog is an autocomplete that when selected it should update the other input field (<code>#EditSelect2</code>). Currently #EditSelect2 has the value from the server (in the variable <code>path</code>). </p> <p>When a new value is selected from the autocomplete I would expect the form updated because of this code: <code>details.val( value );</code>. Right now the autocomplete works fine but the value from the server (<code>path</code>) doesn't get updated after selecting a new choice in the autocomplete.</p> <p>Hope this makes sense.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload