Loading an Iframe src with selection from horizontal drop down menu

Question

I am a new member to this site...have used it for a long time but never a member but i have not been able to find an answer so I thought I should ask.
I am new to working with jquery and html selectors so please forgive me if this is easy question but.. I am using HTML5, css, and jquery. I created a horizontal drop down menu that is three levels deep. I want to select html pages to load into an iframe based on the user's selection (each page represents a report). when I select an inner il selection, I get its id, but then it continues looping through the li and ul until it ends at the parent li.

==> this is the UL > IL > IL tree:

<li id="" onclick="processRequest(id)">
    <a href="#">link 4</a>
    <ul class="sub1">
        <li id="sublink41" onclick="processRequest('sublink41.html')">  <a href="#">-link 4.1</a></li>
        <li id="sublink42" onclick="processRequest(id)"> <a href="#">-link 4.2</a></li>
        <li id="sublink43">
            <a href="#">-link 4.3</a><span class="rarrow">&#9654</span>
            <ul class="sub2">
                <li id="sublink431" onclick="processRequest(id)"><a href="#">-- link 4.3.1</a></li>
                <li id="sublink432" onclick="processRequest(id)"> <a href="#">-- link 4.3.2</a></li>

==> this is the jQuery function:

function processRequest(value) {
   var selectedValue = value;
   console.log('selected values is: '+selectedValue);
   $('#frameIt').replaceWith('<iframe id="frameIt" src= "' + selectedValue + '">')
}

I want to use the ID to identify the correct html file to load into the iframe but here is what I see when I inspect this via chrome tools...

default.aspx:71 selected values is: sublink41.html
default.aspx:71 selected values is:

as you can see, it finds the correct value but then it continues to the parent LI and ends there... I have put in some time trying to find a solution to this but have not been able to...any help is appreciated.

no need to replace iFrame, can change iits src with `$('#frameIt').attr('src',selectedValue )` — charlietfl, Jan 25 '15 at 23:32
Thank you so much for your reply...i tried what you have suggested and it is still bubbling up to the parent IL. — RisingSon, Jan 26 '15 at 00:57

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

Try moving the onclick to the <a> tags, not the <li> tags. As your code is now, clicks bubble-up the DOM and may trigger processRequest() more than once, inadvertently replacing id with another value than the one you really intended.

The answer here may also be useful to you: https://stackoverflow.com/a/1369080/4475757

edited May 23 '17 at 12:20

Community

1
1

answered Jan 25 '15 at 23:31

David R.

684
6
12

Perfect!! i moved the onclick as you suggested, which did not help however, the stopPropagation is exactly what i was looking for. Works fine now.Thanks so much. I have marked this as the correct answer because you provided the link. – RisingSon Jan 26 '15 at 01:03
After further testing, i did have to move the onclick to the tag to make this work - so it was a combination of the move and the stopPropagation – RisingSon Jan 26 '15 at 01:15

score 0 · Answer 2 · answered Jan 25 '15 at 23:37

0

Remove the

onclick="processRequest(id)"

from the parent li tag on the first line.

answered Jan 25 '15 at 23:37

Alex Glover

759
5
15

This probably would have worked but my plans are that the user may select the report from a parent tag also...i.e. a report may have multiple web services feeding it and the children il's provide access to the individual webservice whereas the parent il will generate a report from all web services. thanks for your input. – RisingSon Jan 26 '15 at 01:08

Loading an Iframe src with selection from horizontal drop down menu

2 Answers2