Changing some html elements, and changing url without reloading page

Question

I have a site that has a long form. There are some other parts to the site that need to change without resetting that form. I was planning on using an iframe to load the other parts of the page. A sidebar on the page works as navigation. I would like the links in the sidebar to change the urls that the iframes point to, and change the actual url bar. But not reset/reload any of the other iframes.

Thanks

P.S: I am a complete newbie at JavaScript so full examples would help.

here is some of my code:

<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
  <li class=list>
    <a onclick="edit-iframe-1" id="username">This will change iframe 1 to point to a user</a>
    <a onclick="edit-iframe-2" id="username">This will change iframe 2 to point to a user</a>
  </li>
  <li class=list>
    <a onclick="edit-iframe-1" id="username">This will change iframe 1 to have a different user</a>
    <a onclick="edit-iframe-2" id="username">This will change iframe 2 to have a different user</a>
  </li>
</ul>
</div>
<div id=iframediv1>
  <iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
  <iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>

The idea is that the list in the sidebar has all the different usernames, and whichever username you click on, it will load the corresponding page. The only part of the url that needs to change is the part after ?user=

Could we see some of your code please? Maybe just the html and then which elements to change? Your question otherwise is too generic. — gideon, Jan 28 '13 at 04:09
I added the example into my main post thingy, thanks for the quick reply — zggz12, Jan 28 '13 at 04:29
You should look at using ajax. I'd just go with jQuery http://api.jquery.com/jQuery.ajax/ — matthewpavkov, Jan 28 '13 at 04:32
I know about ajax, but I would prefer making it simple (for me) and keep the two parts of the page in iframes. then it just has to refresh the iframes to change the content...the link text would be equivalent to the username if that helps along with the id of the would be what should be added as the username. — zggz12, Jan 28 '13 at 04:43
The two scripts (/path/file and /path/differentfile) could be in the same script. They do do very different things, but I can combine the two. I have absolutely no idea how to do much more than use the — zggz12, Jan 28 '13 at 04:49
If you want to convey information to the user thru the address bar you can use # links — Cris Stringfellow, Jan 28 '13 at 04:56
check this, this is how you can change the location of iframe dynamically http://stackoverflow.com/questions/3730159/changing-iframe-src-with-javascript — arjuncc, Jan 28 '13 at 04:56
@CrisStringfellow I like the idea of using the # links... 1 question, can I have two # links after the url? I need to have one # for each iframe — zggz12, Jan 28 '13 at 05:03
@zggz12 well what you can do is make all combinations of the two possibles, say if the links for iframe 1 are from (a,b,c) and for iframe 2 are from (1,2,3), then you could just make (a1,a2,a3,b1,b2,b3,c1,c2,c3) and a # link could be something like #c_2 -- so you still communicate about both. — Cris Stringfellow, Jan 28 '13 at 05:08

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

You might try playing around with history.pushState. Unfortunately browser support is going to be limited to newer versions.

This answer should give you an idea what you're up against: Modify the URL without reloading the page

edited May 23 '17 at 10:24

Community

1
1

answered Jan 28 '13 at 04:48

jthomas

858
6
19

I don't think that changing the url is that much of a problem after viewing that post, but my main question is changing the iframe locations on the click of the links. Thanks – zggz12 Jan 28 '13 at 04:53

score 0 · Answer 2 · answered Jan 28 '13 at 05:09

I think you should use javascript for your purpose. I think this could be a solution.

 <SCRIPT LANGUAGE="JavaScript">
    function newLocation1(nwloc){
        document.getElementById('iframe1').src = "/path/file?user="+nwloc;
    }
    function newLocation2(nwloc){
        document.getElementById('iframe2').src = "/path/differentfile?user="+nwloc;
    }
    </script>


    <div class="sidebar">
    <input type="text" placeholder="search for accounts" id="search" />
    <ul id=sidebar-list>
      <li class=list>
        <a onclick="javascript:newLocation1('username1')" >This will change iframe 1 to point to a user</a>
        <a onclick="javascript:newLocation2('username1')" >This will change iframe 2 to point to a user</a>
      </li>
      <li class=list>
        <a onclick="javascript:newLocation1('username2')" >This will change iframe 1 to have a different user</a>
        <a onclick="javascript:newLocation2('username2')" >This will change iframe 2 to have a different user</a>
      </li>
    </ul>
    </div>
    <div id=iframediv1>
      <iframe id="iframe1" src="/path/file?user=username1"></iframe>
    </div>
    <div id=iframediv2>
      <iframe id="iframe2" src="/path/differentfile?user=username1"></iframe>

</div>

this is just what I was thinking... I just had started to write essentially this exact script up. Just one question: My changing the url the idea was to have `/path/to/current/page.html?frame1=user-of-frame-one&frame2=user-of-frame-two` that is my goal, and is the only element missing from your script. — zggz12, Jan 28 '13 at 05:15

score 0 · Accepted Answer · answered Jan 28 '13 at 05:14

Here is a simple solution that uses jQuery to pull the href from the clicked link and insert it into the target iframe's src attribute.

<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id="sidebar-list">
  <li class="list">
    <a href="/path/file?user=mike" data-target="iframe1">Mike - Frame 1</a>
    <a href="/path/differentfile?user=mike" data-target="iframe2">Mike - Frame 2</a>
  </li>
  <li class=list>
    <a href="/path/file?user=joe" data-target="iframe1">Joe - Frame 1</a>
    <a href="/path/differentfile?user=joe" data-target="iframe2">Joe - Frame 2</a>
  </li>
</ul>
</div>
<div id=iframediv1>
  <iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
  <iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".sidebar a").click(function(event) {
            event.preventDefault();

            var targetID = $(this).attr("data-target");
            $("#" + targetID).attr("src", $(this).attr("href"));
        });
    });
</script>

That does exactly what I need, and i'm very surprised that you predicted the search feature...I have already started to install that Thanks! if you wanted to see what this is for, go to [link](http://www.zggz.co.nr) — zggz12, Jan 28 '13 at 05:32

Changing some html elements, and changing url without reloading page

3 Answers3