I'm trying to refresh this part of the page
<div class="refresh">
<?php
include("message.php");
?>
</div>
with this code :
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#refresh').empty();
$('#refresh').load('message.php');
}, 500);
</script>
Could you help me?
change this
<div class="refresh">
To
<div id="refresh">
because you are using id selector in jquery to load the content.
if you are using $('#refresh') then "#" represents the id, so change this
<div class="refresh">
to
<div id="refresh">
or change this
$('#refresh')
to
$('.refresh').
Related
Loading comments others automatically like facebook
**php code updated **
<section class="panel-body">
<div class="container">
<div class="comment">
<div class="commenter" name="comments">
<img width="80px" height="80px" src="uploads/<?php echo $row['photo']; ?>">
</div>
<div class="comment-text-area">
<textarea class="textinput"id="comment" name="comments" placeholder="Comment Here......"></textarea>
<button type="submit" class="butn"name="compost">post comment</button>
</div>
</div>
</div>
</div>
</fotm>
<div id="comments">
<?php include'cajax.php'; ?>
</div>
</section>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(document).ready( function(){
$('#comments').load('cajax.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#comments').load('cajax.php');
refresh();
}, 1000);
}
</script>
how to load comments automatically without page refreshing I know its
possible with ajax but how to implement code please help us
first create another php file named comments.php or whatever you want and cut and paste the code that fetch the comment from DB in that file
And in your main file where you want to show comments create a div , id="comments" or whatever you want .. and inside that div include the new php file like this
<div id="comments">
<?php include'comments.php'; ?>
</div>
now above that code paste the following javascript code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(document).ready( function(){
$('#div_name').load('filename.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#div_name').load('filename.php');
refresh();
}, 1000);
}
</script>
Replace the div_name with the name of your div and filename.php .. with your file name
I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )
I'm having a problem with a simple jquery slide-show (English is not my first language so I'll try to explain it). I have my index.php in which I place the slideshow.html by using jquery. Here's the code for the index.php, the jquery and the slideshow0.html
index.php
<body>
<div class="main">
<div class="contenedorHeader">
<?php include("header.html"); ?>
</div>
<div class="central">
<div class="fondoDescription">
<div id="contenedorDescription"></div>
</div>
<div id="slideshowHolder"></div>
</div>
<div class="footer"></div>
</div>
</body>
jquery code:
$(document).ready(function()
{
$("#slideshowHolder").load("slideshow0.html");
});
slideshow0.html:
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshowContent IMG.active');
if ( $active.length == 0 ) $active = $('#slideshowContent IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshowContent IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
</head>
<body>
<div id="slideshowContent">
<img src="images/slideshows/home/image1.png" alt="Slideshow Image 1" class="active"/>
<img src="images/slideshows/home/image2.png" alt="Slideshow Image 2" />
<img src="images/slideshows/home/image3.png" alt="Slideshow Image 3" />
</div>
</body>
</html>
As you can see, the slideshow0.html is loaded into "slideshowHolder". There's no problem here, but when I click an item in the menu I need to replace "slideshow0.html with another slide-show which is exactly like this one except for the images, and the problem is that the looping interval doesn't works properly, it's like a function is executing twice, or something like that. I've tested the slide-show outside the PHP and they works fine, so I'm guessing is a problem with the PHP or the method to load/replace the HTML.
You can see the project here: http://www.spamtv.com.ar/coya/index.php The first slide-show is slideshow0.html, click in "web" to load the next slide-show (which doesn't works)
When you load/replace the slideshow, the old interval defined by setInterval( "slideSwitch()", 5000 ); is still set and running. Each time you load a new slideshow, a new interval will be defined but the old ones won't be deleted.
You have to manually stop them:
$(document).ready(function()
{
if (slideshowInterval) {
clearInterval(slideshowInterval);
}
$("#slideshowHolder").load("slideshow0.html");
});
And when defining it:
$(function() {
slideshowInterval = setInterval( "slideSwitch()", 5000 );
});
I'm trying to slide one div closed, and another open at the same time using a button. here is my div code:
<div class='toggle_parent'>
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='toggled_content' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
And then the jQuery is as follows:
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none')
$('.toggled_conent').slideDown().css('display', '')
});
});
I've tried so much that my brain doesn't function anymore and I know the answer will be "so easy I should have figured it out", but I'm stuck. I want the toggled content to appear and the toggleHolder to go away when you press the toggler.
Thanks in advance!
Hide your hidden content via javascript instead of the style, and get rid of the .css calls:
$(document).ready(function(){
$('.toggled_content').hide();
$('.toggler').click(function() {
$('.toggleHolder').slideUp();
$('.toggled_content').slideDown();
});
});
Also you had a typo in your .toggled_content selector.
Here's a working JSFiddle.
Have you tried this?
$('.toggler').click(function() {
$('.toggleHolder').slideUp().hide();
$('.toggled_conent').slideDown().show();
});
Please change class name = "toggled_content" to something else in div and jquery so this looks like
jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none');
$('.haveOther').slideDown();
});
});
</script>
HTML
<div class='toggle_parent' style="background-color:#999;">
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='haveOther' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
This will work for you.