Reputation: 886
I have a really simple Jquery function that mimicks the code in many online tutorials, an i have looked at a couple of similar stackoverflow questions, but i can't understand why nothing happens when i click the link to show/hide the div called 'advanced-search'. (I have also removed turbolinks but nothing happens too. I do have other Jquery codes present throughout the app and all work fine).
articles/index.html.erb
<div class="advanced-search">
Some code
</div>
<a class="show-advanced-search">Advanced Search</a>
articles.js
$(document).ready(function(){
$('.show-advanced-search').click(function(){
$('.advanced-search').toggle();
});
});
Narrowing selector down to 'a.show-advanced-search'
does not work either.
EDIT:
I have another Jquery file called "articles.coffee" below with an ajax callback, thought that it could be the one affecting the other jQuery code. However, i have tried deleting "articles.coffee" and the same issue remains.
Copying and pasting the code in articles.js into the browser console works. No errors in browser console.
articles.coffee
jQuery(document).on 'change', 'select.sortBy', () ->
$.ajax(
url: $(this).data('url') + '?type=' + this.value
type: 'GET'
contentType: 'script'
processData: false
)
return
my original application.js file
//= require rails-ujs
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require jquery.transit.js
//= require turbolinks
//= require articles.js
//= require_tree .
Upvotes: 1
Views: 125
Reputation: 886
I fixed it by combining the articles.coffee and articles.js files.
articles.coffee
jQuery(document).on 'click', 'a.show-advanced-search', () ->
$('.advanced-search').toggle()
Seems as though having 2 separate files and even specifying both in application.js do not work.
Upvotes: 0
Reputation: 3072
If you have included jquery.js
and articles.js
in order. Then next issue could be turbolinks
If you are using it.
$( document ).on('turbolinks:load', function() {
// Do your code
})
NOTE : on Rails >= 4 its there. Please check that.
Upvotes: 1
Reputation: 118
hi try this as articles.js
$(document).ready(function(){
$('.show-advanced-search').click(function(){
$('.advanced-search').toggle();
});
});
Upvotes: 0
Reputation: 116
If it's loaded at the same time the page loads, it shouldn't present any error. But if this is part of the code of a pop-up that appears after clicking on a button you should try this:
<pre>$(document).ready(function(){
// we assum the pop-up container loads at the same time the page is loaded
$('div.pop_up_container').on("click",".show-advanced-search",function(){
$(this).next('.advanced-search').toggle();
});
});</pre>
Upvotes: 0