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);
}
});
Related
I have made this ajax request to show the validation errors and prevent the page to reload
$(document).on('mousedown', ':submit', function() {
//alert('clicked submit');
var form = $("form");
$.ajax({
type: 'post',
url: '/events',
headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
data: form.serialize(),
dataType: 'json',
success: function(data){
},
error: function(data) {
for(errors in data.responseJSON){
swal({text:data.responseJSON[errors]});
}
}
});
});
All is fine with this code! The problem is that after successfull submit i have 2 inputs in DB...how can i prevent this?
Are you sure the form isn't actually submitting and saving the values once by post and once by ajax? Usually if you're capturing a submit event you listen for the forms submit even not the mousedown event of the submit button e.g.
$('form').on('submit', function(e) {
// Stop the forms default submit action
e.preventDefault();
//alert('clicked submit');
var form = $("form");
$.ajax({
type: 'post',
url: '/events',
headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
data: form.serialize(),
dataType: 'json',
success: function(data){
},
error: function(data) {
for(errors in data.responseJSON){
swal({text:data.responseJSON[errors]});
}
}
});
});
Also the e.preventDefault() will prevent the form from submitting itself along with your ajax action. Also you'd best off selecting your form by an ID or class name.
I have a page (main view) that contains several partial views. I am loading these partial views to the specific divs using ajax.
My problem is that I want to load these divs in order : the first div, then the second... But what I am getting is that the page loads fine but the order of partial views appearance is not right. Is there a way to force the order of loading the partial views ?
Since you are loading them via ajax, you need the loading of the second div to be a callback of the ajax that loads the first div, and the loading of the third div to be a callback of the ajax that loads the second div. Something like this:
$(document).ready(function() {
$.ajax({
url : '/Controller/Div1Action', // first div url
type: 'GET',
success: LoadSecondDiv
});
});
function LoadSecondDiv() {
$.ajax({
url : '/Controller/Div2Action', // second div url
type: 'GET',
success: LoadThirdDiv
});
}
function LoadThirdDiv() {
$.ajax({
url : '/Controller/Div3Action', // third div url
type: 'GET'
});
}
You'll probably want to choose better names for the functions based on what the divs are.
Update based on comment: You'll want to call the function rather than just put down the function name if you're wrapping it in an anonymous function:
$.ajax({
url: '/LoadingPartials/LoadContact',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
}).success(function (result) {
$("#AjaxContactGrid").html(result);
LoadInsurance(); // Don't forget the parentheses here
});
function LoadInsurance() {
$.ajax({
url: '/LoadingPartials/LoadInsurance',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html' }).success(function (result) {
$("#AjaxLIGrid").html(result);
// Call function to load 3rd div here (make sure to include the parentheses to actually call it)
})
}
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);
}
});
});
The following image tag is in my Login Page
<img id="CaptchaImg" alt="Captcha" src="#url.action("Captcha","Login")" style="" />
Now when I refresh my login Page, it works fine, and gets the image from the controller, but when I logOut and the login Page renders .the controller method is not being called.Problem is only in IE works fine on Chrome.Is there are work around?
Can I do something with jQuery Ajax call to the controller, I tried this but the success method is not called. Is there any other way?
$.ajax({
type: "GET",
url: '/Login/CaptchaImage',
datatype: "image",
success: function(data) {
debugger
$('#CaptchaImg').attr('src', data);
}
});
Try this
$.ajax({
type: "GET",
url: '#Url.Action("Captcha","Login")',
dataType:"image/jpg",
success: function (data) {
$('#CaptchaImg').attr('src', data);
}
});
web Server should return base64 Data. like this
{ base64Data:"blahblahblah" }
your ajax request content-type could be plain json ;
in your success function in ajax you could do like this
success:function(data){
var src="data:image/png;base64,"+data.base64Data;
$('#CaptchaImg').attr(src,src)
}
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');
}