Strange behaviour of handlers in rails application - ruby-on-rails

I have a rails application with a resoruce items. I have noticed that if I add some handlers, they are removed when the page changes.
<%=link_to "Add fund","#",:class=>"addfund btn btn-primary"%>
<form class="addfundform hide"action="<%=addFund_item_path :id=>item.id %>">
<input type="text" name="fund">
<input type="submit" value="Add" class="btn">
<a href="#" class="cancelfund btn btn-warning" >Cancel</a>
</form>
addfundform is hidden by default and when you click on addfund, the addfundform form is displayed.
$(document).ready(function(){
function showfundform(){
console.log("Hello")
var $item=$(this);
$item.next("form").show();
return false;
}
$(".addfund").click(showfundform)
})
So when I click on addfund button, the form is displayed. It however disappears when i click the cancel button. (this is funny because i haven't added anything to it yet) After this, the addfund button doesn't do anything. As if the handlers had been removed.
Also if I don't go to the items page. I go the new Item page, and then to the item page, the handler isn't loaded etiher
This rather wierd since I am not fetching anything via ajax. This is a rails4 app. I saw an error saying something about turbolinks, although I don't know any more

Rails 4 comes with a feature of Turbolinks and it seems to be causing trouble. Follow these steps:-
Remove the //= require turbolinks from your app/assets/javascripts/application.js.
Remove the two "data-turbolinks-track" => true hash key/value pairs from your app/views/layouts/application.html.erb.
and you should be good to go.

Related

Capybara/Poltergeist, clicking on Hidden Checkbox?

I have some HTML for a Checkbox im trying to click:
<td class="surface center">
<div class="checkbox-inline checkbox-inline--empty">
<input type="hidden" value="0" name="stuff_check">
<input id="stuff_1" class="boolean optional" type="checkbox" name="stuff_1_checked" value="1" data-item="5">
<label class="optional" for="stuff_1">Checked</label>
</div>
</td>
When running a page.find_by_id('id').trigger('click') it does indeed work, just using click however it complains about Poltergeist possibly clicking another elements:
Capybara::Poltergeist::MouseEventFailed:
Firing a click at co-ordinates [-9468.5, 6] failed. Poltergeist detected another element with CSS selector '' at this position. It may
be overlapping the element you are trying to interact with. If you
don't care about overlapping elements, try using
node.trigger('click').
However I felt maybe this is because of it being set as "hidden", so I tried doing page.find_by_id('ID', :visible => false).click however it gave the same issue.
Any suggestions? Since I know using trigger.('click') isn't advised.
There is no way to do a proper click on a hidden element because there would be no way for a user to click on an element that doesn't appear on the screen.
Your example is confusing because the hidden element doesn't have the same name attribute as the checkbox element which is what I would normally expect in this kind of setup. Assuming that what you're really trying to do is check the "stuff_1" checkbox (and that is hidden via CSS) then you should be doing what a user of your app would have to do - click on the label.
page.find('label[for="stuff1"]').click
Try
within('.checkbox-inline checkbox-inline--empty') do
check('#stuff_1')
end
I really recommend using Pry to do this though as you'll save yourself a ton of pain finding which elements are where.

Rails error with angular js

I am trying to create a button and on that button I have created a popup with angularjs. When I am using normal html tag it is opening the popup properly .But When I am converting in rails tag the popup gets dissapear within 1 sec and automatically the pages gets redirected to some other page .I have never use angularJs..Any solution will be helpful
<button type="button" class="btn btn-primary btn-lg" ng-click="deviceregisteration($event)">Add New Device</button>
So my this rails code is creating problem as I have mention above
<%= f.submit 'Add New Device',:class =>'btn btn-primary btn-lg' ,'ng-click'=>"deviceregisteration($event)" %>
The reason that your button made the popup disappeared is that it submitted the form.
Your plain HTML way, that button is simply a button, nothing more, so when you hit that button, it triggered the event.
When you used rails code, that button is a submit button, when you click on, it triggered the event and also submit the form and redirect to another page due to the response.
To fix this, you can just use f.button instead of f.submit.

Jquery Mobile Javascript not working on ajax load

Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:
<a id="searchIcon" href="/"></a>
<div id="searchWrapOuter" style="display:none;">
<div id="searchWrapInner">
<div id="formContainer">
<form id="searchForm" action="#">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>
</form>
</div>
</div>
</div>
Width the following javascipt/jquery:
$(function() {
$(document).on("click", "#searchIcon", function () {
var searchWrapper = $("#searchWrapOuter");
$(searchWrapper).slideToggle();
return false;
});
});
This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.
I have read about using the
$(document).on('pageinit'), not $(document).ready()/$(function()
I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?
Thanks,
Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).
The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.
Also note this comment in the doc which might also be relevant to you:
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
You can manually adjust delay time to 500ms and 1s.
$(searchWrapper).delay(1000).slideToggle();
My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this

double display of jquery mobile submit buttons

I need help to rectify the following issue on some of my jQuery submit buttons. A single submit button displays two buttons with one on top of the other.
(source: nyumbanipap.com)
Any help will be appreciated.
html:
<input type="submit" name="confirmpayment" value="Confirm Payment" data-theme="a" />
It is a normal submit button on a form.
EDIT
I have noticed that this happens when returning from a non-ajax page. e.g. I am using PayPal and when I am redirected back from Paypal, this when the buttons are double displayed.
Any help will appreciated.
I just had the same problem. Turned out that I included the jquery mobile js file twice. Maybe that helps someone.
I was having the same issue within a rails app with jQuery mobile (in which I'm not always using AJAX either). Adding data-role="none" to the submit tag on the form worked for me.
<input type="submit" value="Next Question" class="ui-btn ui-state-disabled btn" data-role="none">
Go to bottom to read about that:
http://demos.jquerymobile.com/1.0/docs/forms/docs-forms.html
I know this is old but do not use the tags.
it should look like this
< p >< a href="#whatever you are naming your form or submit area" DATA-ROLE="button">Submit< /a>< /p>

rails infinite scroll ajax actions on page > 1 items

Let me first state that this is an instance of using a lot of other peoples' code and not completely understanding what's going on and how to fix my issue.
I followed the Railscast for infinite scroll using will_paginate, and have that working fine.
I load 12 items per page, each in it's own partial. Each item is an object that a user can 'like' by clicking a 'thumbs up' button.
I ajax-ified this button, and reload the partial for the item that is 'liked'.
This works fine on items 1-12 (the first page).
When a user clicks the thumbs up button on an item that is loaded via infinite scroll, the ajax call executes, but doesn't find the object again, and the partial simply goes blank.
Here's my code-
##messages partial
<div class="span3 well" style="height:360px;" id="message-<%=message.id%>">
<div class="thumbnail">
<%= image_tag message.gif.url %>
<div class="caption">
<h5><%=link_to message.sender, "/profile/#{User.find_by_username(message.sender).id}"%></h5>
<h5><%=message.chain.subject %></h5>
<p><em>"<%= message.content %>"</em></p>
<p><a href="/upvote/<%=message.id%>" data-remote="true" class="btn btn-success"><%=message.up_votes%>
<i class="icon-thumbs-up"></i> Nice Work</a>
</div>
</div>
</div>
# js.coffee (from railscast)
jQuery ->
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').text('Loading more gifs...')
$.getScript(url)
# vote.js -- js executed by ajax call
$("#message-<%=params[:id]%>").load(location.href+" #message-<%=params[:id]%>>*", "");
I'm pretty certain the problem is in the vote.js. the .load(location.href+" #message-<%=params[:id]%>>*", ""); seems to not be able to find the objects on the 2nd, 3rd, 4th, etc. pages because it uses location.href which, as the current url, only supplies the first 12 objects. I think I need to somehow put the page in that url, but I'm not sure how to accomplish that.
EDIT-
Alternatively, maybe I should have an endpoint for all messages that isn't paginated, and call that url instead of location.href + ?
This issue seems to have resolved itself.
It's funny it didn't seem to work locally, but is working on Heroku.
If anyone has an explanation for this I'd love to hear, but otherwise this is solved!

Resources