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.

Answer 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();
});

Answer 2

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.

Answer 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

});

Answer 4

Using simple jquery 

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