Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    changing id within javascript var with onClick?

    Hi,

    I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.

    I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.

    Here is my Reload js
    Code:
    function Reload () {
    var f = document.getElementById('1-win');
    f.src = f.src;
    }
    As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.

    I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.

    For full code see:
    https://github.com/tmacka88/Service-Manager

    Sorry if this doesn't make any sense, I cant think of an easier way to explain it.

    Thanks

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    Sounds like what you want is to save the id of the active iframe to a variable so the Reload() function can update the appropriate one.

    Outside all other functions add:
    Code:
    var currentFrame = null;
    Inside each frame's click function add:
    Code:
    $('#1-btn').click(function() {
        currentFrame = '1-win';// '2-win' '3-win' etc.
        $('#1-win').show(true);
        $('#2-win').hide(true);
    	$('#3-win').hide(true);
    	$('#4-win').hide(true);
    	$('#5-win').hide(true);
    	$('#settings-win').hide(true);
    	$('#s-sab').addClass('active-nav');	
    	$('#s-sb').removeClass('active-nav');
    	$('#s-cp').removeClass('active-nav');
    	$('#s-hp').removeClass('active-nav');
    	$('#s-mc').removeClass('active-nav');	
    	$('#s-settings').removeClass('active-nav');	
      });
    New Reload() function:
    Code:
    function Reload () {
        if(!currentFrame) currentFrame = '1-win'; // default to first frame if none previously selected
    
        var f = document.getElementById(currentFrame);
        f.src = f.src;
    }

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,990
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by tmacka88 View Post
    I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to.
    Sounds like a good approach. You can cut out some of the repetition...

    Code:
    <style>
    iframe{display:none}
    #frm1{display:inline}
    </style>
    </head>
    <body>
    <iframe id="frm1" src="http://www.yahoo.com"></iframe>
    <iframe id="frm2" src="http://www.codingforums.com"></iframe>
    <iframe id="frm3" src="http://www.webdeveloper.com"></iframe>
    <button value="frm1">frame 1</button>
    <button value="frm2">frame 2</button>
    <button value="frm3">frame 3</button>
    			
    <script type="text/javascript">
    var butts = document.getElementsByTagName("button");
    for (a = 0; a < butts.length; a++) {
        butts[a].onclick = function () {
            reload(this.value)
        }
    }
    
    function reload(val) {
        var frms = document.getElementsByTagName("iframe"),
            i = 0,
    	len=frms.length;
        for (i; i < len; i++) {
            if (frms[i].id == val) {
                frms[i].style.display = "inline";
                frms[i].src = frms[i].src;
            } else {
                frms[i].style.display = "none";
            }
        }
    }
     
    </script>

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,990
    Thanks
    56
    Thanked 557 Times in 554 Posts
    or a little less loopy...

    Code:
    <script type="text/javascript">
    (function(){
    var clicked = document.getElementById("frm1");
    var butts = document.getElementsByTagName("button");
    for (a = 0; a < butts.length; a++) {
        butts[a].onclick = function () {
            reload(this.value)
        }
    }
    
    function reload(val) {
    clicked.style.display="none";
    clicked=document.getElementById(val);
    clicked.style.display="inline";
    clicked.src=clicked.src;
    }
    })(); 
    </script>

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by tmacka88 View Post
    I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
    You don't need JavaScript to do this. Use one iframe and write proper links to change it:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML Demo</title>
    	</head>
    	<body>
    		<nav>
    			<ul>
    				<li><a href="http://192.168.2.142:8080/" target="iframe">http://192.168.2.142:8080/</a></li>
    				<li><a href="http://192.168.2.143:8081/" target="iframe">http://192.168.2.143:8081/</a></li>
    				<li><a href="http://192.168.2.144:5050/" target="iframe">http://192.168.2.144:5050/</a></li>
    				<li><a href="http://192.168.2.11:8181/" target="iframe">http://192.168.2.11:8181/</a></li>
    			</ul>
    		</nav>
    		<iframe name="iframe" src="http://192.168.2.142:8080/"></iframe>
    	</body>
    </html>
    Also worth noting that your HTML document structure is invalid; ul elements cannot contain anything except li elements. Your ul elements contain div and a elements that should either be placed outside the ul element or inside the li elements.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •