Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Web content update/refresh with jquery and/or ajax

Posted on 2014-02-25
20
Medium Priority
?
918 Views
Last Modified: 2014-03-19
Hi,

I'm trying to figure out a way to refresh content between <div> tags based on a <a href> link press. I have a one page parallax site and have no way of 'refreshing' the page so need to figure out a way to just update/refresh an area.

What I have is three button (via css, not an input button, so something like <span class="button-pricing-nav" style="background-color: #fff;"><a href="js code??>Web Design</a></span>)

<div>
content
</div>

Any help would be appreciated.

Thanks
Karessa
0
Comment
Question by:Karessa
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 10
20 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39887059
The simple way is to use jQuery .load() function

e.g.
$(".button-pricing-nav").click(function(){
$( "#div-id" ).load( "newcontent.html" );
})
0
 

Author Comment

by:Karessa
ID: 39887397
Thanks cathal, can you talk this out a bit more. I store the content I use to refresh the div in newcontent.html? how do I tag it?

I'm not a programmer so a little hand holding would be appreciated.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39887419
What do you mean tag it?

Say you have this in newcontent.html
My Web Design
Just a plain html file - nothing else.

In your main page you would have something like this.
<span class="button-pricing-nav" style="background-color: #fff;">
<a href="#" id="web-design">Web Design</a>
</span>
<div id="mycontent">
</div>

Open in new window


ID in the anchor tag is what we will use to attach a jquery click even to.
ID in the div element is what we will use to target in the jquery

Then you jquery would be this.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script>
$(function() {
	$("#web-design").click(function(e){
		e.preventDefault() // Cancel the link default action
		$( "#mycontent" ).load( "newcontent.html" );
	})
})
</script>

Open in new window


Attached is a sample for you to try
sample.zip
0
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 

Author Comment

by:Karessa
ID: 39889497
Thanks again Cathal. I follow what you're doing and see how it works. One more question. Now what if I have three links, how do I have it pull only the data I need for that click from newcontent.html?

So I have three maybe four options (Web, Branding, Graphic, IT). all the data for each update/refresh in newcontent.html

by tag it I just meant ID which you showed. I'm assuming I need id's in newcontent.html or  use php to pull on the content I need?

Thanks for your help
0
 
LVL 58

Expert Comment

by:Gary
ID: 39889560
Just repeat the click code for each element changing the page to load
0
 
LVL 58

Expert Comment

by:Gary
ID: 39889578
Or if you want to be a bit fancier

<span class="button-pricing-nav" style="background-color: #fff;">
<a href="#" class="dynamic-url" data-url="webdesign.html">Web Design</a>
</span>
<span class="button-pricing-nav" style="background-color: #fff;">
<a href="#" class="dynamic-url" data-url="Branding.html">Branding</a>
</span>
<div id="mycontent">
</div>

<script>
$(function() {
      $(".dynamic-url").click(function(e){
            e.preventDefault() // Cancel the link default action
            $( "#mycontent" ).load( $(this).data("url") );
      })
})
</script>
0
 

Author Comment

by:Karessa
ID: 39891002
this is slick, works really well thanks!

few little nuances i'm now trying to figure out.

1. how do I get the first link/button to be the default option, selected/clicked on page load?
2. how can I set the links/buttons to be active when selected?
3. the content being loaded, between the div tags contains shortcodes, what's the best way to load it. I tried <?php echo do_shortcode('[one_third]'); ?> in a php file, no go.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39891982
$(function() {
      $(".dynamic-url:first").click();
      $(".dynamic-url").click(function(e){
            e.preventDefault() // Cancel the link default action
            $( "#mycontent" ).load( $(this).data("url") );
      })
})

Open in new window


You cannot set a link to be active, you can add a class of active to it.
      $(".dynamic-url").click(function(e){
            $(this).addClass("active")
            ...

Open in new window


Shortcodes? Wordpress?
0
 

Author Comment

by:Karessa
ID: 39892140
yes wordpress, will try the other two examples here shorting, thanks for the quick update
0
 

Author Comment

by:Karessa
ID: 39893868
Cathal,  I wasn't able to make anything work, the code didn't do anything or I used it wrong. i've attached the page code as is it now.  I've also attached some screenshots for the list of items i'm trying to solve.

1. you'll see in image pricing 1 that when the page loads no link is 'active' or the content is not displayed until click. they customer wants the design selected or showing content.
2. then they also want the link showing active, so the white link in the image pricing 2
3. tables work but the code was already done for shortcodes, so if it's possible to load content from a file that has shortcodes in it?

Thanks

<span class="button-pricing-nav"><a href="#" class="dynamic-url" data-url="/wp/wp-content/themes/scrn-child/pricing_test/webdesign.html">Design</a></span><span class="button-pricing-nav"><a href="#" class="dynamic-url" data-url="/wp/wp-content/themes/scrn-child/pricing_test/socialmedia1.html">Branding</a></span><span class="button-pricing-nav"><a href="#" class="dynamic-url" data-url="/wp/wp-content/themes/scrn-child/pricing_test/graphicdesign1.html">Graphics</a></span>

<div id="load_content" style="padding-left:7px;">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script>
$(function() {
      $(".dynamic-url:first").click();
      $(".dynamic-url").click(function(e){
            e.preventDefault() // Cancel the link default action
            $( "#load_content" ).load( $(this).data("url") );
      })
})
</script>
</div> 

Open in new window

pricing-1.png
pricing-2.png
0
 

Author Comment

by:Karessa
ID: 39904494
Cathal, did you have any other ideas for this?

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39904534
Do you have a live link? Or you can you put up a test page.
0
 

Author Comment

by:Karessa
ID: 39906453
yes, the site is live now but here is a test page with it on it. the formatting is off but it's not suppose to be on this page with that background.

http://www.yourmodive.com/ptest/

thanks
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39906543
You are calling flexslider on an element that doesn't exist - this can break any other jquery.
Remove/uncomment it out and let me know when done since the code seems to be working fine.
0
 

Author Comment

by:Karessa
ID: 39916370
Cathal, Well the flexslider is being used so I can't disable it. It's not necessarily being used on this test page but on the main site it is and that is where this content will eventually live. So it needs to work in conjunction with it.

I'm sure this is possible to achieve using this method, I'm just not having success with it. I'm going to award points for all your help, I appreciate it very much. if you think there is something else to try I'm open to it, I'm just not a programmer and this is to the point of frustration.

regards,
0
 
LVL 58

Expert Comment

by:Gary
ID: 39916392
You have two copies of jquery being included, one in the head and one in the body
Remove the one in the body.  It's located just before the dynamic URL code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br />
<script>
$(function() {
      $(".dynamic-url:first").click();
      $(".dynamic-url").click(function(e){
            e.preventDefault() // Cancel the link default action
            $( "#load_content" ).load( $(this).data("url") );
      })
})
</script>

Open in new window

0
 

Author Comment

by:Karessa
ID: 39919688
I removed it, now nothing loads. button click yields no content?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39920726
Remove it and change the function

jQuery(function() {
      
jQuery(".dynamic-url:first").click();
      
jQuery(".dynamic-url").click(function(e){
            e.preventDefault() // Cancel the link default action
            
jQuery( "#load_content" ).load( 
jQuery(this).data("url") );
      })
})

Open in new window

0
 

Author Comment

by:Karessa
ID: 39940647
Tried this code, still no page loads. i've attached the exact content on that page

thanks for the help

<span class="button-pricing-nav"><a href="#" class="dynamic-url" data-url="/wp/wp-content/themes/scrn-child/pricing_test/webdesign.html">Design</a></span><span class="button-pricing-nav"><a href="#" class="dynamic-url" data-url="/wp/wp-content/themes/scrn-child/pricing_test/socialmedia.html">Branding</a></span><span class="button-pricing-nav"><a href="#" class="dynamic-url" data-url="/wp/wp-content/themes/scrn-child/pricing_test/graphicdesign.html">Graphics</a></span>

<div id="load_content" style="padding-left:7px;">
<script>
jQuery(function() {
      
jQuery(".dynamic-url:first").click();
      
jQuery(".dynamic-url").click(function(e){
            e.preventDefault() // Cancel the link default action
            
jQuery( "#load_content" ).load( 
jQuery(this).data("url") );
      })
})                                      
</script>
</div>   

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39940795
Don't know what you are trying to do here

<script>
jQuery(function() {</p>
<p>jQuery(".dynamic-url:first").click();</p>
<p>jQuery(".dynamic-url").click(function(e){
            e.preventDefault() // Cancel the link default action</p>
<p>jQuery( "#load_content" ).load( 
jQuery(this).data("url") );
      })
})                                      
</script>

Open in new window


The code should be
<script>
jQuery(function($) {
	$(".dynamic-url:first").click();

	$(".dynamic-url").click(function(e){
		e.preventDefault()
		$( "#load_content" ).load($(this).data("url"));
	})                                      
})
</script>

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question