How to reload DIV <script> content without reloading HTML page?

Discussion in 'JavaScript' started by jskolnick, Mar 12, 2010.

  1. #1
    I'm trying unsuccessfully to reload <script> content in a DIV without reloading the HTML page that contains it. The script is for a commenting module provided at www.instacomment.com

    My site is set up such that there is one HTML page into which content is loaded from xml on each click of the site's navigation menu. Each time a navigation item is clicked, the DIVS on the HTML page are repopulated with the relative content for the current state of the site. What I'm trying to do is rewrite the following into the 'commentContainer' DIV each time the state of the site is updated:

    <div id='commentContainer'>
    <script>instac_button(8623, dynamicTagNameForThisCommentsBox);</script>
    </div>

    The var dynamicTagNameForThisCommentsBox represents the title of the currently loaded xml. Each time the instac_button function is called with a unique tag name (the second argument), a new instance is created. At least that's the way I think it works...

    I have been able to get this working using iFrames, but the problem with using iFrames is that each time a page is loaded through the iFrame, it adds to the browser history. And, since I'm using SWFAddress to manage URL creation for each state of the site, the iFrame creates the undesirable side effect of having to click the back/forward button 2 or 3 times to go back or forward.

    I'm happy to share a dev URL with the iFrame implementation if at all helpful.

    This problem has vexed me for days. Any help would be greatly appreciated.
     
    jskolnick, Mar 12, 2010 IP
  2. Imozeb

    Imozeb Peon

    Messages:
    666
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think you should try AJAX
     
    Imozeb, Mar 12, 2010 IP
  3. Vexix

    Vexix Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    When you use the link tag, <a>, the page reloads. Try using a form button. This way you can use the "onMouseUp()" listener or whichever you prefer and it should call javascript functions without reloading the entire page. you can use the form input "image" type to use a custom image if you'd like.

    
    <form>
         <input type="button" value="Load Javascript" onMouseUp="function1();function2()">
    </form>
    
    Code (markup):
    Good luck! :eek:
     
    Vexix, Mar 31, 2010 IP