Hi and thanks for helping me, English is not my first language, sorry in advance. :)
When selecting the selectbox I get the notification "no results found", but when I look at the result in the developer toolbar I see that I receive a complete JSON.
How can I match a single value instead of getting the whole JSON?
JSON result:
["Descent: Journeys in the Dark (Second Edition)","Dominion","Ascension","Star wars LCG","Magic: The
Gathering Duel Decks Anthology"]
The script:
<script type="text/javascript">
$('select').select2({
placeholder: 'Select an item',
ajax: {
url: '{{ path('user_games_json') }}', //url to the json data
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
</script>
if you want to get the data from server by ajax request you can use Select2 Bundle i'm using it in my projects it's one of the best bundle you can use to make auto complete functionality .
Related
I have several inputs formatted with this jquery plugin here.
I use $.ajax to do my mysql insert:
$.ajax({
type: 'GET',
url: 'xxxx.php',
data: $('#new_form').serialize(),
}),
I face an issue as my input values are formatted with the plugins and can't get into mysql db.
As an example:
Input value: $450,000.00 is not accepted.
Is there a way to unformat within the serialise function values that have a specific classes (like class="money")?
Thanks for your help!
I have tried the below code:
$.ajax({
type: 'GET',
url: 'xxx.php',
data: $('#new_form').serialize(),
dataType:"json",
beforeSend: function(){
$(".money").cleanVal();
},
<script>
function cleanVal(v) {
return v.replace(/^\,/,'');
};
</script>
the result of the insert in mysql is still 450 for 450,000.
Do you have an idea?
thanks
You can try using the plugin $.cleanVal() method to retrieve the unmasked type value of the corresponding HTML element, prior to your AJAX form submission. So something like this:
$.ajax({
type: 'GET',
url: 'xxxx.php',
data: $('#new_form').serialize(),
beforeSend: function(){
$(".money").cleanVal();
}
}),
I couldn't make it work with beforehand. I found a solution which is to unmask values before calling ajax.
If anyone knows why it does not work with beforesend, thanks for letting me know.
cheers
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
I have been picking away at this, though thought I would reach out for some advice, if I may, I am fairly new to AJAX.
Right, I am using the django framework, I post the data to the server, which works great, then receive some data back on the callback function, which works, though I want this to be in JSON format so I can populate a table. Currently it either renders in plain text or the browser asks me to download the json data, meaning somethings not quite catching on the $.get part. My code is:
#views.py
if request.POST:
est_show = login_a.test()
return HttpResponse(est_show, content_type='application/json')
<!--JQUERY/AJAX-->
<script type="text/javascript">
$(document).on("submit","#these_choices",function (event) {
var data_form = $('#these_choices').serialize();
if(data_form) {
$.ajax({
type: "POST",
url: "{% url Create_this %}",
data: {'test':'test','csrfmiddlewaretoken': '{{ csrf_token }}'},
cache:false,
success: function(){
jQuery(document).ready(function ($) {
$.get('{% url Create_this %}', function(data) {
alert(data[0]);
});});
},
error: function(){
alert('error !!!!');
}
});}
else {
alert('error elsewhere');
}
event.defaultPrevented(); //not running PreventDefault returns json using defaultPrevented returns json and doesnt render anything when this is blanked out...
return false;
});
</script>
It also seems the alert(data[0]) is being ran before the json data is being received in the browser. Any advice will be appreciated?
Many thanks
Try setting the mimetype in the HttpResponse to application/json. When you don't specify a dataType in the ajax request, JQuery automatically tries to infer it based on the mimetype of the response.
return HttpResponse(est_show, mimetype='application/json')
Alternatively, you can set the dataType to json to tell JQuery to expect json.
I am new to ajax so maybe this is obvious. I've tried many different not-working approaches. I have javascript that when you click on a button:
an ajax call that grabs some data from a controller - returns an object
display that data in a template that I will show on the page
Here is the javascript/ajax:
<script type="text/javascript">
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Here is the key line in grails view template:
<g:each in="${allResults}" status="i" var="result">
How do I get the data from the javascript to the gsp code (ie allResults)?
Do I have to "refresh" this template to display new data?
thanks.
You just can't make your javascript/jquery code populate things in the gsp, since the gsp is processed server-side and javascript is processed client-side, after the gsp rendered all html documents and populated them with your model. You need to be aware that your page was already processed, so things like ${variables} won't be reloaded anymore. So when you do this:
$(".resulttable").show();
It's not gonna show the result you're waiting for. You have to use javascript code to reload your result table.
So if you're using ajax here, you should use the function success to alter your html table via javascript/jquery since you already have the response you wanted. Maybe this read can help you. Oh, and I think it would be better if in your ajax call, you would define a dataType (json works great in your case), like this:
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
dataType: 'json',
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Just to make clear what kind of response you're getting from the controller.
You do not need to write your ajax calls the hard way. There are some Grails intern tags you can use inside your html:
http://grails.org/doc/latest/ref/Tags/remoteFunction.html
http://grails.org/doc/latest/ref/Tags/submitToRemote.html
http://grails.org/doc/latest/ref/Tags/remoteLink.html
Following the links you will find some nice examples...
I'm building a simple AJAX driven website (because of the audience, it's okay to do this) where pages are pulled in based on the anchor etc. Simple enough.
However, one of the pages I want to pull in should have a slideshow on it. Once the call is successful and the page appears, the plugin isn't working.
Do I have to re-initialize the plugins I want to use on a page that's dynamically pulled in?
I can't show any code right now but in theory, what would the best practice be to use plugins and re-init JS code on dynamic pages?
I usually have all my script in one jquery.scripts.js file in the head of the main index page. Do these scripts need to be on the separate pages themselves?
Many thanks!
Michael.
$('#logo a').click(function() {
$.ajax({
type: "POST",
url: "./ajax/test.html",
data: '',
dataType: "html",
success: function(data){
if(parseInt(data)!=0) {
$('#cycle').html(data);
$("#cycle").cycle({
fx: 'fade',
//easing: 'easeOutExpo',
speed: 3000,
//timeout: 0,
//next: '#cycle-next',
//prev: '#cycle-prev'
});
}
}
});
return false;
});
This code executes the call, loads the page, but does not re-init the plugin. It does nothing, and there are no errors. Weird.
What you should do is after you retrieved the ajax page, insert it into your website and when that is done you can initialize the slideshow.
so basically:
$.ajax({
url: 'myurl',
success: function (data) {
$('#target').html(data);
$('#target .slideshow').slideshow();
}
});
<div id="#target">
<div class="slideshow"></div>
</div>
You don't say whether the cycle plugin has been previously initialized before running the $.ajax command. If it been, then you'll need to destroy the cycle slideshow and re-initialize it.
success:function(data){
if(parseInt(data)!=0) {
$('#cycle').html(data);
$('#cycle').cycle('destroy');
$("#cycle").cycle({
fx:'fade',
//easing:'easeOutExpo',
speed:3000,
//timeout:0,
//next:'#cycle-next',
//prev:'#cycle-prev'
});
}
}