I have a php application to upload excel files to server.I use ajax to send data to server.But some times the ajax call works repeatedly.I called the ajax function in button click as
$(document).on("click", "#btnContinue", function() {
$.ajax({
url: "ExcelColDesptn.php",
data: data,
type: 'post',
success: function(response) {}
});
HTML:
<button id="btnContinue" name="btnContinue" class="btn btn-primary ">Continue </button>
I use firebug to fix it, it shows
I don't know why it happens. Here 'ExcelColDesptn.php' is called 3 times and 'SaveExcelToServer.php' is called 4 times. Sometimes it works exactly 1 time. Any help?
The function you have, is this binding in another function? Which is called multiple times? Because this is a LIVE binding which means, the binding exists even if the content is update.
So I expect the following:
You use ajax to update content
#btnContinue is inside an HTML element which is updated by Ajax?
You call the function to add a new binding to the button
The button gets an extra click binding
so the more times you update your ajax, the more times the upload is executed. Because of the way you bind your click.
Solution:
Make it a normal binding $("#btnContinue").on("click", fn)
Put your binding only in document ready, and not in a function which is called multiple times
use $("#btnContinue").off("click") before your new binding (which is the most ugly solution)
please use your code like this
$('#btnContinue').Click(function() {
$.ajax({
url: "ExcelColDesptn.php",
data: data,
type: 'post',
success: function(response) {}
});
});
Related
I have a PHP script that generates identical forms with different values (ie. lines of a database)
When one form is submitted, I want it to trigger an AJAX request that will update just that line of the database without reloading the page.
I have this AJAX script in my header:
function ajaxCall() {
$.ajax({
url:"database_quickupdate.php",
type: "POST",
success:function(result){
alert(result);
}
});
And obviously all forms have onsubmit="ajaxCall()" attributes set
But when I try to return the $_POST array from database_quickupdate.php, it comes back empty (meaning no data is passed to the script)
I tried various versions of serializing the data, including this here:
$.ajax({
type: "POST",
url: 'database_quickupdate.php',
data: $(this).serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
but this didn't work either.
Of course I can assign unique ID-s to each of the forms, but then how can I tell ajaxCall in the header that I want the values from the form that_has_just_been_submitted?
It must be something very basic, still, I'm lost. I think I'm missing something on the jQuery side, but I'm not even sure about that.
Thanks for your help
onsubmit="ajaxCall()"
You're calling ajaxCall() by itself, so inside it this is the default object (window in a browser).
So then:
$(this).serialize()
You are trying to serialize the window and not the form.
You need to pass the form.
Don't use on... attributes. They come with a host of issues.
Bind your event handlers with JavaScript instead.
jQuery("form").on("submit", ajaxCall);
That will pass the form as the value of this.
I want to create 'like' counter.
Currently I use ajax with php and on button click in like.php I update count in database and echo back count number to jquery.
$('btn').on('click',function(){
$.ajax({
url: 'like.php',
type: 'post',
data: someData,
dataType: 'json',
}).done(function(response){
//increase like shown on response
}).fail(function(jqXHR, textStatus, errorThrown) {
});
});
This would be triggering likes from client side.
I would like to do this on server side instead, so on button click to call php file:
Example (I put this in my page):
like
And then in like.php update count in database as above.
2 questions:
is it possible for url not to change when I click this?
how would I echo back like count from like.php this way? (because I dont use ajax to call like.php like in first example)
to your first question: simply no!
But you could make it a submit button and do post to the same url wich wouldn't change the url and you can push data through submit...
to your second question -> your like.php has to return the whole html with your counter-value ;)
cheerio :)
I have created a page "index.php" with a lot of divs and I need to refresh only one of the divs when the form is submitted.
This div loads the content from chat_window.php which is as follows:
<div id="chatbox">
<?php echo $res; ?>
</div>
<!-- Chat user input form-->
<?php echo $formchat; ?>
chat_window.php uses dynamic content - $res and $formchat from chat.php.
Everytime I post the form the content of $res and $formchat is modified and I need to reflect the same in my page which loads chat_window.php.
I used AJAX and jQuery to do the same as follows:
$(document).ready(function() {
$("#submit").click(function() {
var name = $("input#chat").val();
var dataString = "chat="+ name;
$.ajax({
type: "POST",
url: "programo/bot/chat.php",
data: dataString,
success: function() {
}
});
$("#chatwrapper").load(chat_window.php);
return false;
});
});
The index.php has a div to show the chat_window as follows:
<!-- Chat window-->
<div id="chatwrapper">
<?php include ("chat_window.php"); ?>
</div>
As per my analysis, when I post the form, $res and $formchat are getting updated in the php. But when I load the chat_window.php, it doesnot loads the modified values. It rather loads the initial static values.
(Please dont suggest setInterval() as I dont want to refresh the page automatically).
Javascript is non-blocking, so it means that the interpreter does not wait for jobs to complete before processing the next one.
In your code, $("#chatwrapper").load('chat_window.php'); is being called pretty much before the ajax request above it completes. You will need to use the ajax success event to call the reload.
Try:
$.ajax({
type: "POST",
url: "programo/bot/chat.php",
data: dataString,
success: function() {
$("#chatwrapper").load('chat_window.php');
}
});
Try moving the .load() statement into the ajax success handler:
$.ajax({
type: "POST",
url: "programo/bot/chat.php",
data: dataString,
success: function() {
$("#chatwrapper").load("chat_window.php");
}
});
The $.ajax() call is asynchronous, which means that execution does not pause waiting for the response, rather, it moves on directly to the .load() call. (Which is also asynchronous, so really you've no guarantee about the order the response from each call will come in unless you don't make the second call until the first one finishes.)
I got my work done. Though I used another way of doing it.
What I have understood after few days of R&D is that, when we submit the form to a php, the request is sent with input params. When your php file processes this request, it might be updating some global variables. It completes processing the request and returns the control back to the calling index.php page.
The important thing to notice is:
The variable updates made while processing the form submit request do not persist after the control is returned. The global php variables will only get updated when the page gets refreshed.
So, if there is a strict requirement to avoid page refresh, collect the processed data from the php in some output string and pass it back to index.php like this:
$responseString = $res . "|" . $formchat;
echo $responseString;
The success parameter of .ajax will receive this output and accordingly you can update your chat window or any other form.
I'm developing a voting system using PHP and when I click on the "Vote Up" or "Vote Down" links for a particular item, I'd like the "vote.php" script to be run and the "Votes" value to be updated to reflect it's new value without the page refreshing. I'll need to be making a POST request via Ajax and I'd prefer to be able to do this using jQuery.
Any ideas?
this can easily be achieved by use of .ajax and the success parameter from the .ajax function within jquery
its all here:
http://api.jquery.com/jQuery.ajax/
So, example:
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
}
});
I'd like to add a simple functionality to my pages, where a user will see a "follow" button and by clicking it a db record will be created (userID and pageID). I'll handle query on the backend, I suppose. I think I need to do it in AJAX, but I havebn't done much with AJAX. I was also thinking that updating the button status from FOLLOW to FOLLOWING (or something similar) I could do with jQuery, with some sort of toggle, while the request is being processed on the background.
Am I on the right track with this?
You're on the right track.
I've created an example which uses a button like <input type="image" class="follow">. When I user clicks on it it sends a request to the server (url). On success it updates the button image.
$('input[type=image].follow').click(function() {
var button = $(this);
var current_img = $(button).attr('src');
var current_alt = $(button).attr('alt');
$(button).attr('src', '/style/icons/ajax-loader.gif');
$(button).attr('alt', 'Requesting data from the server...');
$.ajax({
url: url of script the processes stuff (like db update),
type: 'POST',
data: {},
dataType: "json",
error: function(req, resulttype, exc)
{
$(button).attr('src', '/style/error.png');
$(button).attr('alt', 'Error while updating!');
window.setTimeout(function() {
$(button).attr('src', current_img);
$(button).attr('alt', current_alt);
}, 3000);
},
success: function(data)
{
$(button).attr('src', '/style/followed.png');
$(button).attr('alt', 'Followed');
}
});
return false;
});
Above is just some example code. Change it at your will. Have fun with it.
AJAX is right, jQuery makes ajax easy.
//Post with jQuery (call test.php):
$.post('test.php', function(data) {
//Do something with result data
});
It sounds like you are on the right track here. If you're working with a smaller application then using an AJAX request and creating your record would be easiest using a Java servlet and putting for example some JDBC code in your doGet or doPost method to perform the database operations.
At the same time your onSuccess method for your AJAX request can call the jQuery code necessary to update your button. Good Luck!