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/ )
Related
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').
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.
<div data-role="page" id="one" data-theme="a" >
<div data-role="content" id="content">
<script type="text/javascript" >
$(document).ready(function() {
$('#content').bind('scroll', function () {
alert(0);
});
});
In this i have set a alert on scroll, but its not working but its working after manual refresh of page.
Dont know whats the reason? Any help.
PS: the div's CSS property of position is "absolute" - Does this anything to do with the above problem?
Your problem is somewhere else, the following jsfiddle works without problems http://jsfiddle.net/mendesjuan/jBeE6/
<div data-role="page" id="one" data-theme="a" >
<div data-role="content" id="content">
<script type="text/javascript" >
$(document).ready(function() {
$('#content').bind('scroll', function () {
console.log("Here it is");
});
});
</script>
Here is a lot of content... a lot more goes here
</div>
</div>
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here