I have a script Ajax/jQuery this autoupdate a statistics in my site this is the code:
<!--Jquery/AJAX script-->
<script type="text/javascript">
function updateStats(stat)
{
var stat = ["online","newestPlayer","cuentas","personajes","guilds"];
var url = "template/Next/stats_do.php";
$.each(stat, function(i, key){
$.post(url, {stats: key}, function(data) {
$("#" + key).text(data);
});
});
}
setInterval('updateStats("updateStats")', 500);
</script>
Work all fine. for the results i use. for example...
But i have a ProgressBar with php. The code for work is (a part)
<?= round (HERE MY RESULT*100/$pBar2max); ?>%
The problem is that putting the does not allow multiplication in order to get the percentage
and i try
$onlines = <span id="online">
and insert a echo in the code, but not work, any solutions? i need extract a number in text for multiply with *100
Related
I have created a ajax load more button to grab more data from my database, which all works fine. I am now trying to do a count, so the button displays how many results are left to display. Here is my jQuery code that is fired when the button is clicked:
jQuery(document).ready(function(){
jQuery(document).on('click','.show_more',function(){
var ID = jQuery(this).attr('id');
var count = jQuery(".singleproduct").length;
var totals = jQuery('.totalleft').text();
var finaltotal = totals - count;
//jQuery('.show_more').hide();
jQuery('.loding').show();
jQuery.ajax({
type:'POST',
async: true,
crossDomain : true,
url:'example.com/data.php',
data:'count='+count,
success:function(html){
//jQuery('#show_more_main'+ID).remove();
jQuery('.retailitems').append(html);
jQuery('html, body').animate({scrollTop: jQuery(".site-info").offset().top}, 1000);
}
});
jQuery( ".totalleft" ).replaceWith( finaltotal );
});
});
And here is the code for the button:
<span id="<?php echo $result['id']; ?>" class="show_more" title="Load more posts">Load <span class="totalleft"><?php echo $loadmore;?></span> more</span>
When clicked for the first time, the button updates with the correct remaining results. When clicked a second time, the news results populate, but the count remains the same.
Do i have things in the right order above?
Thanks
EDIT
So i found the issue. The calculations were correct, but when updating the count on the button i was actually removing the class of 'totalleft' with this:
jQuery( ".totalleft" ).replaceWith( finaltotal );
So i replaced this with:
jQuery( ".totalleft" ).text( finaltotal );
and all is fine, thanks for all the help.
parse the text() in .totalleft to get an integer value
var totals = parseInt(jQuery('.totalleft').text());
if your calculations are correct, you should get the right number back
EDIT
because ajax is async you are re-updating the value of .totalleft before the ajax is complete.
make sure that you are doing that in the ajax callback:
success:function(html){
//jQuery('#show_more_main'+ID).remove();
jQuery('.retailitems').append(html);
jQuery('html, body').animate({scrollTop: jQuery(".site-info").offset().top}, 1000);
jQuery( ".totalleft" ).replaceWith( finaltotal );
}
finally, I'm not sure what var count = jQuery(".singleproduct").length; is so make sure that the values you are expecting are correct by console logging before and after the subtraction
EDIT #2
var count = jQuery(`.singleproduct`).length;
console.log('count :' + count);
var totals = jQuery('.totalleft').text();
console.log('totals :' + totals);
are you getting numbers on the above logs? if not, then you might be replacing some part of your html with the ajax request and singleproduct or totalleft may not be there anymore
I am currently putting together a page where I have a list of 15 staff images. I'm trying to configure this so that when a user hovers over the image, a div in the upper-right corner updates with information queried from a MySql DB. For instance, web user hovers mouse over picture of Staff #112 -> Div updates to include height, weight, location, and position from mysql without refreshing. I have researched for a while but can only find how this is done using Ajax, Php, Jquery, and a form element. Any help, tutorials, or information would be greatly appreciated. Thanks!
UPDATE
I ended up changing some of the code that was provided and the final version was:
<script type="text/javascript">
$('.staff_hover').on('click', function(){
id = $(this).attr('id');
$.post('staff_php.php',{id: id}, function(data) { var obj = jQuery.parseJSON(data);
var staffnum = obj.staffnum;
var height = obj.height;
var eye = obj.eye;
var hair = obj.hair;
var abt1 = obj.abt1;
var abt2 = obj.abt2; alert(obj.height);
$('#staff_info').html('<b>STAFF #</b>: ' + staffnum + ' <br /><b>HEIGHT</b>: ' + height + ' <br /><b>EYE COLOR</b>: ' + eye + '<br /> <b>HAIR COLOR</b>: ' + hair + '<br /><b>ABOUT</b>:<br /> <b>-</b> ' + abt1 + '<br/><b>-</b> ' + abt2);
});
}); </script>
Here is how flow of your application would work with jQuery, PHP,MySQL:
Browser through jQuery would send request to a server.
PHP would receive request do query to MySQL. And return result back.
jQuery would get response and populate div.
So you need PHP script and JavaScript.
Start with PHP and try to get things from db (look in to PHP PDO)
Than look into jQuery.ajax().
Good luck.
You will want a structure something like this:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('img').hover(function() {
id = $(this).attr('id');
$.ajax({
type: "POST",
url: "ax_get_staff.php",
data: 'hovered_id='+id,
success:function(data){
alert(data);
var obj = jQuery.parseJSON(data);
var height = obj.height;
var weight = obj.weight;
alert(obj.height);
$('#upper_right_div').html('Height is: ' + height + ' and weight is: ' + weight);
}
});
},function(){
//Hover-out function
//Clear your div, or some such
$('#upper_right_div').html('');
});
});
</script>
</head>
<body>
<div id="myDiv">
Hover over picture below to GO:<br />
<img id="6" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
</div>
<div id="upper_right_div"><div>
</body>
</html>
And your AJAX (ax_get_staff.php) file will look like this:
<?php
include 'login_to_database.php';
$id = $_POST['hovered_id'];
$result = mysql_query("SELECT `height`, `weight`, `location` FROM `staff` WHERE `user_id` = '$id'") or die(mysql_error());
$staff = mysql_fetch_assoc($result);
//print_r($staff);
echo json_encode($staff);
?>
I have got site with dynamic refreshing divs.
Source:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('boo.php').fadeIn("slow");
$('#loaddiv2').fadeOut('slow').load('boo2.php').fadeIn("slow");
}, 1000);
</script>
But I want fadeout and fadein only if boo.php return different(updated) value than actuall div. How compare new and actuall value and do this?
P.s Sorry for bad English but I'm Polish
You'll need to write a callback function that inspects the returned data and compares it to what's stored within the div already. Additionally, the functions that show/reveal the div will probably need to be moved to the callback function as well.
Documentation is available here.
You'd have to write an Ajax function to boo.php and compare the result with the div's value
$.ajax(
{
url: "boo.php",
success: function(result)
{
if($("#loaddiv").html() != result)
{
$("#loaddiv").fadeOut("slow")
$("#loaddiv").html(result);
$("#loaddiv").fadeIn("slow");
}
}
});
You need to check the result you are getting from the ajax call and compare it with the current content. Assuming you have an element with ID MsgCount in your Ajax response and current Div Markup and you are using the value of that to compare, the below code will work
$(function() {
var auto_refresh = setInterval(function(){
var currentMsgCount= $('#MsgCount').text();
$.get("boo.php",function(data){
var resultData=$(data);
var newMsgCount= resultData.filter('#MsgCount').text();
if(newMsgCount!=currentMsgCount)
{
//content is different. Let's show it
$('#loaddiv').fadeOut('slow',function(){
$('#loaddiv').html(data).fadeIn("slow");
});
}
});
}, 1000);
});
I have a multi level select chain, where by the value of the first select generates the options for the next select list. And within the second list some of the values will cause a div to display with another input.
My codes (below) seem to work just fine when tested on static content (ie: the second select is hard coded in the html). But when I add it with JQuery, the second level no longer triggers the .change function.
<script type="text/javascript">
$(document).ready(function() {
$dts = $("select[name='tourdes']");
$dts.change(function() {
var dtsValue = $(this).val();
var dtsString = '?tourdes=' + dtsValue;
$('#dateSelect').show();
$('#dateSelect').load('include/avdates.php' + dtsString).append();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$tags = $("select[name='tourcode']");
$tags.change(function() {
if ($(this).val() == "private") {
$(".prvcal").css({"visibility":"visible"});
}
});
});
</script>
I am guessing something needs to be re-initialized, but I am getting no where with my experiments.
If you're using jQuery 1.7 you'll want to use on, as both live and delegate are deprecated.
$(document).on("change", "select[name='tourcode']", function() {
var dtsValue = $(this).val();
var dtsString = '?tourdes=' + dtsValue;
$('#dateSelect').show();
$('#dateSelect').load('include/avdates.php' + dtsString).append();
});
docs for on()
You are probably using dynamically-generated HTML elements. If that is the case, you need to use .delegate() to handle them:
$('select').delegate("[name='tourdes']", 'change', function() {
Trying to implement a simple "load more" functionality with jquery. The idea is to use it in the same way as one does pages. Click and a certain number of posts loaded from the database show up.
I have the following javascript:
$(function(){
var count = 0;
var num = 20;
$("#contents").load("posts.php");
$("#more").click(
function(){
var count = 0;
var num = 20;
$("#contents").load("posts.php");
$("#more").click(
function(){
$(".loading").show("fast");
count += num;
$.post("posts.php", {'page': count}, function(data){
$("#contents").append(data);
$(".loading").hide("slow");
});
}
);
and the following file posts.php
<?
echo "hello";
?>
And I have another file page.php with
<div id="contents"></div>
<div class="loading"><span style="text-decoration: blink;">LOADING...!</span></div>
<button id="more">More..</button>
When i click the "More Button" though nothing happens even though I'm just trying to print out a simple hello world here. I have loaded the javascript in the head of the file like
<script type ="text/javascript" src ="javascript/load.js"></script>
Other javascript functionality I've implemented is working fine. Is there something to add to the "loading" or "contents" elements in page.php?
Your javascript lacks basic syntactic structure, and must be issuing a syntax error, unless you messed it up while posting here. Try this:
$(function(){
var count = 0;
$("#more").click(loadPosts);
loadPosts();
function loadPosts() {
var num = 20;
$(".loading").show("fast");
count += num;
$.post("posts.php", {'page': count}, function(data){
$("#contents").append(data);
$(".loading").hide("slow");
});
}
});
UPDATE
Edited the code above and removed $("#contents").load("posts.php");. It was not necessary, and redundant.