I have a super standard errors box that pops up when there's an invalid submission, and the user can then close out of this box. So in other words....
HTML
<!-- Errors box -->
<div class="container alerts-container" id="order-errors" style="display:none;">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<p><strong>Sorry about that, the order didn't go through because of the following reasons:</strong></p>
</div>
<div class="col-xs-1 remove-col" >
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 labeler">
<ul>
<% if @order.errors.any? %>
<% @order.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
<% end %>
<% if flash[:danger].present? %>
<li><%= flash[:danger] %></li>
<% end %>
</ul>
</div>
</div>
</div>
Rendered:
<div class="container alerts-container" id="order-errors" style="display: block;">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<p><strong>Sorry about that, the order didn't go through because of the following reasons:</strong></p>
</div>
<div class="col-xs-1 remove-col">
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 labeler">
<ul><li>Rental end date has to be on or after rental start date</li></ul>
</div>
</div>
</div>
Jquery:
// Close errors box
$(document).on("click", "#order-errors .glyphicon-remove", function(e) {
$('#order-errors').slideUp()
})
On Safari/Chrome/Firefox on a MacBook, or on Chrome/Firefox on PC, and on Chrome/Firefox on Android it works fine. But on Safari/Chrome on any Apple mobile device it does NOT work. Any thoughts? Note that on a Safari emulator on MacBook it works fine as well.
To test the code:
1. Go to https://hidden-tundra-8656.herokuapp.com/orders
2. Hit the Cart button at top left
3. Order errors will pop up in orange
4. Try to "x" out of the order errors box, it will/ will not work per above
