I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I'm running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.
Here is the javascript:
<script>
$(function() {
$( "#query" ).autocomplete({
source: "/scripts/autocomplete_handler.php",
minLength: 2,
select: function(event, ui) {
$('#query').val(ui.item);
$("#results").text(ui.item); // for testing purposes
$('#search_form').submit();
}
});
});
</script>
Here is the form:
<form name="search_form" id="search_form" action="search.php" method="get">
<input type="text" name="query" id="query" />
<input type="submit" value="Search" />
</form>
<code id="results"></code>
As you can see, I am trying to change the value of the input field "query" using $('#query').val(ui.item). The problem is that when I select an autocomplete option $_GET['query'] becomes [object Object]. i.e. My website searches for the string "[object Object]" instead of the value that I clicked.
At the bottom of the form there is a code tag with id "results". I also can't get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I'm sure I'm not the only one who wants this type of Google like functionality in their autocomplete, but I can't find any examples anywhere.
Try this in your select function:
$('#query').val(ui.item.value);
Related
I am using jQuery UI controlgroup to style checkboxes in an HTML form. After the input values are processed by a PHP script, the results are displayed on the the same page along with the form itself, so that the user can adjust the filters. What I am trying to do, is to have the boxes that were checked previously remain checked after the form has been processed, so that the user sees what selection criteria were used. To achieve that I store all the PHP $_POST data in a JS variable using json_encode, which I'd like to use to iterate through the labels and mark those that were checked previously. The problem is that the only option of the controlgroup widget that I can use is classes with ui-controlgroup-item which shows every single label within the group as active, and for the life of me I cannot figure out how to make it conditional, e.g. so that I can use if(label[for=' + var.value +'])', var being <?php echo json_encode($_POST) ?> or something similar. Will appreciate any suggestions.
Here is the HTML:
<div id="currencyList">
<label for="gbp">GBP</label>
<input type="checkbox" value="gbp" name="currency[]" id="gbp" >
<label for="usd">USD</label>
<input type="checkbox" value="usd" name="currency[]" id="usd">
<label for="eur">EUR</label>
<input type="checkbox" value="eur" name="currency[]" id="eur">
</div>
And this is the JavaScript bit:
$( "#currencyList" ).controlgroup({
classes: {
"ui-controlgroup-item": "ui-checkboxradio-checked ui-state-active"
}
});
After trying to find a solution for several days I decided to skip trying via the classes option and instead to move outside the controlgroup widget. So here is my not-so-pretty-but-working solution:
var postData = <?php echo json_encode($_POST) ?>;
$( "#currencyList" ).controlgroup();
$('#currencyList').children('label').each(function () {
if(postData.currency.indexOf($(this).attr("for")) >= 0){
$(this).addClass( "ui-checkboxradio-checked ui-state-active");
}
});
In iOS 8 and above, to show the Search button on the iOS keyboard, you use the action attribute in the form. From Anton's answer here ... Show 'Search' button in iPhone/iPad Safari keyboard
<form action=".">
<input type="search" />
</form>
But this does not work when you are using an AngularJS form with ng-submit like this
<form action="." ng-submit="doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
The action attribute breaks the Angular form submit.
Any suggestions on how to put a dummy action attribute and still get ng-submit to handle the form processing? Or any other solution that would show the iOS keyboard's search key with an AngularJS HTML5 form.
Just encountered the same problem, key here is that angular prevents default form submission only if no action specified, so if you want to specify one you need to preventDefault manually, which should be pretty easy.
This should work (worked for me):
<form action="." ng-submit="$event.preventDefault();doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
Also note, that you will need to blur() your input field after you made a Search request in order to auto-hide keyboard.
Update:
With the latter this directive will help you:
.directive('prettySubmit', function () {
return function (scope, element, attr) {
var textFields = $(element).children('input');
$(element).submit(function(event) {
event.preventDefault();
textFields.blur();
});
};
})
I have placed preventDefault() in directive, so your form will look like this:
<form action="." ng-submit="doSearch(searchtext)" pretty-submit>
<input type="search" ng-model="searchtext" />
</form>
I encountered the same problem.
Finally I decided to use
<form action="{{'#/search/' + searchText }}">
Instead, and it works.
I have a jQuery-UI autocomplete function that is loaded before the form it applies to is loaded.
$('#groupset').autocomplete({
source: 'ajax/php/leeruns.php',
minlength: 2,
select: function(event, ui) {
if(ui.item.groupset_id){
$('#groupsetdesc').val(ui.item.description);
if(groups.loaded!=ui.item.groupset_id)groups.load(ui.item.groupset_id);
} else {
$('#groupsetdesc').val('');
}
}
});
The relevant html is:
<div><label for='groupset'>Groupset Name</label>
<input name='filename' id='groupset' type='text' value='' ></div>
<div><label for='groupsetdesc'>Groupset Description</label>
<input name='groupsetdesc' id='groupsetdesc' type='text' value=''></div>
If I type "gr" into the input box, Firebug tells me that this JSON is returned:
[{"value":"Group_by_Column",
"groupset_id":"1",
"description":"12 groups, each of 8 wells from one column",
"create_date":"2010-02-24 13:27:26"},
{"value":"Group_by_Row",
"groupset_id":"2",
"description":"8 groups of 12 wells, each from 1 row",
"create_date":"2010-06-02 14:36:33"}
]
I expect to see a faux-dropdown including the entries returned from the autocomplete function. But no choices show up. This is replicable in IE8 and FF4. Any idea what I'm missing?
jQuery v1.5.1
jQuery-UI 1.8.11
This was a beast to solve as the problem wasn't with the autocomplete code at all. On the same page, I was also loading the jQuery validate plugin . Version 1.7 of validate has some sort of incompatibility with autocomplete. Once I upgraded validate to v1.8, autocomplete worked again.
I hope this helps someone else.
I have a form inside an iframe which is inside a jQuery UI dialog box. The form contains a file input type. The jQuery UI dialog contains an Upload button. When this button is clicked, I would like to programmatically call the submit method. My question is how I could select the form which is in a iframe using jQuery. The following code should clarify the picture:
<div id="upload_file_picker_dlg" title="Upload file">
<iframe id="upload_file_iframe" src="/frame_src_url" frameborder=0 width=100% scrolling=no></iframe>
</div>
frame_src_url contains:
<form action="/UploadTaxTable" enctype="multipart/form-data" method="post" id="upload-form">
<p>Select a file to be uploaded:</p>
<p>
<input type="file" name="datafile" size="60">
</p>
The jQueryUI dialog box javascript code:
$('#upload_file_picker_dlg').dialog({
...
buttons: {
'Close': function() {
$(this).dialog('close');
},
'Upload': function() {
$('#upload-form').submit(); //question is related to this line
$(this).dialog('close');
}
},
....
});
From the javascript code snippet above, how can I select the form with id upload-form that is in the iframe whose id is upload_file_iframe ?
Accessing an element inside an iframe is tricky.
You should use the following syntax:
$('#iframeID').contents().find('#upload-form').submit();
where 'iframeID' is obviously an ID you've given to the iframe.
Hope it is correct!
The answer is:
$('#upload_file_iframe').contents().find('#upload-form').submit();
which I learned from http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
Off the top of my head I'd say you might have to add the logic to the file where the iframe source is from.
I am tryng to use this: http://jqueryui.com/demos/dialog/#modal-form
I have:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$("#dialog").dialog('close');
$('.myPop').click(function() {
$("#dialog").dialog('open');
});
});
Which allows me to pop-up on the click of '.myPop' which is just a temp input button in my list which is working:
<button type="button" class="myPop"></button>
My question is - what is the best way to use this pop-up to go to the Edit method of my controller, populate controls and then be able to save back to the model and refresh the list page?
I want to keep with best practice in ASP.Net MVC please.
Am I beetr maybe using this? http://dev.iceburg.net/jquery/jqModal/
Thanks
There's obviously a bunch of ways to do that, but here's how I would solve it. Perform an ajax call before loading the dialog to populate the dialog's contents, show the dialog, than on save close the dialog and refresh the grid. Those are the basics, there's some helper code below. I find it a good practice to return a json result from the save action to determine if the saved was successful, and if not an error message that indicates why it failed to display to the user.
<div id="dialog" title="Basic dialog">
<!-- loaded from ajax call -->
<form id="exampleForm">
<input blah>
<input type="button" onclick="Save()" />
</form>
</div>
<script>
$(function() {
$('.myPop').click(function() {
$.get("editController/loadContents", function(data){
$("#dialog").html(data);
});
$("#dialog").dialog('open');
});
});
function Save(){
$.post("/editController/Edit", $("#exampleForm").serialize(),
function(data){
$("#dialog").dialog('close');
//update grid with ajax call
});
}
</script>