I have a rails4 app. I'd like to trigger some js events on page load, but only if user comes from a given page.
By default all the comment replies are hidden on the post#index page. If user clicks on a div then the corresponding replies become visible.
Now I want to have a given post_comment_reply div visible by default on page load, if a user comes to the page via clicking on the notification belonging to the post_comment_reply.
What is the preferred way in rails to do that?
js
$(document).on('click', '.open-post-comment-reply', function (event) {
var post_comment_id = $(this).data('pcid');
$('#post-comment-replies-' + post_comment_id).toggle();
});
Setting a cookie would work, as suggested by another user. You could also check the request.referrer in rails to see where they came from.
Couple of ways to handle triggering the js from there. You could pass the referrer value to the js with something like:
<div class="some-class" data-referrer="<%= request.referrer %>">
Then in your js, if you're using jQuery:
if ($('.some-class').data('referrer') == 'whatever_url'){
// run your code
}
You could also put a conditional directly in the view. Probably not as clean but something like:
<% if request.referrer == 'whatever_url' %>
<script>
// code to run
</script>
<% end %>
you can attach a cookie on the given page , in link onclick event, then delete it after showing the comments box.
Related
Some content is displayed by ajax to be rendered in a div as a lightbox that is closed when user clicks outside (this content is deleted at this point):
Every time user clicks on the target div, some content goes to this controller:
controller:
def ajax_load
// some code
end
And finally this js function is called from controller:
ajax_load.js.erb
<% if #variable %> // embedded variable
$(target_div).html("<%= j render 'path' %>");
$('.some_div').on('click', '#target_element', function(e) {
e.preventDefault();
$("input#element_0").mask("00/00"); // works only once
$("#element_1").prop('checked','checked'); // works
$("#element_2").show(); // works
});
<% end %>
Inside this lightbox I have some inputs and this jquery mask function is called and it indeed works when I open this element once on the page, but if a close the lightbox and call it again it doesn't anymore, and the other lines of this click function keep working, like "jumping" the mask function.
If I try to make this mask to work directly from browser console after it had stop to work it don't change.
Obs: I also made some tests on the browser console:
After that lines of code above had already being loaded from the js file, the only way to get this to work on the browser console is changing a little from the jquery path:
$(".previous_div input#element_0").mask("00/00");
and to make it work again we need to change a little more:
$("body .previous_div input#element_0").mask("00/00");
I solved this problem in a way that I think is not the most recommendable.
Because of the behavior being like that I have duplicated id (and inspecting the source code it doesn't has it), I changed the id of the element and mask it again, and after that, works to me. Now I can close this lightbox and open again many times and have the input with the mask right there.
$("input#element_0").mask("00/00");
$("input#element_0").attr("id","element_0_masked");
$("input#element_0").mask("00/00");
I have the same problem, but from retrivied ajax added this script and it's worked for me
<script>
$('input[name="txt-tel"]').mask('(000)-000-0000');
$('input[name="txt-dni"]').mask('#');
</script>
You could use the unmask() function before mask(), like this:
$("input#element_0").unmask();
$("input#element_0").mask("00/00");
It works for me.
I make a premise: I'm working on a school project and the technologies that I can use are: python, flask, bootstrap, JavaScript and JQuery.
I have a button (that I will call to "Update Product") that "onclick" must enable one of these buttons:
https://www.w3schools.com/howto/howto_css_loading_buttons.asp, the "Update Product" button must be hidden and must call a function in python (example: updateProducts ()).
At the end of this function (the function returns ok or ko), I return the message (using flash), but I do not know how to hide the Loading button and show the "Update Product" button again.
Can you help me?
Here is one way.
When you render the template in python you could pass a variable to control the visibility of the button.
render_template('page.html', visible=True)
Then, on your page perhaps something like this (found at Hiding a button in Javascript and adapted)
<script>
var hidden = {{ visible|safe }};
function action() {
if(hidden) {
document.getElementById('button').style.visibility = 'hidden';
} else {
document.getElementById('button').style.visibility = 'visible';
}
}
You can also change the variable with an onclick function on then page itself.
Your button to call a python function could look something like this.
<input type="button" id="toggler" value="Toggler" onClick="/funcionName" />
Remember to use the #app.route("/functionName") before the python function.
Hope this is close to what you wanted.
Here are the steps to achieve this.
Add loading button with hidden class.
When you click update Product button, following things should happen.
$(".update_button").on("click", function(e){
$(".loading_button").show(); // show loading button
$(".update_button").hide(); // hide update button
$.ajax({}) // send ajax request to update product, on success, hide loader and show update button
});
I want to load whole page into my browser using ajax. I want it to look like general page navigation (like when user clicks some link).
I have a select tag, and want to navigate to appropriate page when select is selected.
I guess I have to do it with ajax,
I am trying like that:
courseSelect.on('change', function(){
var courseId = this.value;
// start search of the course by courseId
$(document).load('/courses/'+courseId+'');
});
I get my html response, but nothing happens.
Use body instead of document:
$("body").load('/courses/'+courseId);
Also I would advice you to use a container instead of loading it fully on the document.
Something like this would what I would suggest you:
$("#content").html('<img src="loading.gif" />').load('/courses/'+courseId);
I am working with Spring Controller and JSP project. I have a jsp page in which I have one button which is Process and once I click that button, it shows me two radio button just below it and a Submit button as well.
And after clicking Submit button, if everything went fine, then I show - as this data will come from controller -
Success= true
Error= none
But as you can see in my jsfiddle. When my form gets loaded after I hit the jsp url it comes like this on the browser -
Process
Success=
Error=
Meaning, it has Process button at the top and just below Success and Error label with no values in it as we haven't passed any values yet from the controller. But it looks pretty weird for the users.
So what I am trying to do is, once my page gets loaded or I click Process button - I don't want to show Success and Error labels at all. It should be shown only after the submit button is clicked with its appropriate value in Success and Error depending on what is passed from the controller.
Is this possible to do in jquery? If I am right, basically I want to hide it until submit button is clicked...
Or is there any better design to show the Success and Error label with what I am trying to do?
It seems to me that you wouldn't need JavaScript to do this since as far as I can tell the form submission goes to the backend. In JSP itself you could just do a check like:
<% if (success.length > 0 || error.length > 0) { %>
<!-- success / error labels go here -->
<% } %>
If you actually wanted to do this via JavaScript, you could use something like:
if (!$("#success-value").text().length && !$("#error-value").text().length) {
// hide the labels
}
http://jsfiddle.net/4Nmqk/25/
have a look on my fiddle if it meet your idea.
jsfiddle.net/4Nmqk/26
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/