Using jquery, on link click i want navigate to another page and then run some code

Question

This is the link that is initally clicked.

<ul class="megamenu-list menuapp">
    <li class="title">Types</li>
    <li><a href="app/sop.html">Sales & Operations Planning</a></li>
</ul>

When this link is clicked, it must navigate to the app.html page.

Inside the app.html, i have a section with id= dynamic, within which i am trying to load the sop.html file.

<section id="dynamic">                          
</section>

This is the jquery code that i am trying to work with.

$(".menuapp a").click(function(e){
    var showthis = $(".menuapp a").attr("href")
    e.preventDefault();
    alert(showthis);
    var url = "app.html";
    $(location).attr('href',url);
    $("#dynamic").load(showthis));
});

This loads the sop.html page on the window and not inside the section id="dynamic" of the app.html page.

I don't get what is wrong. Please help.

so what's the relationship between `sop.html` and `app.html`..? on clicking the link in header.html what exactly should happen? — T J, Mar 09 '16 at 14:16
sop.html should be inside the

of app.html. On click of the link the app.html should be displayed and the sop.html should be visible inside the section of app.html. — Canute, Mar 09 '16 at 14:36

Sebastianb · Accepted Answer · 2016-03-10T12:18:41.140

1

Try removing the line $(location).attr('href',url);. This line would redirect the page to url, and that is why you see app.html loading in the browser instead of the div.

UPDATE:

After reading your comment, I think you should remove the line $("#dynamic").load(showthis)); And add it in app.html like this:

$(document).ready(function(){
    $("#dynamic").load("app/sop.html"));
})

Also, change the href of the link to "app.html"

This way, app.html will load on the browser when you click the link, and when the DOM is ready, it will load sop.html inside #dynamic

edited Mar 10 '16 at 12:18

answered Mar 09 '16 at 13:58

Sebastianb

2,020
22
31

Hi Sebastianb, removing this line loads the sop.html page on the browser but not inside the section of the app.html. – Canute Mar 09 '16 at 14:12
Let me see if I understood correctly now: What you want to do is click on the link, which would redirect you to app.html, and then you'd like to load sop.html in a div inside app.html? – Sebastianb Mar 09 '16 at 15:14
Glad it worked! btw, is there a reason for sop.html to load dynamically? you could just include its contents inside app.html, saving up one call to the server. – Sebastianb Mar 10 '16 at 16:37
I am loading different html pages on different link clicks in the same div. So when the user clicks another link, the app.html will load and another page called abc.html will load inside it. I am hoping this is the right way to do it. – Canute Mar 11 '16 at 13:40
I see. Another alternative would be to include a get parameter in each link (href='app.html?page=sop' or something like that), and using such parameter in app.html, in the load function. See http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript for how to get params from url. Good luck! – Sebastianb Mar 11 '16 at 14:20
Thanks for the hint.. Sebastian.Have a great day. – Canute Mar 11 '16 at 14:34

score 0 · Answer 2 · answered Mar 09 '16 at 13:35

0

change to $(this):

var showthis = $(this).attr("href")

and there is an extra ) closing:

$("#dynamic").load(showthis));
//--------------------------^--here

answered Mar 09 '16 at 13:35

Jai

74,255
12
74
103

Hi Jai, I tried this but it does not redirect to the link app.html – Canute Mar 09 '16 at 14:34

Using jquery, on link click i want navigate to another page and then run some code

2 Answers2