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?
Related
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';
}
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 a page that shows whether a user has paid or not. If they haven't paid I need to show them an image of a big red X and display a payment button, and if they have paid display a big green check. I know how to do the code for the php script, lets call it pay.php, but I need to iron out the logic for the main page's ajax. So I'm thinking something like this:
<div id="payment">
<div id="image"></div>
<div id="pay_text></div>
</div>
<script>
$(document).ready(function(e) {
if(<?php echo $is_logged_in; ?>) {
$('#payment').load(function() {
$.ajax({
data: $this.serialize(), // get the form data
type: "POST", // GET or POST
url: "Scripts/pay.php", // the file to call
complete: function(data) {
if(data=="Yes") {
$('#image') //do some jquery to make the correct image display here
$('#pay_text').text("Yah you paid");
} else {
$('#image') //do some jquery to make the correct image display here
$('#pay_text').text("Sorry you didn't pay");
}
}
});
}
}
});
</script>
So basically the script would echo back yes or no. And I only want to evaluate this load after the user has logged in (i need to see if that specific user paid). So is my logic write or am I way off?
You probably should'nt use load that way, and there really is no need for it.
Your PHP variable $is_logged_in would of course have to be true before the ajax function will run, and returning true or false is usually the way to go with code, not returning yes or no, and if data is either true or false you can stick it right in the if statement, no fuzz!
As for sending form data with the ajax function, what form? And what is $this?
You'll have to figure out if the user paid or not on the serverside, and you don't really need any data from the client to do that, all you need to do is check your database or whatever it is you're using to see if that user paid, and return true or false.
<script type="text/javascript">
$(document).ready(function() {
if(<?php echo $is_logged_in; ?>) {
$.ajax({
type: "POST",
url: "scripts/pay.php"
}).done(function(data) {
if (data) {
$('#image').css('background', 'url(/yes.png)');
$('#pay_text').text("Yah you paid");
}else{
$('#image').css('background', 'url(/no.png)');
$('#pay_text').text("Sorry you didn't pay");
}
});
}
});
</script>
The problem is upon load of website, width of .mCSB_container class is ok, but when i click on a link, for example "projects" link, which fires an ajax function, width of .mCSB_container does not change even if contents are not that much. Web page will not load upon click on the link. I tried using the "update" function, but seems like it is not working.
ok I use this plugin and i had te same problem but check this:
<script type="text/javascript">
$(function() {
$("#content").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize: true // <- the solution
}
});
// get ajax link
$('.Link').click(function(){
$.get(this.href, function(data) {
$("#content .mCSB_container").html(data); // fill .mCSB_container
$("#content").mCustomScrollbar("update");
$("#content").mCustomScrollbar(
"scrollTo"
,"top"
,{scrollInertia:200}
); // go to Top content
});
return false;
});
});
</script>
Hey guys. I'm usign a js/ajax script that doesnt work with internet explorer. Firefox its ok.
Btw the head tag, im using this:
$(document).ready(function () {
//Check if url hash value exists (for bookmark)
$.history.init(pageload);
//highlight the selected link
$('a[href=' + document.location.hash + ']').addClass('selected');
//Seearch for link with REL set to ajax
$('a[rel=ajax]').click(function () {
//grab the full url
var hash = this.href;
//remove the # value
hash = hash.replace(/^.*#/, '');
//for back button
$.history.load(hash);
//clear the selected class and add the class class to the selected link
$('a[rel=ajax]').removeClass('selected');
$(this).addClass('selected');
//hide the content and show the progress bar
$('#content').hide();
$('#loading').show();
//run the ajax
getPage();
//cancel the anchor tag behaviour
return false;
});
});
function pageload(hash) {
//if hash value exists, run the ajax
if (hash) getPage();
}
function getPage() {
//generate the parameter for the php script
var data = 'page=' + encodeURIComponent(document.location.hash);
$.ajax({
url: "http://pathfofolder/js/loader.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//hide the progress bar
$('#loading').hide();
//add the content retrieved from ajax and put it in the #content div
$('#content').html(html);
//display the body with fadeIn transition
$('#content').fadeIn('slow');
}
});
}
The loader.php contain the php code to get pages, something like:
switch($_GET['page']) {
case '#link1' : $page = 'contenthere'; break;
}
echo $page;
So, on the links, i'm using Link 1 to load the content into the div content.
The script does works well with firefox, but with internet explorer it doesnt load the content. Could someone pls help me to fix this?
It not go into the success function at all on IE, and i'm getting no html error from IE too.
Best Regards.
Make sure your html is sounds. FF tends to auto fix the syntax.