Change Multiple Div Content Load() Ajax Jquery?

far2many · 07-04-2011, 09:47 PM

Hello,

I have sought help in the java forum but it was overly complicated and after searching the forums the closest thing i can find to my needs is posted in the css forum. I am sure that someone will be able to help me or guide me.

Quite simply from the main page (manin menu) i would like an anchor tag that when clicked on will load the div content from another page on the same hosting site into a div on the main page.

here is my simple example which if i could get working i could apply the skill to my webpage to get it working right.

http://www.bushcottages.co.uk/test.htm

I must point out that i am hopeless with javascript or ajax so a simple example would be mint!

Any help is greatly appreciated
Peter

DanInMa · 07-04-2011, 11:02 PM

Code:

$('#menu a').click(function(event) {
event.preventDefault();
var load_file =$(this).attr("href")

XXX.load(load_file+"?" + 1*new Date() );
});

sorry this is close if you add href targets to the links but I need to figure out how to associate them with the correct div to update. Ill bbl.

sunfighter · 07-05-2011, 05:51 PM

If your just going to do this with eight divs the solution is easy and can be done with javascript. If your talking a greater number than that Ajax is needed. If you definitely want jquery than DanInMa is your man.

DanInMa · 07-06-2011, 01:52 AM

sorry took me awhile. Ok, I made some minor changes to your html. I added example urls to some of the links in menu 1 and I wrapped the content divs in a wrapper, currently the wrapper element must have an id of "#multi_divs" but that can be changed easily enough. ( dont forget numbering start with Zero in JS)

this is pretty cool actually. here you go. also if the user has Javascript disabled they will at least be pointed to the corresponding href.

oh and you can add as many as you want, it just wont load the corresponding div if there is no valid url in the associated anchor link, or if you have say 5 links and only 4 divs, then obviously the 5th div wont be there to be updated.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

            "http://www.w3.org/TR/html4/loose.dtd">



<html>



<head>

<meta http-equiv="Content-Language" content="en-gb">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Mathematics Learning Zone</title>

<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">

	<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">

	<meta name="author" content="Peter Devlin">



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>



<style type="text/css">



#divone

{

float: left;

width: 200px;

height: 200px;

margin-left: 40px;

margin-right: 5px;

border: 2px solid #000066;

}



#divtwo

{

float: left;

width: 200px;

height: 200px;

margin-right: 5px;

border: 2px solid #000066;

}



#divthree

{

float: left;

width: 200px;

height: 200px;

margin-right: 5px;

border: 2px solid #000066;

}



#divfour

{

float: left;

width: 200px;

height: 200px;

border: 2px solid #000066;

}

</style>


<script type="text/javascript">
<!--
$(document).ready(function () {
    $('#menu a').each(function (intIndex) {
        // Bind the onclick event to simply alert the
        // iteration index value.
        $(this).bind("click", function (e) {
            e.preventDefault();
            var url = $(this).attr("href");
            $("#multi_divs div").eq(intIndex).load(url + "?" + 1 * new Date());
        });
    });
    $('#menu2 a').click(function (e) {
        e.preventDefault();
        $('#menu a').each(function (intIndex) {
            var url = $(this).attr("href");
            $("#multi_divs div").eq(intIndex).load(url + "?" + 1 * new Date());
        });
    });
});
//-->
</script> 
</head>



<body>



<div id="menu">

		<a href="/extra/mydivoverhere.htm">CHANGE DIV 1 CONT</a>

		<br>

		<a href="div1.htm">CHANGE DIV 2 CONT</a>

		<br>

		<a href="div2.htm">CHANGE DIV 3 CONT</a>

		<br>

		<a href="div3.htm">CHANGE DIV 4 CONT</a>

</div>



<div id="menu2">&nbsp;<p><a href="woops.htm">CHANGE ALL DIV CONTENT WITH THIS ONE CLICK</a></p>

	<p>&nbsp;</div>
<div id="testdiv"></div>
<!--added a span here to give content divs some kind of container-->
<span id="multi_divs">
<div id="divone"><p>Div 1 content just some dummy text just some dummy text just some dummy text just some dummy text </p></div>



<div id="divtwo"><p>Div 2 content just some dummy text just some dummy text just some dummy text just some dummy text </p></div>



<div id="divthree"><p>Div 3 content just some dummy text just some dummy text just some dummy text just some dummy text </p></div>



<div id="divfour"><p>Div 4 content just some dummy text just some dummy text just some dummy text just some dummy text </p></div>
</span>
</body>



</html>

DanInMa · 07-06-2011, 01:57 AM

fior the folks at home this is just the script itself.

Code:

<script type="text/javascript">
<!--
$(document).ready(function () {
    $('#menu a').each(function (intIndex) {
        // Bind the onclick event to simply alert the
        // iteration index value.
        $(this).bind("click", function (e) {
            e.preventDefault();
            var url = $(this).attr("href");
            $("#multi_divs div").eq(intIndex).load(url + "?" + 1 * new Date());
        });
    });
    $('#menu2 a').click(function (e) {
        e.preventDefault();
        $('#menu a').each(function (intIndex) {
            var url = $(this).attr("href");
            $("#multi_divs div").eq(intIndex).load(url + "?" + 1 * new Date());
        });
    });
});
//-->
</script>