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');
}
Related
The button action does not work after searching in the index page. The action button does not work on the second page.
My Ajax Script
$(document).on("click", "#pagination a, #search_btn, #reset_btn", function() {
if(this.id == 'reset_btn'){
$("#searchform").reset();
}
$.ajax({
url: this.dataset.url,
type: 'get',
data: $("#searchform").serialize(),
processData: false,
cache: false,
contentType: false,
success: function(data) {
$("#pagination_data").html(data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(responsiveness);
}
});
})
});
Using Ajax Pagination, you can create dynamic navigation links for pages and then load data without reloading the entire web page content. So, by using Ajax Pagination, we can add dynamic page content to the data list without having to refresh the web page content.
Simply solve the bug by inserting the code below into the button function script.
KTMenu.createInstances();
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);
}
});
});
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.
i have a page loaded via jquery tabs ajax, i have a form within this page that i want to show form response via ajax. response is loading from this code:
$('#whois').submit(function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: $('#whois').attr('/lib/domainchecker.php'),
success: function(response) {
$('#reply').html(response);
}
});
return false;
);
but my form submit to parent page instead of /lib/domainchecker.php. so i see headers of my page instead of response!
any idea what makes this happen?
When you are loading content on the page via AJAX and you need to apply events to the loaded content you need to use the jquery live().
$('#whois').live('submit', function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: $('#whois').attr('/lib/domainchecker.php'),
success: function(response) {
$('#reply').html(response);
}
});
This of course goes on the main host page rather than the loaded content page.
problem is solved, no thing related to loading page via ajax but there was an error with code, i shouldn't post to $('#whois').attr('/lib/domainchecker.php') but just '/lib/domainchecker.php'
corrected code:
$('#whois').live('submit', function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: '/lib/domainchecker.php',
success: function(response) {
$('#reply').html(response);
}
});
i used jQuery with Ajax By this code it works fine
$.ajax({
type : 'POST',
url: 'http://localhost/msite/index.php/site/ajax',
data : catdata,
success : function (msg){
$('body').html(msg);
}
});
but i want to show the ajax-loading gif while fetching that information from database?
And , is that way secure Or i have to add some security to it?
$('body').html("<img src='spin.gif' />").fadeIn(100, function () {
$.ajax({
type: 'POST',
url: 'http://localhost/msite/index.php/site/ajax',
data: catdata,
success: function (msg) {
$('body').html(msg);
}
});
});
If you make your database query synchronous on the server then your Ajax will be spinning as long as the request is being processes, including a database query and server request/response roundtrip.
I believe you have to do this yourself within the jQuery. Create a hidden image on the page, call .show() just before calling the ajax command and be sure to call .hide() inside the complete event...
complete: function () {
$("#ticker").hide();
}
You can download a suitable image from ajaxload.info.