CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajax
Mike Wiesenhart
Mike Wiesenhart

Reputation: 316

No refresh or page reload using JS

I have an Ajax request in my Rails 4 app, but once the button is clicked it reloads the entire page. How can I keep that from happening? The page is cached so I cannot simply add a link_to or button_to. Thanks in advance.

listing_collection.js

$(document).ready(function(){

$(".listcollect").on("click", function(){
      var listID = this.id;
        $.ajax({
          method: "GET",
          url: "/listing_collections/:id/listcollect",
          success: function(result) {
            var arrLen = result.length
            var $ul = $("<ul></ul>")
            for (var i = 0; i<arrLen; i++){
                var $li = $("<li></li>");
                var $a = $("<a></a>");
                $a.attr("href", "/listings/" + listID + "/add_to_collection?listing="+listID+"$amp;listing_collection_id="+result[i]["id"]+"&amp;listing_id="+listID)
                $a.text(result[i]["name"])
                $li.append($a)
                $(this).next().append($li)
            }
          }.bind(this)
        })
    });
});

This is the button:

<div class="btn-group listcollect-wrapper">
    <button class="listcollect button btn-blue-white btn-2x dropdown-toggle" data-toggle='dropdown' type="button" id=<%= listing.id %>>Add to Listing Collection <span class="caret"></span></button>
    <ul class='dropdown-menu'>

    </ul>
  </div>

Upvotes: 0

Views: 3742

Answers (3)

Massimiliano Carosi
Massimiliano Carosi

Reputation: 284

Try this:

$(document).ready(function(){

$(".listcollect").on("click", function(e){
      e.preventDefault();
      e.stopPropagation();

      var listID = this.id;
        $.ajax({
          method: "GET",
          url: "/listing_collections/:id/listcollect",
          success: function(result) {
            var arrLen = result.length
            var $ul = $("<ul></ul>")
            for (var i = 0; i<arrLen; i++){
                var $li = $("<li></li>");
                var $a = $("<a></a>");
                $a.attr("href", "/listings/" + listID + "/add_to_collection?listing="+listID+"$amp;listing_collection_id="+result[i]["id"]+"&amp;listing_id="+listID)
                $a.text(result[i]["name"])
                $li.append($a)
                $(this).next().append($li)
            }
          }.bind(this)
        })
    });
});

I have added e.preventDefault() that prevents the browser to handle the the click by default and e.stopPropagation() that disable the propagation of the click event to the containers of your control, in case they have listener too.

Upvotes: 0

curv
curv

Reputation: 3854

It's because this is the default behaviour of the anchor tag. As suggested you can either change the control type to something like button or override the default behaviour like so:

$(".listcollect").on("click", function(e){
    e.preventDefault();
});

Upvotes: 0

brk
brk

Reputation: 50346

My two cents The dom with this class .listcollect is a button of type submit i.e button type="submit"

You can either use button type = "button" or use 

event.preventDefault()

$(".listcollect").on("click", function(){
      event.preventDefault()
    // Rest of code

})

Upvotes: 2

Related Questions