Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Change Multiple Div Content Load() Ajax Jquery?

    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

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    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.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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>
    Last edited by DanInMa; 07-06-2011 at 02:01 AM.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •