Are there examples of using ajax for dropdownlist. I want to pre-load the dropdownlist so it can be selected from, but also want to be able to key into the dropdownlist field to search and have it list items matching.
Please provide links to examples, or post example code.
You can use very powerful plugin: Chosen plagin.
Example for you case:
$('choices input').autocomplete({
source: function( request, response ) {
$.ajax({
url: "/autocomplete/Controller"+request.term+"/",
dataType: "json",
beforeSend: function(){$('ul.chzn-results').empty();},
success: function( data ) {
response( $.map( data, function( item ) {
$('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');
}));
}
});
}
});
You can use Auto Complete functionality of J-Query See the below link for its sample implementation..
http://basiccodeexample.blogspot.in/search?q=AutoComplete
Or You can use datalist html5 tag find the reference in below link
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
Related
I'am trying to make an auto suggestion plugin, this suggest by relevance, popularity
and change color of found-keywords, display 5 different suggestions
I'm noob, plz help !
I could suggest the following example to search using ajax call. Only thing is your search item should be stored in database so you can retreive the information from the database as search item
$("#searchkeyWord").autocomplete({
source: function( request, response ) {
$.ajax({
url: "Path/searchByName",
dataType: "",
data: {querypatam: request.term},
success: function( data ) {
response( $.map( data.SearchResponse, function( item ) {
return {
id:item.id,
label: item.Name,
value: item.id
}
}));
}
});
},
select: function( event, ui ) {
var name_no_html=ui.item.label.replace('<b>','');
var name_no_html=name_no_html.replace('</b>','');
$("#searchkeyWord").val(name_no_html);
$("#searchkeyWord_value").val(ui.item.id);
return false;
},
minLength: 3 // can increase or decrease your term to be searched
});
I want to merge two plugins together.
I am using jquery autocomplete for zipcode field.
Now I want to add multiple entries for zipcode field so I found jQuery tags input plugin.
So I wnat to use jQueryUI autocomplete with jQuery tags input plugin.
I tried myself on JSfiddle but not working. link :-http://jsfiddle.net/7aDak/1719/
Can anyone help me for this functionality.
You met two problems here:
default param name used by autocomplete is "term" - no changeable by simple param, you need to do it by "source" function
result needs two fields: "label" and "value" with is not provided by your provider - need response remap.
Code below is good for startpoint for you:
$('#tag1').tagsInput({
autocomplete_url:'http://ws.geonames.org/postalCodeSearchJSON',
autocomplete:{
source: function(request, response) {
$.ajax({
url: "http://ws.geonames.org/postalCodeSearchJSON",
dataType: "json",
data: {
postalcode_startsWith: request.term
},
success: function(data) {
response( $.map( data.postalCodes, function( item ) {
return {
label: item.countryCode + "-" + item.placeName,
value: item.postalCode
}
}));
}
})
}}});
http://jsfiddle.net/YGm89/
I'm using jQuery Mobile with PhoneGap. How can I pull JSON data (from a server) and populate it into a list view.
Have a look at the jQuery.getJSON() method on w3schools and jQuery API.
Example from jQuery API:
$.getJSON('ajax/test.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
});
This example, of course, relies on the structure of the JSON file:
{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
Using this structure, the example loops through the requested data,
builds an unordered list, and appends it to the body.
try this one:
$.ajax({
type: "POST",
url: "your_url",
contentType: "application/json; charset=utf-8",
dataType: "json",
success:successFunction,
error: function(msg) {
alert(msg.statusText);
}
});
function success:successFunction(data){
var html ='';
$.each(data.d, function(index, item) {
html += '<li>' + item.Your_data+ '</li>';
});
$('#ul_id').append($(html));
$('#ul_id').trigger('create');
$('#ul_id').listview('refresh');
}
function makeList() {
$.post("http://example.com/getlist.php",
function(resultfromphp) {
$('#ulListview').append(resultfromphp);
$('#ulListview').trigger('create');
$('#ulListview').listview('refresh');
});
}
$("#pageName").live('pagebeforeshow', function(event) {
makeList();
});
This works perfectly for me. The php is returning <li></li> tags
The html is a <ul id="ulListview"></ul> tag
I am working on a similar project using JQM which I would be passing through phone gap later on. The above answers although can be used to populate data dynamically using ajax, however don't address the implications of overriding the JQM ajax as the Jquery ajax is not really equipped at handling the JQM events which are built to extend DOM event for those who are interested or in a similar dilemma like me, I hope the below page helps you to take a informed decision with your project.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html
I am trying to update a dropdown using knockout and data retrieved via an ajax call. The ajax call is triggered by clicking on a refresh link.
The dropdown is successfully populated when the page is first rendered. However, clicking refresh results in clearing the dropdown instead of repopulating with new data.
Html:
<select data-bind="options: pages, optionsText: 'Name', optionsCaption: 'Select a page...'"></select>
<a id="refreshpage">Refresh</a>
Script:
var initialData = "[{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}]";
var viewModel = {
pages : ko.mapping.fromJS(initialData)
};
ko.applyBindings(viewModel);
$('#refreshpage').click(function() {
$.ajax({
url: "#Url.Action("GetPageList", "FbWizard")",
type: "GET",
dataType: "json",
contentType: "application/json charset=utf-8",
processData: false,
success: function(data) {
if (data.Success) {
ko.mapping.updateFromJS(data.Data);
} else {
displayErrors(form, data.Errors);
}
}
});
});
Data from ajax call:
{
"Success": true,
"Data": "[{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}]"
}
What am I doing wrong?
The problem you have is that you are not telling the mapping plugin what to target. How is it suppose to know that the data you are passing is supposed to be mapped to the pages collection.
Here is a simplified version of your code that tells the mapping what target.
BTW The initialData and ajax result were the same so you wouldn't have noticed a change if it had worked.
http://jsfiddle.net/madcapnmckay/gkLgZ/
var initialData = [{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}];
var json = [{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"}];
var viewModel = function() {
var self = this;
this.pages = ko.mapping.fromJS(initialData);
this.refresh = function () {
ko.mapping.fromJS(json, self.pages);
};
};
ko.applyBindings(new viewModel());
I removed the jquery click binding. Is there any reason you need to use a jquery click bind instead of a Knockout binding? It's not recommended to mix the two if possible, it dilutes the separation of concerns that KO is so good at enforcing.
Hope this helps.
I am calling pages via AJAX in jQuery.
The content of these pages needs to be filtered so that i only grab a certain DIV class. In this instance 'Section1'.
This filtered data needs to replace the same data on the current page in the DIV of the same class.
I currently have this but it is not really working for me:
$("#dialog_select").live('change', function() {
//set the select value
var $optionVal = $(this).val();
//$(this).log($optionVal);
$.ajax({
type: "GET",
url: $optionVal,
dataType: "html",
cache: false,
success: function(data) {
var $filteredData = $(data).filter('.Section1');
$('.Section1').replaceWith($filteredData);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
I think your problem is likely here:
var $filteredData = $(data).find('.Section1');
$('.Section1').replaceWith($filteredData);
.filter() would only find top level elements in the response (if it's a page, that's <html>, and wouldn't have any results). .find() looks for decendant elements. Also keep in mind that if you have multiple .Section1 elements, this won't behave as expected and will have some duplication going on.
This is a tricky thing to do and I would recommend placing the data into something like a DOMParser or document.implementation.createDocument or MSXML.
if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
else {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
is a basic code example. jQuery itself can filter on a selector with the load function. http://api.jquery.com/load/ This however has several limitations such as not being able to filter on html, head, or body tags. This is why the above method is safer.