0

On my "info" page I use Jquery to dynamically load content.

I use this kind if link:

<a href="#" onClick="InfoSection('0303')">

To make the right div load:

$(".info-main").css({display: "none"}); 
$("#info-main-"+active).fadeIn(600);

This works fine

Now I would like to trigger a click on this link when I open the "info" page from another page in a new window / tab, so that the right content loads. How can I do that?

Many thanks for your help.

George
  • 36,413
  • 9
  • 66
  • 103
Ivor EyeGee
  • 1
  • What is the format of the URL you expect to go to for this functionality to be invoked? – George Nov 10 '14 at 16:13
  • possible duplicate of [Open a URL in a new tab using JavaScript](http://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-using-javascript) – Tanner Nov 10 '14 at 16:13

3 Answers3

0

You can try :

HTML :

<a id="test" href="#" onClick="InfoSection('0303')">

JS:

    $('#teste').trigger('click');

or 

    $(a).trigger('click');
enguerranws
  • 8,087
  • 8
  • 49
  • 97
vmontanheiro
  • 1,009
  • 9
  • 12
  • Thanks for replying. Well, this solution works if I am already on the target page (in my example the "info" page. But I would like to open the info page from another page with either href or window.open and have it simulate the click as it loads. – Ivor EyeGee Nov 10 '14 at 16:59
  • What are you using to load the another page? Ajax? – vmontanheiro Nov 10 '14 at 17:28
0

Please see this unoptimized (!) code and try it locally (save as test.html and info.html and open in browser as test.html and test.html#info and info.html and info.html#info to see effects):

JS part (include JQuery in head/body...)

$(window).load(function(){
function page_url_contains_info(){
    console.log(window.location.href.indexOf("info") > -1);
    return(window.location.href.indexOf("info") > -1);
}

function InfoSection(a){
     $(".info-main").css({display: "none"}); 
        $("#info-main-"+active).fadeIn(600);
        $("#info").fadeIn(600);
}


if(page_url_contains_info()){
    InfoSection(2);
}


$('#info-link').click(function(e){
    e.preventDefault();
    var hash_orig = document.location.hash;
    var hash = hash_orig.replace('#', '');
    console.log(hash);
    if(hash === "info" || page_url_contains_info){
       InfoSection(2);
    }
});

var active = "dummy";

$(window).bind('hashchange', function() {
    var hash_orig = window.location.hash;
    var hash = hash_orig.replace('#', '');
    if( hash === "info" || page_url_contains_info ){
       InfoSection(1);
    }
});
});//]]>

HTML part:

<a href="#info" id="info-link">Test</a>

<div class="info-main">".info-main"</div>

<div id="info-main-dummy">"info-main-dummy"</div>

<div id="info" style="display:none;">This is shown if url is in page url or is a hash or if we click on "#info"</div>

And here is Fiddle (not working due to limitations of JSfiddle - you must use code locally or on your server): http://jsfiddle.net/mm0yxqpt/

I think you will be able to see what different parts of JS do and decide which one you will use (and optimize to your needs :)

nettutvikler
  • 584
  • 7
  • 18
0

So I did what vcrzy and nettutvikler suggested.

On the origin page i just added an anchor to the href link.

On the target page I included a function that triggers the click and is activated based on the hash:

if (window.location.hash) {
    $('#deltf')[0].click();

(for some reason the 

$('#deltf').trigger('click');

doesn't work.

Many thanks guys!

Ivor EyeGee
  • 1