I am trying to create an alfabetic index to quickly search for records in my jqGrid.
So for letter A it is:
$("#Aletter").click(
function (e) {
e.preventDefault();
$.ajax({
url: '#Url.Action("Products")',
type:'POST',
data: '_search=true&nd=1345519741915&rows=10&page=1&sidx=ProductID&sord=asc&filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22ProductName%22%2C%22op%22%3A%22bw%22%2C%22data%22%3A%22a%22%7D%5D%7D&searchField=&searchString=&searchOper='
});
});
In fiddler it returns the right data.
The only problem is how to get it into the grid?
You can use .addJSONData(data); method in your ajax success method.
$.ajax({
url: '#Url.Action("Products")',
type:'POST',
data: '_search=...',
success: function(data){
$("gridId").addJSONData(data);
}
});
See the jqgrid wiki.
Related
This is a working fiddle. http://jsfiddle.net/bpBtC/1/
But this http://jsfiddle.net/bpBtC/131/ doesn't work with the same method?
(All the other websites with XML feeds also fail using the same method, why?)
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/2399953/posts/default",
dataType: "xml",
success: xmlParser,
dataType: 'jsonp'
});
});
function xmlParser(xml) {
$(xml).find("entry").each(function () {
$(".entirecont").append($(this).find('title').text());
});
}
You are setting dataType twice.
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/2399953/posts/default",
dataType: "xml",
success: xmlParser,
dataType: 'jsonp' //<-- this is what actually used.
});
Remove the second dataType and your code will fail.http://jsfiddle.net/bpBtC/130/
The first fiddle works because it is using JSONP (not XML) as the return data type and a method of circumventing the cross-site scripting restrictions. Familiarize yourself with JSONP and how it works.
The second feed does NOT return JSONP, it returns XML and so it can't work. Also you can't have two datatype-parameters on same ajax-call.
I have a real problem. I have a php code and a form where when the form is submitted a POST request is sent and the page reloads again and ofcourse the post is viwed in the page.But i want to work with AJAX in order page not to be refreshed.I know the basics of AJAX but i don't want to build all the project from the beggining.Is there a way in success function of AJAX to link to my php code??
$.ajax({
type: "POST",
url: "index.php",
datatype: "html",
data: dataString,
success: function(data) {
//How can i link here to start running my php code which is located in the same page.
}
});
$.ajax({
type: "POST",
url: "somescript.php",
datatype: "html",
data: dataString,
success: function(data) {
// try this
console.log(data);
// see what 'data' actually is
}
});
then check in the browser by hitting F12 to look at the console.
also are you sure you want datatype of html ? you probably want a data type of json or XML , what is the server returning to you after the ajax post?
You have to cancel the form's submission so that the ajax request will take place, otherwise it is canceled. Also use .serialize to get a name-value pair string of the form data to use in the ajax call.
Html
<form id="MyForm">
<button id="MyButtonId">Submit</button>
</form>
JS
$("#MyForm").submit(function(e){
//Prevents the form from being submitted
e.preventDefault();
$.ajax({
type: "POST",
data: $("#MyForm").serialize(),
url: "somescript.php",
datatype: "html",
data: dataString,
success: function(data) {
alert(data);
}
});
});
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 7 years ago.
I have an ajax call in a function and I did not find a solution how to return the data:
function get_blog_post(id){
var info="id="+id;
$.ajax({
type: 'POST',
url: 'get_blog_post.php',
data: info,
success: function(data){
return data;
}
});
}
The code above doesn't works. The data contains the right answer but I can't use it if I callthe get_blog_post() function.
:\
function get_blog_post(id, callback){
var info="id="+id;
$.ajax({
type: 'POST',
url: 'get_blog_post.php',
data: info,
success: function(data){
callback(data);
}
});
}
get_blog_post(5, function(data){
// use data here
});
OR set async = false (not recommended):
$.ajax({
type: 'POST',
url: 'get_blog_post.php',
data: info,
async: false,
success: function(data){
return data;
}
});
The success function runs some time after the ajax call completes. That's the nature of asynchronous calls--like ajax in javascript.
That means you cant return it and have to do something with the data in that function. Perhaps it is text and you put it into a text area like:
success: function(data){
$('textarea').val(data);
}
Provide a callback method and do what ever you want to do inside it
function get_blog_post(id, callback){
var info="id="+id;
$.ajax({
type: 'POST',
url: 'get_blog_post.php',
data: info,
success: callback
});
}
Please let me know the equivalent of below prototype code in Jquery.
var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {
method: 'get',
parameters: pars,
insertion: Insertion.Bottom
});
I want to perform the same action using Jquery.
Thanks in Advance.
In jQuery the Ajax will use as following:
$.ajax({
url: "/billing/add_bill_detail",
type: "get",
dataType: "html",
data: {"pars" : "abc"},
success: function(returnData){
$("#abc").html(returnData);
},
error: function(e){
alert(e);
}
});
Use #abc if abc is the id of the div or use .abc if abc is a class.
You can place the returnData iin your HTML where you want,
There are some ways using ajax like jQuery.ajax({...}) or $.ajax({...}) other than this there are some simplified versions of these too like:
$.get() or jQuery.get()
$.post() or jQuery.post()
$.getJSON() or jQuery.getJSON()
$.getScript() or jQuery.getScript()
$ = jQuery both are same.
As you are using method : 'get', so i recommend you to use $.ajax({...}) or $.get() but remember to include jQuery above this script otherwise ajax function wont work Try to enclose the script in the $(function(){}) doc ready handler.
'abc' if you could explain it
Try adding this with $.ajax():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: "/billing/add_bill_detail",
data: pars,
dataType: 'html'
success: function(data){
$('#abc').html(data); //<---this replaces content.
},
error: function(err){
console.log(err);
}
});
});
</script>
or with $.get():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.get("/billing/add_bill_detail", {data: pars}, function(data) {
$('#abc').html(data); //<---this replaces content.
}, "html");
});
</script>
or more simply use the .load() method:
$('#abc').load('/billing/add_bill_detail');
You can use .load() method
Load data from the server and place the returned HTML into the matched
element.
Read docs: http://api.jquery.com/load/
$(function(){
$.ajax({
type: "GET",
url: "abc/billing/add_bill_detail",
data: data,
success: function(data){
alert(data);
}
});
});
I am using dojo and jqgrid library with codeigniter. it working fine. I have implemented dojo for ui and jqgrid for listing data from database. it almost working fine. when I took operations like , insert , update, delete, the jqgrid is not relecting chanes. menas it is not reloading data from database. Here are my code.
$.ajax({
type: "POST",
url: sitepath+"factory/addfactory",
dataType: "json",
data:{factory_name:factory_name,address:address,city:city,state:state,country:country,pincode:pincode,active:active},
success:function(){
}
});
dijit.byId('dialogAddFactory').hide();
reload_grid(); ]
function reload_grid()
{
$("#factorylist").trigger("reloadGrid");
}
above ajax call is for insert opetration in database.
and the reload_grid() function is for reload the jqgrid.
it will show me in console that data are perfect but it is not showing me in grid.
sometimes it is showing me and some times it is not.
it seems that reload_grid() execute before ajax response. either use async or reload the grid after ajax response.
method - I : use async
$.ajaxSetup({async: false});
$.ajax({
type: "POST",
url: sitepath+"factory/addfactory",
dataType: "json",
data:{factory_name:factory_name,address:address,city:city,state:state,country:country,pincode:pincode,active:active},
success:function(){
}
});
dijit.byId('dialogAddFactory').hide();
reload_grid();
function reload_grid()
{
$("#factorylist").trigger("reloadGrid");
}
method - II : reload the grid after ajax response.
$.ajax({
type: "POST",
url: sitepath+"factory/addfactory",
dataType: "json",
data:{factory_name:factory_name,address:address,city:city,state:state,country:country,pincode:pincode,active:active},
success:function(){
dijit.byId('dialogAddFactory').hide();
reload_grid();
}
});
function reload_grid()
{
$("#factorylist").trigger("reloadGrid");
}
it would be good to refresh grid then you resive success responce from server, and add some debug out
success:function(data){
$("#factorylist").trigger("reloadGrid");
console.log('ok');
}