How to programmatically make a link work?

Question

I have this Login/Signup link on which when user clicks,it pops up a login window.

Now when a user has to login he can simply login through this pop window.

This is the code for the login/signup link

<a id="modal_trigger" href="#modal" style="margin-top:6px; margin-right:14px">Login|Signup</a>

Given is the Jquery for the pop up window

  $("#modal_trigger").leanModal({top : 50, overlay : 0.6, closeButton: ".modal_close" });

$(function(){
    // Calling Login Form
    $("#login_form").click(function(){
        $(".social_login").hide();
        $(".user_login").show();
        return false;
    });

    // Calling Register Form
    $("#register_form").click(function(){
        $(".social_login").hide();
        $(".user_register").show();
        $(".header_title").text('Register');
        return false;
    });

    // Going back to Social Forms
    $(".back_btn").click(function(){
        $(".user_login").hide();
        $(".user_register").hide();
        $(".social_login").show();
        $(".header_title").text('Login');
        return false;
    });

})

Note : i have tried this document.getElementById('modal_trigger').click(); and possibly this might be a duplication of this question How do I programmatically click a link with javascript? but i don't seem to get my answer.

Question : Pop up window comes only comes up when user clicks the 'Login/Signup' hyperlink.How do i make this pop up to come programmingly ?

Update:

$( document ).ready(function() {
    $("#modal_trigger")[0].click();
});



$( document ).ready(function() {
    $(function() {
        $("#modal_trigger").leanModal({top: 50, overlay: 0.6, closeButton: ".modal_close"});

        $(function () {
            // Calling Login Form
            $("#login_form").click(function () {
                $(".social_login").hide();
                $(".user_login").show();
                return false;
            });

            // Calling Register Form
            $("#register_form").click(function () {
                $(".social_login").hide();
                $(".user_register").show();
                $(".header_title").text('Register');
                return false;
            });

            // Going back to Social Forms
            $(".back_btn").click(function () {
                $(".user_login").hide();
                $(".user_register").hide();
                $(".social_login").show();
                $(".header_title").text('Login');
                return false;
            });

        })
    });

});

Tried This one as well.Didn't work.

CODEPEN : http://codepen.io/monkeytempal/pen/VvKLMe Here is the working code in codepen.

You can trigger click on first link on load. `$("#linkID").click()` — Rajesh, Feb 02 '16 at 08:19
browser lets you know if some pop up has been blocked or not.I don't see any kind of message on chrome. — Tilak Raj, Feb 02 '16 at 08:27
looking on [github](https://github.com/FinelySliced/leanModal.js/blob/master/jquery.leanModal.js) there is no straight forward function. though you could use that to create your own. — BenG, Feb 02 '16 at 08:31

Jai · Answer 1 · 2016-02-02T09:08:03.047

3

You need to put it in the doc ready block:

$(function(){

    $("#modal_trigger").leanModal({top : 50, overlay : 0.6, closeButton: ".modal_close" });
    // other code
});

now if you want to trigger the modal, you can use this code in the doc ready block:

$("#modal_trigger")[0].click(); // == document.getElementById('modal_trigger').click();

You just need one doc ready block and first you have to register/bind the leanModal to the anchor then only you can trigger it:

$(function(){
    $("#modal_trigger").leanModal({top: 50, overlay: 0.6, closeButton: ".modal_close"});

   // now you should trigger
   $("#modal_trigger")[0].click();

   // other code put below

});

edited Feb 02 '16 at 09:08

answered Feb 02 '16 at 08:22

Jai

74,255
12
74
103

Updated my post with your code.Could you please give it a look :) – Tilak Raj Feb 02 '16 at 08:37
did this one as well.Nothing happens – Tilak Raj Feb 02 '16 at 09:15
A working code on codepen.I have updated that as well – Tilak Raj Feb 02 '16 at 09:22

Abrar Jahin · Answer 2 · 2016-02-02T11:14:51.193

1

You can try like this-

document.getElementById('login_form').click();

document.getElementById('register_form').click();

To trigger any event triggered by that button click with simple JavaScript.

Or by using jQuery like this-

$("#register_form").click();
$("#login_form").click();
$().find("anything_you_want").click();

Update-

For using with Bootstrap - add this events to your click events-

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

More Info-

$('#your_link_id').click()

From this excellent jquery docs for more information.

Please check it out.

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

It should work.

edited Feb 02 '16 at 11:14

answered Feb 02 '16 at 08:26

Abrar Jahin

13,970
24
112
161

this still doesn't open the pop up window.Tried these before even asking the question – Tilak Raj Feb 02 '16 at 08:26
Just a min, let me try – Abrar Jahin Feb 02 '16 at 08:29
1

I appreciate your effort but it doesn't.See at the href given above .The link it refers is _#modal_ .but even if you directly pass that link on the browser ,_Eg: localhost/#modal_ nothing pops up but as soon as you click the link it does. – Tilak Raj Feb 02 '16 at 08:44
can u please give me a https://jsfiddle.net/ link, please? Or http://codepen.io link? – Abrar Jahin Feb 02 '16 at 08:48
1

wait let me make it run there – Tilak Raj Feb 02 '16 at 09:00
Can u try this? $('#your_link_id').trigger('click'); – Abrar Jahin Feb 02 '16 at 11:15

Supun Praneeth · Accepted Answer · 2016-02-03T10:36:09.483

1

use this code:

   // Plugin options and our code
$("#modal_trigger").leanModal({
        top: 100,
        overlay: 0.6,
        closeButton: ".modal_close"
});

$(function() {
        // Calling Login Form
        $("#login_form").click(function() {
                $(".social_login").hide();
                $(".user_login").show();
                return false;
        });

        // Calling Register Form
        $("#register_form").click(function() {
                $(".social_login").hide();
                $(".user_register").show();
                $(".header_title").text('Register');
                return false;
        });

        // Going back to Social Forms
        $(".back_btn").click(function() {
                $(".user_login").hide();
                $(".user_register").hide();
                $(".social_login").show();
                $(".header_title").text('Login');
                return false;
        });
});


$( document).ready(function() {
    $("#modal_trigger")[0].click();
});

edited Feb 03 '16 at 10:36

answered Feb 02 '16 at 12:32

Supun Praneeth

3,087
2
30
33

and this is not working as well.I have given the whole code of the pop up in the post above.Try running this on codepen link .It won't work! – Tilak Raj Feb 02 '16 at 17:16
Thanks a lot. Could you please tell be how to open that pop up on login state.. Like right now it opens the pop up. How to open the login page on that pop directly.? – Tilak Raj Feb 03 '16 at 10:17
And post the right answer.. I will select that as the right one for other people also :) – Tilak Raj Feb 03 '16 at 10:26
done :) and i didn't get what you said, what do you mean by directly? – Supun Praneeth Feb 03 '16 at 10:37
As in pop up does come up but what i mean is when pop up comes up.. The item on the pop up are Facebook login and google login.. Is there any way that will show the login page on the pop up instead of the Facebook and Google login ? – Tilak Raj Feb 03 '16 at 10:40
:) goodluck and your modle plugin is so poor, i suggest this one is better: http://craftpip.github.io/jquery-confirm/ – Supun Praneeth Feb 03 '16 at 12:06

score 0 · Answer 4 · answered Feb 02 '16 at 08:23

0

Using simple jquery 

$("#YourLinkID").click();

answered Feb 02 '16 at 08:23

Aslam Patel

874
6
19

How to programmatically make a link work?

4 Answers4

Update-

More Info-