CODEWITHSUNDEEP
javascriptjqueryajax
Bob Diego
Bob Diego

Reputation: 575

incorporating a variable passed from link into jQuery modal later POSTed via ajax

I want to pass a variable from a set of links to a common jQuery modal, but am having trouble capturing the variable.

I have a set of links which all call the same modal (a jQuery plugin called Remodal by VodkaBears):

    <a href='#mailmodal' data-remodal-target='mailmodal' data-jobid='1'>Email job</a>
    <a href='#mailmodal' data-remodal-target='mailmodal' data-jobid='2'>Email job</a>
    <a href='#mailmodal' data-remodal-target='mailmodal' data-jobid='3'>Email job</a>

The modal contains a form (which is submitted via AJAX in a separate step). The markup for the modal/form looks like this:

    <div class="remodal" id='mailmodal' data-remodal-id="mailmodal" >
        <form id='mailmodal_form' action="" method="post">
        . . . 
        <input type="submit">
        </form>
    </div>

I want to pass the jobid variable into the form, but the form is already sent to the browser before the user clicks the link to actually open the modal.

This modal is triggered in a jQuery plugin I don't want to hack directly, so I don't have access to the click event block, or I could easily capture the attribute from the triggering link.

Remodal has documented its methods and events, but I'm having trouble figuring out how (and when) to grab the variable and pass it into the form. I think the most obvious method to get the variable from the link into the form is to capture the variable when the window open, and insert it into a hidden field in the form.

    <div class="remodal mailme-modal" id='mailmodal' data-remodal-id="mailmodal" >
        <form id='mailmodal_form' action="" method="post">
        <input type="hidden" name='link_jobid' id='link_jobid' value='placeholder'>

I think I would capture it directly from the link:

    $('a[href="#mailmodal"]').click(function() {
         var jid = JSON.parse($(this).attr("data-jobid"));
         $('#link_jobid').val( jid );
    });

but I'm not opening the modal this way, the remodal plugin in controlling this event.

I tried to capture the attribute like so:

    $(document).on('opening', '.remodal', function () {
        var jid = $(this).attr("id");
        alert( 'The jobid is ' + jid );
        $('#link_jobid').val( jid );
    }

But this grabs the id of the remodal window, not the calling link.

    "The job id is mailmodal"

Am I going about this wrong? How can I capture a variable from the calling link and get it into a modal form?

EDIT

I was able to get this working, thanks to Norlihazmey Ghazali below - the answer was very simple:

$("[data-remodal-target='mailmodal']").click(function(){
    var jid = $(this).data('jobid');
    // alert( 'The jobid is ' + jid );
    $('#link_jobid').val( jid );
});

Thanks all - love this site!

Upvotes: 3

Views: 399

Answers (1)

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Maybe you need to assign by using global variable, defined global variable and assign data-jobid value into that variable, at the end let the event catch it up when it triggered. Try following code( not sure working or not ):

<script>
  // declare global var
  var gJobId;
  // register click event for anchor
  $("[data-remodal-target='mailmodal']").click(function(){
    // assign into global var
    gJobId = $(this).data('jobid');
  });

  $(document).on('opening', '.remodal', function () {
    // let catch the global var
    var jid = gJobId;
    alert( 'The jobid is ' + jid );
    $('#link_jobid').val( jid );
  });
</script>

Upvotes: 2

Related Questions