I'm having difficulty setting up a simple menu that displays results on a div box:
I have a list of 10 links which link to php files on my server that return data. I would like it so that when the viewer clicks on one of the links, the data from the php file will display on a div box on the screen, and then when he clicks on another link, it will display the data from that php file in the div box (replacing the previous text).
I know this is pretty simple, but I can't get it to work. I'm using jQuery, and would like to know if any of you have any quick solutions.
Thanks!!
UPDATE: I've been pretty much failing javascript code-wise. But here is the basic idea for the framework:
<div class="tabs">
<ul class="tabNavigation" style="float:left; padding:1px;">
<li><a href="#displayphpfile">Load phpfile1</a></li>
<li><a href="#displayphpfile">Load phpfile2</a></li>
<li><a href="#displayphpfile">Load phpfile3</a></li>
</ul>
<div id="displayphpfile">
<p>Load phpfile1</p>
</div>
</div>
jQuery has a specific method for doing that: load().
I would change your example a little though, so the hrefs of the links point to the php file:
<div class="tabs">
<ul class="tabNavigation" style="float:left; padding:1px;">
<li><a href="phpfile1.php">Load phpfile1</a></li>
<li><a href="phpfile2.php">Load phpfile2</a></li>
<li><a href="phpfile3.php">Load phpfile3</a></li>
</ul>
<div id="displayphpfile">
<p>Load phpfile1</p>
</div>
</div>
Then the code is very simple:
$(document).ready(function() {
$(".tabNavigation a").click(function() {
$("#displayphpfile").load($(this).attr("href"));
return false;
});
});
I haven't tested this, but is this close to what you want?
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
var file = $(this).text().toLowerCase() + '.php';
$.ajax({
url:file,
cache:false,
success: function(response) {
$('#data_goes_here').html(response);
}
});
return false;
});
});
</script>
<ol>
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a>
<li><a href="#">Baz</a></li>
</ol>
<div id="data_goes_here"></div>
Bipedal Shark is calling a document.ready inside a click element!
It should be:
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
var file = $(this).text().toLowerCase() + '.php';
$.ajax({
url:file,
cache:false,
success: function(response) {
$('#data_goes_here').html(response);
}
});
return false;
});
});
</script>
But the load method is much cleaner code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.