Solved

javascript call url without page refresh

Posted on 2008-10-02
7
3,457 Views
Last Modified: 2012-05-05
my rating system is set up so that when i click on one of the stars the page refreshes.  I would like the same links to be used, but for the page not to refresh.

is there any way to do this using the current code?

The current code uses html links that return the user to the current page.  instead of refreshing the page, i would like the link to be opened in  a div so that the music in the player on the page does not start from the beginning again.

the stars are supposed to rate the song, but rating the song causes the song to stop.  not ideal.

<ul class="star-rating">

<li style="width: 0%;" class="current-rating"/>

<li><a class="star1-rating" title="1" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=1"/></li>

<li><a class="star2-rating" title="2" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=2"/></li>

<li><a class="star3-rating" title="3" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=3"/></li>

<li><a class="star4-rating" title="4" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=4"/></li>

<li><a class="star5-rating" title="5" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=5"/></li>

</ul>

Open in new window

0
Comment
Question by:ussher
  • 3
  • 2
  • 2
7 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 250 total points
ID: 22630697
You should be using an IFRAME for this, that is its purpose, to put one page content into your main page, without any total page refresh.  What you are asking for automatically happens with an iframe --

<IFRAME name="content" width="600" height="450" src="content.html" frameborder="0" margintop="0" marginbottom= "0" marginheight="0" marginwidth="0" scrolling="NO"></IFRAME>

Your target will be links like this --

A href="star1.html" target="content"> first star </A>

When you click the link your relevant page is loaded into the iframe called "content"  (the target).
These kinds of links are perfectly SEO friendly-- there is no loss of SEO functionality by using iframes with links like given here -- and there is no page refresh.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22631698
You mean


A href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=1" target="content"> first star </A>
A href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=2" target="content"> second star </A>

or just put the complete rating html in the iframe.
0
 
LVL 1

Author Comment

by:ussher
ID: 22631743
Thanks for the suggestions.

Im trying to get it to work, but because an iframe loads content that is on another page, and the code that makes it go is generated by a function call its not so easy.

why, because to have the other iframe load another page, i first have to set up that page to have access to the function that created the code in the first place.

so, im trying.  its a good idea.  thanks.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 22631798
Actually no need for iframe

Try this and return a filled star in your php (remember to set header to image/gif)
<script>

function clickRate(idx) {

  for (var i=1;i<=5;i++) { // set the other images

    if (i!=idx) document.images['star'+i].src= 'star'+((idx >= i)?'_on':'_off'; 

  } 

  // call the script

  document.images[idx].src= 'hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num='+idx

  return false; // cancel link

}

</script>

 

<ul class="star-rating">

<li style="width: 0%;" class="current-rating"/>

<li><a class="star1-rating" title="1" onClick="return clickRate(1)" href="#"><img name="star1" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>

<li><a class="star2-rating" title="2" onClick="return clickRate(2)" href="#"><img name="star2" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>

<li><a class="star3-rating" title="3" onClick="return clickRate(3)" href="#"><img name="star3" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>

<li><a class="star4-rating" title="4" onClick="return clickRate(4)" href="#"><img name="star4" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>

<li><a class="star5-rating" title="5" onClick="return clickRate(5)" href="#"><img name="star5" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>

</ul>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22635891
"because an iframe loads content that is on another page, and the code that makes it go is generated by a function call its not so easy."

<A href="star1.html" target="iframe_name"> first star </A>

What could be easier than that?  It is the TARGET spec that sends the page into the iframe, it is SO easy.



0
 
LVL 1

Author Comment

by:ussher
ID: 22639554
The star rating system is generated by a smarty function.
The logic of behind the creation of the function is not mine and updates are received so i cant change the logic.
The page after the rating button is clicked contains music that starts automatically. (so opening it in an iframe could result in 2 songs playing, where the purpose is to smoothly continue listening.)

Thats the stuff that makes it difficult.

Thanks for your help, both solutions are correct answers to my question, even if my ability to implement them is a bit lacking.
0
 
LVL 1

Author Closing Comment

by:ussher
ID: 31502296
Thanks.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
grab and show facebook pages event calendars 6 46
angularjs controller not found 1 19
onOpen 14 43
React or Angular? 6 8
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now