Forums

nanook

Morning all,

I'm trying to incorporate jquery and ajax into my site to make the content as dynamic as possible. When a user clicks on the menu I have jquery/ajax updating the page content. I have images located in the div on the right that match the content, however when I put in the jquery the images stays the same when you go from Home to About Us. What is the best solution to accomplish updating both div's upon different menu selections? Thanks in advance! You can view this at http://dev.howsmykiddriving.org.

Thanks,

Tim

Robskiwarrior

hey :)

well currently you are only making the change while targeting the #content - now you need to do the same for the extra :) - but do it within the same click function, then it will trigger when you click... :)

nanook

Thanks Rob!! It work perfect! For anyone else that's learning jquery this is what I did. Thanks again Rob!

<script type="text/javascript">
$(function(){
$('li a').click(function(){
id=$(this).attr('id');
$("#content").load("pages.php?o="+id+"");
return false;
});
$('li a').click(function(){
id=$(this).attr('id');
$("#extra").load("images.php?o="+id+"");
return false;
});
});

Mr KiTT3N


<script type=\"text/javascript\">
$(function(){
    $('li a').click(function(){
        id=$(this).attr('id');
        $(\"#content\").load(\"pages.php?o=\"+id+\"\");
       return false;
    });
    $('li a').click(function(){
        id=$(this).attr('id');
        $(\"#extra\").load(\"images.php?o=\"+id+\"\");
        return false;
    });
});

why not just do both ajax calls at the same time rather than making javascript search and find the 'li a' twice and asigning the values (ect....)

like so


<script type=\"text/javascript\">
$(function(){
    $('li a').click(function(){
        id=$(this).attr('id');
        $(\"#content\").load(\"pages.php?o=\"+id+\"\");
        $(\"#extra\").load(\"images.php?o=\"+id+\"\");
       return false;
    });
});

outrightent

Ok, this really should not be that difficult but I am trying to use this code in order to display two (more once I figure this out) .txt files stored on my server. Someone please help me I think I might just shoot myself...every time I click either it just displays the filmone.txt. I know there has got to be something simple I am missing.

<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
<script type=\"text/javascript\">
$(function(){
    $('li a').click(function(){
        id=$(this).attr('id');
        $(\"#content\").load(\"filmone.txt?o=\"+id+\"\");
        $(\"#extra\").load(\"message.txt?o=\"+id+\"\");
       return false;
    });
});
</script>
<style type=\"text/css\">
</style>
</head>

<body>
<ul>
	<li><a href=\"\" id=\"one\">Film One I hope</a></li>
    <li><a href=\"\" id=\"two\">Message.txt I hope</a></li>
</ul>
<div id=\"content\">
</div>	
<div id=\"extra\">
</div>

THANKS!!!

Robskiwarrior

Hey no probs - glad I helped it click... Jquery is great :)

treehouse : what would you like to learn today?

Forums

jquery/ajax and multipl div's