I am calling a file with ajax.
The ajax call works fine when I remove ajaxcomplete code line.
But the data that prints is not satisfactory.
How do I find what is making my ajaxcomplete, incomplete..
Help me figure out this.
Thank you.
What is that I need to do here? Thanks..
When I use the script below,I get the response in firebug, but it is not displaying.
ajax script
$("#form1").validate({
debug: true,
rules: {
plid: "required",
},
messages: {
plid: "Please select a pack name id..",
},
submitHandler: function (form) {
loading_show();
$.ajax({
type: "POST",
url: "load_data.php",
data: $('#form1').serialize() + "&page=1",
success: function (msg) {
$("#container").ajaxComplete(function (event, request, settings) {
loading_hide();
$("#container").html(msg);
});
}
});
}
});
If you're using success in your Ajax object, there's no need to use .ajaxComplete(). Just take it out:
$.ajax({
type: "POST",
url: "load_data.php",
data: $('#form1').serialize() + "&page=1",
success: function(msg) {
loading_hide();
$("#container").html(msg);
}
});
As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.
$(document).ajaxComplete(function (event, request, settings) {
// Your code here
});
You can use the code below for accomplishing the task.
$(document).ajaxComplete(function () {
loading_hide();
});
or you can use ajax start and stop.
$(document).ajaxStart(function () {
loading_show();
});
$(document).ajaxStop(function () {
loading_hide();
});
Related
I made an ajax request to get the name of each button I click...
Then I want to put everything in that url into "#Container".(url define a page that has some codes)
It works for me at the first time...but for the other times I have to reload the page to show me the details of each button and it doesn't show me details of other buttons that clicked after first desired button..
$(function () {
$('button').click(function () {
var data= $(this).val();
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {
data: data
},
success: function (data) {
$('#container').html(data);
}
});
});
});
What should I do?
Is there something preventing of running the ajax for next times ?
Try with $(document).on('click', instead of $('button').click like below
$(function () {
$(document).on('click','button',function () {
var data= $(this).val();
alert(data);
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);}
});
});
});
You will need to re-bind ajax event because of its re-rendering DOM after an ajax request completes. All those elements under #container are not virtual part of DOM and your click event only works for pre-existed elements.
Try this
Wrap ajax event in a separate function
function ajaxEvent(data){
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);
clickEvent(); //note this function attachment I added below
}
});
}
You can wrap your click event into a function
function clickEvent(){
$('button').off('click');
$('button').on('click',function(){
ajaxEvent($(this).val());
});
}
Now js looks like
<script>
$(function(){
clickEvent();
});
function ajaxEvent(data){
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);
}
});
}
function clickEvent(){
$('button').off('click');
$('button').on('click',function(){
ajaxEvent($(this).val());
});
}
</script>
Also I see you are passing ajax data as $('button').val() which is not correct. Use a input type text if you want to send a data to server.
I wanna ask how to create auto complete with json ajax response,
here is my code
$( "#employee" ).autocomplete({
source: function (request, response) {
$.ajax({
type: 'POST',
dataType:'json',
url: SITE_URL + 'self_reimbursement/percobaan',
success: function(data){
response($.map(data, function(v,i){
return {
label: v.employee_name,
};
}));
}
});
}
});
but it doesn't work, anyone know how to handle this?
the response showing data like this
[{"employee_name":"Lukas"},{"employee_name":"Yulianto Saparudin"},{"employee_name":"Lina"},{"employee_name":"Andre"}]
please help me
I have the following script
$('a[name=deleteButton]').on('click', function () {
arr=[];
var arr = $("input[name='post[]']:checked").map(function() {
return this.value;
}).get();
var content = $(this).parents('tr').find('.key').html();
$(this).parents('tr').fadeOut('slow', function() {$(this).remove();}); //THIS IS THE ONE WHICH FADES THE ROW
makeAjaxCall(content);
return false;
});
function makeAjaxCall(content){
$.ajax({
type: "post",
url: "http://localhost/partner/app/deleteRowUsingApiKey/delete",
cache: false,
data: {id : content},
success: function(data){
// alert(data);
//BUT IM NOT ABLE TO USE IT HERE,IN THE SUCCESS
},
error: function(td){
}
});
}
I have a line $(this).parents('tr').fadeOut('slow', function() {$(this).remove();});
which removes the div.But Im not able to use it inside the success of the ajax.Can anyone tell me why.
Try,
pass the $(this) reference while calling the function,
makeAjaxCall(content,$(this));
receive it like,
function makeAjaxCall(content, _this) {
and in the success call back,
success: function(data){
_this.parents('tr').fadeOut('slow', function() {$(this).remove();});
}
Let's say I have a simple form. I use this jquery piece of code to get the result using ajax on my form page.
function sendquery()
{
$("#form").submit();
var url = "form.php";
$.ajax({
type: "POST",
url: url,
data: $("#form").serialize(),
success: function(data)
{
$("#output").html(data);
}
});
return false;
}
Quite simple. What I want now is to validate the form by adding a class, let's say "blank" to inputs with empty value, and don't allow the form to be submitted. It shouldn't be too hard, but whatever i've tried will just break my form.
How can I do it?
you need jQuery validate plugin , and ......
$(document).ready(function()
{
$('#formId').validate({
submitHandler:function(form)
{
$(form).ajaxSubmit({
success:function(response)
{
//do stuff on success
},
dataType:'json'
});
},
errorLabelContainer: "#error_message_box",
wrapper: "li",
rules:
{
name:"required",
category:"required"
},
messages:
{
name:"name required",
category:"category required"
}
});
});
I need to run some PHP code from a file when I click a button from jQuery. This is the code I have:
$(document).ready(function(){
$("#btnSubmit").button().click(function(){
alert("button 1");
$.ajax({
url: 'releaseBackEnd.php',
type: 'POST',
async: false,
data: {},
dataType: 'xml',
error: function(){
alert('Error');
},
success: function(data){
//check error
alert("success!");
}
});
});
});
It shows the alert of "error". I have the releaseBackEnd.php file in the same directory of the javascript file.
check the response in firebug console .. if u don't have firebug add it to your firefox using this link
https://addons.mozilla.org/en-US/firefox/addon/1843/
Change
$("#btnSubmit").button().click(
to
$("#btnSubmit").click(
and check whether the php page is sending the response or not.
Try getting the error in the error callback function using the XMLHttpRequest.
error(XMLHttpRequest, textStatus) {
}
Try this code...
$(document).ready(function(){
$("#btnSubmit").bind('click',function() {
alert("button 1");
$.ajax({
url: 'releaseBackEnd.php',
type: 'POST',
async: false,
data: {},
dataType: 'xml',
error: function(){
alert('Error');
},
success: function(data){
//check error
alert("success!");
}
});
});
});