TASK: When button is clicked - it disables button, executes PHP script. Based on the value PHP script returns - I want to perform one of two actions!
1) if php returns "OK", I would like to simply reload the current page;
2) if php returns "NOTOK:NotOkText", I would like to fill #updateresult div with NotOkText, Reenable the button.
<button id="updatebutton" onclick="update_btn_click('params');">Execute PHP</button>
And here's the jQuery I have so far. Obviously it is nowhere near doing what i want. It just loads the DIV with the output of php and it doesn't even wait while loading finishes (PHP will try to fetch data from another server, it will take some time) - it immediately re-enables the button.
function update_btn_click(param) {
$('#updatebutton').prop("disabled",true);
$('#updatebutton').text("Processing...");
$("#updateresult").load("/update.php");
//how to wait for result and analyse what has been returned?
//act upon result
$('#updatebutton').removeAttr('disabled');}
function update_btn_click(param) {
$('#updatebutton').prop("disabled",true);
$.ajax({
url:"update.php",
type:"post",
success: function(response){
if(response=='Ok') {
location.reload();
} else {
$("#updateresult").html('error');
$('#updatebutton').prop("disabled",false);
}
},
error: function(response){
console.log('could not fetch data');
},
complete: function(response){
// hide loading
}
});
}
in update.php
if(action) {
echo 'Ok';
} else {
echo 'error';
}
Related
So I have been working on this for hours now, I have read a bunch of StackOverflow posts and I am still having no luck.
I have a page that has 2 sections to it, depending on the int in the database will depend on which section is being displayed at which time.
My goal is to have the page look to see if the database status has changed from the current one and if it has then refresh the page, if not then do nothing but re-run every 10 seconds.
I run PHP at the top of my page that gets the int from the database
$online_status = Online_status::find_by_id(1);
I then use HTML to load the status into something that jquery can access
<input type="hidden" id="statusID" value="<?php echo $online_status->status; ?>">
<span id="result"></span>
So at the bottom of my page, I added some jquery and ajax
$(document).ready(function(){
$(function liveCheck(){
var search = $('#statusID').val();
$.ajax({
url:'check_live.php',
data:{search:search},
type:'POST',
success:function(data){
if(!data.error){
$newResult = $('#result').html(data);
window.setInterval(function(){
liveCheck();
}, 10000);
}
}
});
});
liveCheck();
});
this then goes to another PHP page that runs the following code
if(isset($_POST['search'])){
$current_status = $_POST['search'];
$online_status = Online_status::find_by_id(1);
if($current_status != $online_status->status){
echo "<script>location.reload();</script>";
}else{
}
}
the jquery then loads into the HTML section with the id of "result" as shown earlier. I know this is a very bad way to do this, and as a result, it will work at the beginning but the longer you leave it on the page the slower the page gets, till it just freezes.
If anyone is able to point me towards a proper method I would be very grateful.
Thank you!!
js:
(function(){
function liveCheck(){
var search = $('#statusID').val();
$.ajax({
url:'check_live.php',
data:{search:search},
type:'POST',
success:function(data){
if(data.trim() == ''){
location.reload();
}else{
$('#result').html(data);
window.setTimeout(function(){
liveCheck();
}, 10000);
}
}
});
}
$(function(){
liveCheck();
});
})(jQuery)
php:
<?php
if(isset($_POST['search'])){
$current_status = $_POST['search'];
$online_status = Online_status::find_by_id(1);
if($current_status != $online_status->status){
$data = '';
}else{
$data = 'some html';
}
echo $data;
}
Your page is slowing down because you are creating a new interval every time you call the liveCheck function. Over time, you have many intervals running and sending requests to your PHP file concurrently. You can verify this behavior by opening the developer console in your browser and monitoring the Network tab.
What you should do instead is set the interval once, and perform the $.ajax call inside that interval. Additionally, it's good practice to not send a new request if a current request is pending, by implementing a boolean state variable that is true while an request is pending and false when that request completes.
It looks like the intended behavior of your function is to just reload the page when the $online_status->status changes, is that correct? If so, change your PHP to just echo true or 1 (anything really) and rewrite your JS as:
function liveCheck() {
if (liveCheckPending == true)
return;
liveCheckPending = true;
var search = $('#statusID').val();
$.ajax({
url:'check_live.php',
data:{search:search},
type:'POST'
}).done(function(data){
if (!data.error)
location.reload();
}).always(function(data){
liveCheckPending = false;
});
}
var liveCheckPending = false;
setInterval(liveCheck, 10000);
I want to make a simple hovercard that shows me the number 1 coming from a php page: hover.php
<?php
$user='1';
echo json_encode($user);
?>
And show it to me when I hover a simple link on another page index.php using tooltiper function in hover.js
$(function() {
$('.tooltip').tooltipster({
content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
// we'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
continueTooltip();
// next, we want to check if our data has already been cached
if (origin.data('ajax') !== 'cached') {
$.ajax({
url: '../hover.php',
success: function(data) {
// update our tooltip content with our returned data and cache it
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
});
when I hover the link it just shows me "loading..."
why does the number 1 not show up?
I'm trying to run a function that executes a spinner while a PHP script is loading and also refreshes a PHP file that counts the number of rows inserted to show the script's progress.
This is what I have so far:
<script type="text/javascript" language="javascript">
// start spinner on button click
$(document).ajaxSend(function(spinner) {
$("#spinner").show();
});
// refresh progress script and output to #content div
function updateProgress(){
$('#content').load('progress.php');
}
myTimer = setInterval( "updateProgress()", 2000 );
// Execute the primary function
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('execute.php');
});
});
// hide spinner and content div when finished
$(document).ajaxStop(function(spinner) {
clearInterval(myTimer);
$("#spinner").fadeOut("fast");
$("#content").fadeOut("fast");
});
</script>
Right now the updateProgress() function starts after the first interval is over even if the button hasn't been pushed, so I'm assuming I have to tie it in with the spinner function but I'm just not entirely sure how to make that work.
EDIT: Here's the HTML that displays the button and the div's:
<div id="stage">
Click to Import New Data into AssetData Table
<p>
<div id="spinner"><img src="/images/spinner.gif" alt="Loading..."></div>
<div id="content"></div>
<p>
<input type="button" id="driver" value="Load Data" onClick="this.disabled=true;"></div>
You need:
Load page with button. When you push button file execute.php should upload.
After user push button, spinner appearing and browser starts make ajax request to progress.php.
When execute.php uploaded, spinner disappears, progress results disappears.
jQuery code below doing this:
var myTimer;
$(document).ready(function () {
// Execute the primary function
$("#driver").click(function (event) {
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139',
success: function (data) {
//$("#someField").html(data); // you put result of executting `execute.php` into #someField field by uncommenting this string
$("#spinner").toggle();
$("#content").fadeOut("fast");
clearInterval(myTimer);
},
error: function (bob) {
// show error
console.log('get error');
clearInterval(myTimer);
},
beforeSend: function () {
myTimer = setInterval(function () {
/* // uncomment this when you will use it with real files and server
$.ajax({
url: 'progress.php',
success: function (data) {
$("#content").html(data);
}
});
*/
$("#content").append("progress data<br>");
console.log('progress executed');
}, 1); // change delay, when you work with real files and server
$("#spinner").toggle();
console.log('ajaxSend handler executed');
}
});
console.log('main function executed');
});
});
Look this example (this example for code above), please.
Now, this code do all what you need. Right?
Don't forget to uncomment some lines (ajax requests), change intervals, remove debug outputs (line 29, for example) etc.
Notice (and change it, when you will use my code) url field of execute.php ajax-requst. I had used weather api (just for example, you musth change it to progress.php because download this data takes some time, so you can see results. Remove weather url and put url to progress.php.
Also, you can check this example. Code is tided up and this version allows to load file and after that load another. And after that load another. + now myTimer+setInterval+function progress synergizes better, I suppose.
Hope, this will help you.
I have an application that I'm writing that, in one aspect of it, you click on a checkmark to complete a task, a popup window is displayed (using bootstrap), you enter your hours, and then that is sent to a PHP page to update the database. I'm using FF (firebug) to view the post. It's coming up red but not giving me an error. The only thing I'm doing is echoing out "sup" on the PHP page, and it's still showing errors, and I can't figure out why.
This is my initial click function:
$('.complete').on('click', function(event) {
var id = $(this).attr('data-id');
var tr = $(this).parent().parent();
var span = $(tr).children('td.task-name');
var r = (confirm('Are you sure you want to complete this task?'));
if (r){
addHours(id);
} else {
return false;
} // end else
});
That works fine, and it fires my next function which actually fires the bootstrap modal:
function addHours(id) {
var url = 'load/hours.php?id='+id;
$.get(url, function(data) {
$('<div class="modal hide fade in" id="completeTask">' + data + '</div>').modal()
.on('shown', function() {
pendingTask(id);
}); // end callback
}).success(function() {
$('input:text:visible:first').focus();
});
} // end function
This is also working, and the modal is displayed just fine. However, whenever I post the form to my logic page, it fails for no reason. This is the function to post the form to the logic page:
function pendingTask(id) {
$('.addHours').on('click', function(event) {
var formData = $('form#CompleteTask').serializeObject();
$.ajax({
url:'logic/complete-with-hours.php',
type: 'POST',
dataType: 'json',
data: formData,
success: function(data) {
if (data.status == 'error') {
$(this).attr('checked', false);
//location.reload();
} // end if
else {
$(this).attr('checked', true);
//location.reload();
} // end else
},
dataType: 'json'
});
}); // end click
} // end function
When this is fired, I see this in my Firebug console:
I know this is a lot of information, but I wanted to provide as much information as I could. Every other post function in the application is working fine. It's just this one. Any help would be appreciated.
Thanks in advance.
The jQuery.ajax data parameter takes a simple object of key value pairs. The problem could be that the object created by serializeObject() is too complex. If that's the case, you could either process the formData object to simplify it or try data: JSON.stringify(formData)
Does serializeObject() even exist in jQuery? is that a function you wrote yourself? Can you use jQuery functions like serialize() or serializeArray() to serialize the form data and see how it goes.
Usually the red indicates a 404 response error. We can't tell in this screen shot. Check your php code by directly calling the requested page and getting a proper response.
Also make sure your dataType is application/json which is the proper mime type header (though I don't think this is causing the error). You also should only have dataType once (you have it again at the bottom)
I figured it out. I changed the post type from the structure I entered above to a standard post:
$("#CompleteTask").validate({
submitHandler: function(form) {
var hours = $('#hours').val();
$.post('logic/complete-with-hours.php', {'hours': hours, 'id':id},
function(data){
if (data.status == 'success') {
$(checkmark).attr('checked', false);
$('.message').html(data.message).addClass('success').show();
} // end if
if (data.status == 'error') {
$('.message').html(data.message).addClass('error').show();
} // end else
},
"json"
); //end POST
} // end submit handler
}); // end validate
That seemed to do the trick
I have a profile page that contains a series of images. I want to use jQuery to allow the user to delete an image from the server and have the page update without reloading the entire page. When it's successful, it will remove the image's containing div from the page. My delete function is PHP; fairly simple:
delete.php
<?php
if (isset($_POST['id'])) {
if (unlink($_POST['id'])) {
echo "success";
}
else {
echo "failure";
}
}
?>
(There's already user authentication in place just to get them to the page that calls delete.php.)
Here's the html of one displayed image - there can be up to 5 of these chunks one after another:
<div class="box">
<img src="uploads/t_10DOT_22C_1111_1300370702_3.jpg" />
<h5><a rel="external" href="uploads/10DOT_22C_1111_1300370702_3.jpg">See full version</a></h5>
<a href="#" id="10DOT_22C_1111_1300370702_3.jpg" class="delete" onclick="return ConfirmDelete();" >x</a>
<div class="clear"></div>
</div>
My jQuery so far looks like this:
$(document).ready(function() {
$('#load').hide();
});
$(function() {
$(".delete").click(function() {
$('#load').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;
$.ajax({
type: "POST",
url: "delete.php",
data: string,
cache: false,
success: function(data){
commentContainer.slideUp('slow', function() {$(this).remove();});
$('#load').fadeOut();
}
});
return false;
});
});
The part I'm concerned with is the ajax post. How does the success part actually work? What do I need to do in my php file so that ajax knows whether the delete was a success or failure?
Once an ajax post request has finished executing the file you sent the request to, if there was no error, the code you add in the "success" section is executed, in this case
success: function(data){
/*The code you need*/
});
The previous part if where the code is executed, the "data" variable contains anything you return from your php file, it can be data, it can be a simple "true" or "false", you choose what to send to let your jQuery know if it was successful.
Hope this helps a bit.
Edit Note:
function(applyData){
if ( applyData.toString() == 'invalid' ){
$('#pollError').html('Global styles cannot be modified.');
$('#pollNotice').html('');
}
else{
$('#pollNotice').html('The changes to the style have been applied.');
}
});
The previous example is a live example of what you can do inside the function in the "success" event. There I handle an "invalid" status and otherwise it's successful, after that I refresh a couple DIVs in case of invalid or update a single DIV in case of success.
This is the php that executes:
if ( !$db->isGlobal($id_css)){
$data['id_poll'] = $id_poll;
$data['id_css'] = $id_css;
$data['css'] = $css;
$db->applyCssChanges($data);
}
else{
echo 'invalid';
}
You've two obvious options I can think of:
Your returned text should appear in the data parameter supplied to your success callback function - however you'll probably also need to make sure it's in a format compatible with the MIME Content-Type returned by your PHP, or jQuery might complain that it can't parse it, or:
Send back a 5xx Failure type message from your PHP using the header() function if the delete didn't work. That should then trigger an AJAX error callback, which you'll need to supply.
From delete.php return whether the delete succeeded or not. In the success even check for that data and handle it appropriately.
HTH.