I'm a bit new to Ajax.
I've got a Ajax file which includes a php file and refreshes it every X seconds. That code for AJAX.PHP is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "SANAjax();", 10000 ); ///////// 10 seconds
$(function() {
SANAjax = function(){
$('#dataDisplay').fadeOut("slow").load('rand.php').fadeIn("slow");
}
});
</script>
<div id="dataDisplay"></div>
This code is working fine.
Bbut the html of AJAX.PHP page shows as it is code, while I want the output html of rand.php not javascript code given above. How can i do it?
suppost "rand.php" html out put (source) is: < html >< body >this is body <\ body ><\ html >.
I want this html to be shown on the html source of AJAX.PHP.
How can i do it?
If I mess any thing let me know, I'll try to make it more clear.
You need to run it. Not insert only as file.
$.post("rand.php", { },
function(data) { $('#dataDisplay').html(data) });
updated:
SANAjax = function(){
$.post("rand.php", { },
function(data) { $('#dataDisplay').fadeOut("slow").html(data).fadeIn("slow"); });
}
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_rand').load('rand.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<div id="load_rand"> </div>
Don't forget to add the jquery library
Related
I have an HTML DIV which is updated by ajax function using setinterval. What I'm trying to do is addclass to the result of ajax. But when setinterval the addedclass is reset and displays the initial class. how to solve this issue.
<html>
<body>
<div id="something"></div>
<script>
$(document).ready(function(){
var id;
setInterval(function(){
somepage();
addactiveclass();
}, 5000);
function somepage(){
$.ajax({
url:"fetchcontents.php",
method:"POST",
success:function(data){
$('#something').html(data);
}
})
}
function addactiveclass(){
$('#list-'+id).addClass("active");
}
// UPDATED
$(document).on('click', '.mycontents', function(){
id = $(this).data('id');
$('#list-'+id).addClass("active");
}
});
</script>
</body>
</html>
UPDATE: fetchcontents.php
<?php
$output .= '<div class="list-item mycontents" data-id="'.$row['id'].'" data-name="'.$row['username'].'" id="list-'.$row['id'].'">';
//.... some php function to generate some contents inside the above div.....
// Contents do not interfere with this question.
$output .= '</div>';
echo $output;
?>
What happens is the active clas is not added to the div id="list-'.$row['id'].'". As you know setinterval keeps on executing ajax function after 5sec and the active class is reset and not displayed.
Could anyone please guide me to accomplish this issue.
Thanks in advance.
I just ran your code in jsfiddle, but replaced the ajax with a string defining a new div as contents of #something, and it works.
However it did require me to put the js inside a $(document).ready block
$(document).ready(function() {
//your js in here
})
Try that. What this does is not define the js until all the HTML is rendered. My guess is that you were referencing #something before it existed.
EDIT:=============================================
You have changed your code considerably since my answer was written, but to backup my claim to have a solution to what I believe was your question, I have re-done my jsfiddle test: https://jsfiddle.net/uf5h0sgw/
<html>
<body>
<div id="something">AAAA</div>
<script>
$(document).ready(function(){
var id;
var cnum = 1;
setInterval(function(){
somepage();
addactiveclass();
}, 1000);
function somepage(){
$('#something').html('<div class="abc">BBBB</div>');
/*$.ajax({
url:"fetchcontents.php",
method:"POST",
success:function(data){
$('#something').html(data);
}
})*/
}
function addactiveclass(){
/*$('#list-'+id).addClass("active"); */
$('#something div').addClass("active" + cnum++)
}
});
</script>
</body>
</html>
I cannot reproduce your ajax response, so I have just added some code to insert a DIV into #something every time the interval expires (reduced to 1000ms for the test).
Then the function addactiveclass() changes the class of the Div that has been added. I change the class name on a counter each loop so you can see that the class is updated every time around.
You will obviously have to adapt my code to handle what ever content your AKAX adds, but the approach should achieve what I think you want.
I have a php file that I load into another php file with jQuery. This works, but the moment I start using jQuery in the 'external file', I get ERROR 500.
The reason I used this approach is because this is handy to refresh the data after an AJAX function.
This I have:
test.php:
<script type="text/javascript" src="js/modernizr.custom.29473.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip({
items: ".plupic , .ingr",
content: function() {
var element = $( this );
if ( element.is( ".plupic " ) ) {
var src = element.attr('src');
return "<img src='" + src + "' style='max-height: 300px; max-width: 300px;'>";
}
if ( element.is( ".ingr" ) ) {
var txt = element.text();
return txt;
}
}
});
$('#kasticket').load('cart.php');
});
</script>
</head>
<body>
<div class="container">
<div id="kasticket"></div><!-- Load data with jQuery-->
cart.php:
I just do a select from the database and write some data to a table with echo();
This works perfectly, but the moment I want to use jQuery, I goes all wrong...(I know this for sure because the jQUery works in a local html file and putting this line in comment makes my php working again)
echo("
<script>
jQuery(document).ready(function() {
if($('#L$MyAant').width() < 70) {
$('.TR1$MyAant').show();
$('.TR2$MyAant').hide();
}else{
$('.TR2$MyAant').show();
$('.TR1$MyAant').hide();
}
});
</script>
");
I have no idea what I'm doing wrong.
If its any help: http://www.itreflex.be/TestAcc/test.php (with currently the jQuery line in comment).
And this is cart.php, exported to txt, it was to long to paste here.
hard to tell without the full source code but I have got a couple of ideas:
First Error 500 should be the HTTP code for internal server error, which basically means that the error lies on the server, then on the PHP side.
Could it be possible that you are mixing up PHP and jQuery on some of your other statements not posted here?
Second, you missed a single quote on your line
$('#kasticket').load(cart.php');
In your cart.php remove the brackets after echo ... For example
echo "<script>
jQuery(document).ready(function() {
if($('#L$MyAant').width() < 70) {
$('.TR1$MyAant').show();
$('.TR2$MyAant').hide();
}else{
$('.TR2$MyAant').show();
$('.TR1$MyAant').hide();
}
});
</script>";
Try this above line in your cart.php and see if that works.
Am trying to refresh data stored in a div every 10 seconds using jQuery.
My HTML code is:
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
setInterval(function() {
$("#latestData").load("getLatestData.php #latestData");
}, 10000);
});
</script>
</head>
<body>
<div id = "latestData">
</div>
</body>
</html>
And the PHP code I am using (temporarily as I know this won't change due to the same "data"):
<?php
echo "test";
?>
However, it isn't even showing "test" on the html page.. could anyone suggest where I have gone wrong?
Many thanks
jQuery load method works in a different way. Try reading its documentation.
You don't have to specify destination element ID twice, remove the second one, like this:
$("#latestData").load("getLatestData.php");
Here's a way that will solve what you want to achieve, using the $.get method in jQuery:
$(document).ready(function () {
setInterval(function() {
$.get("getLatestData.php", function (result) {
$('#latestData').html(result);
});
}, 10000);
});
If you want to refresh message count just use this code:
$(document).ready(function () {
setInterval(function () {
$("#ID").load();
}, 1000);
});
I have started learning jquery AJAX. I have run into a problem, and was wondering if you guys could help me. I am trying to pass a php variable back to jquery, but it displays as [object Object]. I will be posting my code below.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function() {
$("p").text($.get("return.php"));
});
});
</script>
</head>
<body>
<p>This is a test!</p>
<button>Click Here</button>
</body>
</html>
return.php:
<?php
$message = "Another test!";
echo $message;
?>
So what is it that I need to do to pass php variable $message into the paragraph using jquery ajax?
I know I could simply do if I changed index.html to index.php, but then if $message later changes, I have to reload the page. I am trying to learn how to make dynamic content without having to reload the page.
Thanks ahead of time for any help you provide! :-)
You'll have to wait until the data is returned before you can use it:
$(document).ready(function(){
$("button").click(function() {
$.get("return.php", function(data) {
$("p").text(data);
});
});
});
Add a callback to get.
$.get("return.php", function(data) {
$("p").text(data);
});
You can use callback function in .get function.
$(document).ready(function(){
$("button").click(function() {
$.get("return.php",function(data){
$("p").text(data);
});
});
});
Here you can pass the datatype as well in which form you want the response from server.
Suppose you want to return anyother datatype(i.e. json)from server, just use datatype with it like this :
$(document).ready(function(){
$("button").click(function() {
$.get("return.php",function(data){
$("p").text(data);
},"json");
});
});
For more detail,refer : http://api.jquery.com/jQuery.get/
I would like to create a PHP page which accepts an arguement like so:
http://localhost/page.php?topic=Foo
and then pulls data from an SQL Database where topic=Foo but then automatically checks for new data every 10 seconds and refreshes a DIV tag using Ajax. I've tried and nothing works. Any help?
EDIT: here is the code I've used:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
ext = <?php $_GET[feedtitle] ?>
$(document).ready(function() {
$("#responsecontainer").load("response.php?ext=" + ext);
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?ext=' + ext);
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
EDIT: I can do the SQL bit, it's just the getting the arguement to the response.php im having issues with.
EDIT: I have new code, but its still not working:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function gup( name )
{ name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
var feed = gup('f');
$(document).ready(function() {
$("#responsecontainer").load("response.php?ext=" + feed);
var refreshId = setInterval(function() { $("#responsecontainer").load('response.php? ext=' + feed); }, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
So, you need to
Get escaped URL parameter
,
output the jquery $.post function's result data and then you just need to know
How to refresh page with jQuery Ajax? and do an
AJAX Div Retrieval every 60 seconds?
I hope that helps :)