Opening jsp pages in an iframe from a drop-down menu

Question

I'm creating an application in jsp & servlet. So I have created a home.jsp page it is a main page of an application and it contains a menu bar . When user clicks on menu item the following page should appear in my iframe and if user clicks on another menu item the selected page should appear in the same iframe. I need a help.... The following code is creating a menu bar and menu item

    <li><a href="#">Master</a>
        <ul>
            <li><a href="Customer.jsp">Customer</a></li>
            <li><a href="Suplier.jsp">Suplier</a></li>
            <li><a href="Item.jsp">Item</a></li>
        </ul>
    </li>
    <li><a href="#">Transaction</a>
        <ul>
            <li><a href="Purchase.jsp">Purchase</a></li>
            <li><a href="Sales.jsp">Sales</a></li>
        </ul>
    </li>
    <li><a href="Contact.jsp">Contact</a></li>

After menu bar I have a iframe in which I want to show a menu item. I don't know how do i do this. please help me out

You will need `jQuery` to do this easily. But you haven't added a tag in question of jQuery. Do you want a `jQuery` answer too? — Syed Ali Taqi, Sep 17 '14 at 19:29
I have posted below the answer. You can check it. n If it helped please mark it as answer. — Syed Ali Taqi, Sep 17 '14 at 19:41

Syed Ali Taqi · Accepted Answer · 2014-09-17T19:56:02.717

0

You will need to bind a function onclick of your <a> tag. Then using jQuery find the href of the <a> which is clicked, finally assign that href as src of your iframe

HTML

<li><a href="#">Master</a>
    <ul>
        <li><a href="Customer.jsp">Customer</a></li>
        <li><a href="Suplier.jsp">Suplier</a></li>
        <li><a href="Item.jsp">Item</a></li>
    </ul>
</li>
<li><a href="#">Transaction</a>
    <ul>
        <li><a href="Purchase.jsp">Purchase</a></li>
        <li><a href="Sales.jsp">Sales</a></li>
    </ul>
</li>
<li><a href="Contact.jsp">Contact</a></li>
<br />
<iframe src="" height="300" width="500"></iframe>

jQuery

$(document).ready(function () {
    $('a').click(function () {
        var target = $(this).attr('href');
        $('iframe').attr('src', target);
        return false;
    });
});

Here's a working DEMO. I just changed the href of first two items as example.

edited Sep 17 '14 at 19:56

answered Sep 17 '14 at 19:41

Syed Ali Taqi

4,898
3
34
44

I tried and its not working .. can you do this in java script – tariq786 Sep 17 '14 at 19:48
thanks bro ... i got it.. it is a right ans. can u help me what i should do to grow my knowledge. – tariq786 Sep 17 '14 at 20:03
thanks .. i got it . I'LL c u in skype.. thanks again – tariq786 Sep 17 '14 at 20:26
hie.. syed ali taqi .. ur ans is working but it is not apearing in url.. do u have any other example.. And just now i created my Skype id so can u provide me ur user id.. – tariq786 Sep 19 '14 at 11:58
its `salitaqi` and I think you'll not get the `URL` if you use the `iFrame` – Syed Ali Taqi Sep 19 '14 at 12:52
Its almost impossible to show `URL` in an `iFrame` or to to change to `URL` of current `Page` to `iFrame URL`. If you just want to get the `URL` and `alert or set it to a text field`. I think this will work `document.getElementById("iframe_id").contentWindow.location.href` – Syed Ali Taqi Sep 19 '14 at 13:01
See these question. [Q1](http://stackoverflow.com/questions/1860470/changing-parent-windows-url-from-iframe), [Q2](http://stackoverflow.com/a/136496/3621001). – Syed Ali Taqi Sep 19 '14 at 13:03
now i have to creata a javascript also.. to call my current iframe value into url – tariq786 Sep 19 '14 at 14:28
read [this](http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page). If this doesn't solve your problem please post it as **new question**. Long discusion shouldn't be done in comments at StackOverflow. If this doesn't solve your problem please post it as new question. – Syed Ali Taqi Sep 19 '14 at 15:18

Opening jsp pages in an iframe from a drop-down menu

1 Answers1