javascriptjqueryruby-on-railsjqmodal

JQuery function preventing Rails remote call

I have a link on my page which makes an AJAX remote call to passcheck_path and the p tags around it provide the function of activating a JQuery modal box which covers the entire page.

<p class="right blackout">
  <%= link_to "blank screen", passcheck_path, :remote => true %>
</p>

The JS is as follows:

$().ready( function() {
    $('.blackoutwindow').jqm({
        modal: true,
        trigger: '.blackout',
        overlay: 100
    });
});

When I click the link, the modal appears, but the remote call doesn't happen at all. However when I remove the p tags, the remote call works perfectly (but obviously the modal doesn't trigger). I really have no idea why it's behaving like this but I assume the javascript is overriding something?

Your help would be greatly appreciated.

Solution

  • The jqModal plugin you use unbinds all the click handlers defined on your link, also the ones by rails.

    So either you switch plugins to another one or jqueryui modal dialogs because jqModal seems quite outdated, or you can implement a workround by calling remotely with the onShow callback of jqModal:

    $('.blackoutwindow').jqm({
    modal: true,
    onShow: function() {
        $.get($(this).attr('href')); // DIY Implementation of the remote call
    },
    trigger: '.blackout',
    overlay: 100
});

    Have a look at this fiddle to see the problem and the solution