jquery load a specific #Div content from multiple html files - php

Question

I am trying to make a Content Slider for my site. I have multiple HTML files and the structure of these files is like this:
<div id="title"><h2>Title of the Slide</h2></div>
<div id="image"><img src="image.jpg" width="600" height="300" alt="image"</div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
I have been trying to use the following script get content (but no success):
<?php
function render($position="") {
ob_start();
foreach(glob("/slides/*.html") as $fileName) {
$fname = basename( $fileName );
$curArr = file($fname);
$slides[$fname ]['title'] = $curArr[0];
$slides[$fname ]['image'] = $curArr[1];
$slides[$fname ]['content'] = $curArr[2];
foreach($slides as $key => $value){
?>
<div id="slide-title">
<?php echo $value['title'] ?>
</div>
<div id="slide-content">
<?php echo $value['content'] ?>
</div>
<div id="slide-image">
<?php echo $value['image'] ?>
</div>
<?php
}}
?>
<?php
return ob_get_clean();
}
But then I came to know about a jQuery function.... (again no success)
jQuery.noConflict();
(function($){
$(document).ready(function () {
$('#slide-title').load('slides/slide1.html #title');
$('#slide-content').load('slides/slide1.html #content');
$('#slide-image').load('slides/slide1.html #image');
});
})(jQuery);
Now My questions are.....
Am I using the right syntax.
How do I get the content from multiple files using jQuery.
Please Note : My knowledge on Programming is almost '0'. I have just started learning it.

Answer 1

$('#slide-title').load('slides/slide1.html #title');
$('#slide-content').load('slides/slide1.html #content');
$('#slide-title').load('slides/slide1.html #image');
This will work, but not very quickly. You are doing three separate requests to the same page. You can combine them all into one fairly easily using $.get and its callback argument:
$.get('slides/slide1.html', function(html) {
var $html = $(html);
$('#slide-title').html($html.find('#title'));
$('#slide-content').html($html.find('#content'));
$('#slide-image').html($html.find('#image'));
});
Note that I have corrected slide-title to slide-image in the last line, since I hink that's what you need.

Answer 2

Jquery has no intuitive knowledge of files on the remote file system. You could, however, do something like this:
$(document).ready(function () {
for(var i = 1; i < 5; i++) {
$('body').append('<div id="slide-content-'+i+'"></div>');
$('#slide-title-'+i).load('slides/slide'+i+'.html #title');
// ...and so on
}
});
This will do something akin to what you were trying to do with PHP. I don't know PHP very well but that could be a better way to go (depending on it's DOM processing abilities) since the above will create one request for each file.

Answer 3

Your jquery code seems to be correct. What is the output you are getting?
Here's a pointer to what you are trying to accomplish..
http://www.electrictoolbox.com/load-content-jquery-ajax-select-element/
Let me know whether this helps....