CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
kpaul
kpaul

Reputation: 479

Handling Confirmations of link by Custom Jquery Dialog in Rails

I needed a custom pop-up dialog in order to replace the default browser option for data-confirmation. There were a lot of example online for data-confirmation for method: delete, however I needed to make minor customization to make it work for normal links as well.

For example there are the 2 types of links I would render a dialog for:

<%= link_to(scoreboard_team_path(@scoreboard, team), remote: true, method: :delete, data: {confirm: "Are you sure you want to delete?"})%> 

<%= link_to "Clear Teams", deleteteams_scoreboard_path(@scoreboard), class: "btn btn-primary reset-link", :data => {:confirm => "Are you absolutely sure you want to delete all teams?"} %>

With the information I have researched online, I have come up with the following jquery code for app-wide confirmation for these types of links: 

$(document).ready(function(){

    $.rails.allowAction = function(link) {
          if (!link.attr('data-confirm')) {
            return true;
          }
          $.rails.showConfirmDialog(link);
          return false;
    };

    $.rails.confirmed = function(link) {
      link.removeAttr('data-confirm');
      if(link.hasClass("reset-link")){
         window.location.replace("" + link.context.href + "");
      } else {
          return link.trigger('click.rails');
      }
      };


     $.rails.showConfirmDialog = function(link) {
          var html;
          var message = link.data("confirm");
          html = "<div id=\"dialog-confirm\" title=\"Warning!\">\n  <p>"+message+"</p>\n</div>";
          return $(html).dialog({
            resizable: false,
            modal: true,
            buttons: {
              OK: function() {
                $.rails.confirmed(link);
                return $(this).dialog("close");
              },
              Cancel: function() {
                return $(this).dialog("close");
              }
            }
          });
      };
});

My problem is that the authors of the articles don't explain well about what is happening.

So therefore my questions are:

What does the following code mean: 

if (!link.attr('data-confirm')) {
            return true;
          }

In the line window.location.replace("" + link.context.href + ""); what does link.context.href mean?

Upvotes: 0

Views: 518

Answers (1)

Uzbekjon
Uzbekjon

Reputation: 11813

if (!link.attr('data-confirm')) {
  return true;
}

Basically, it checks data-confirm attribute value of a passed in (jQuery) DOM element and if it is not present the function will return true.

In the line window.location.replace("" + link.context.href + ""); what does link.context.href mean?

$().context is deprecated and should not be used. That said, it returns the original context of jQuery selector.

An example should give you an idea:

$('.link'                  ).context;  // Return `document` object
$('.link', $('#wrapper')[0]).context;  // Return `#wrapper` object
<div id="wrapper">
  <a href="#some-link" class="link">Click me</a>
</div>

In your case, it seems like link.context.href is getting a DOM element and accessing its href attribute. It could have done something like this link.attr('href') instead. But, I guess there was some edge case if the author has decided to write it that way.

Upvotes: 1

Related Questions