Develop Reference

rails triggering js action on reload

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.

When I disable submit button (after form submit) the page does not load

I have an HTML form which submits to another page via POST. Nothing special about it, except that after the form validates I try to hide and/or disable the submit button so that it cannot be double-submit, while also telling the user the next page might take a while to load.
The relevant code is:
jQuery(document).ready(function () {
jQuery("form#form").submit(function() {
var result = validate();
jQuery(this).find('input[type=submit]').prop('disabled', true);
jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html()+
"<br/><br/><span style='margin: 25px; padding: 5px; background: yellow; "+
"width: 100%; font-weight: bold;'>Loading... this may take a few minutes! "+
"<i class='fa fa-spinner fa-spin' style='color: blue;'></i></span>");
return result;
});
});
function validate() {
return true; // Does stuff, then returns a simple true or false
}
By request, here is the (very simple) button wrapper HTML:
<div class="col-sm-12" id="submit-button-wrapper">
<input type="submit" value="One More Step" />
</div>
When the I remove the which changes the button wrapper's HTML, the form submits just as you'd expect. When I have that line in, however, it still calls the next page and executes that code, without the displayed page ever changing.
I have tested in both Chrome and Firefox, so I know it's not a browser issue, but this is really weird behavior. What am I doing wrong?
My goal: (1) validate the user's input, (2) give the user a clue that the page is going to take a while to load and (3) display the output from the action="complete.php" page once the PHP on it has run.

Maybe you can achieve this with $ajax and show results on the same page.
Send POST data to /some.php
After sending data, give feedback to user changing button behavior
When the task is complete, receive data and verify success or error and act accordingly. If OK, change button text to "complete!" or something else, and append response data to some div. If NOT OK, give feedback as well.
In code:
$("form#form").submit(function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: "some.php",
data: $(this).serialize(),
dataType : 'json',
timeout: 2000,
cache: false,
afterSend: function() {
/*change button behavior here*/
},
success: function(result) {
if (result === "ok"){
/*maybe append data to div and update button text to complete*/
} else {
/*if result not ok, send feedback*/
}
}
});
});
BTW: ajax documentation http://api.jquery.com/jquery.ajax/

When you return true (if validated) then the form is submitted. However, you're changing the DOM / submit button wrapper and essentially removing the submit button, right? Likely that is what is causing your problem. Leave the submit button wrapper alone. If you want to display a message display it as an overlay or hide the submit button wrapper and show the message wrapper in its place, don't remove the submit button altogether.

I know that you're just showing a slight jQuery and HTML portion of the script, but that isn't quite enough to figure out your problem. Since not all of it seems to be there because you mention action="complete.php" but I don't see that within your jQuery or HTML sample of code. So I have a few questions of my own.
Is the form small or large. If it's a small form then why aren't you displaying the output on the submit page? You could do that with what you currently have but a single PHP or ASP page could save you on amount of pages to make and what not. As a side note, depending on size of the form, you can do the validation on same page or continue to use action="" for it if large.
Do you have need for a database file or are you saving to one? If you do/are, you could write to the DB file, have the submit open the next page and view what was saved in the database on that new page. Again, you can probably use a single PHP or ASP page.
This last part sounds more valid for your purpose. You could use location.href="http://www.domain.com/home.html";
or use window.location("http://www.domain.com/home.html"); to redirect to the new page.
On another matter about some of the comments others made.
You don't exactly need the + unless you're dividing each of those out into their own separate lines when you could just use one line to do that. That's probably what confused Rajesh about the '. In fact I'm not sure why you yourself mentioned the + when referring to Rajesh comment about "concat string" and "append" ,because those two have nothing to do with the +. In fact to take a guess, he might have been referring to your jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html() which kinda looks like a concat string.
Speaking about append, not really needed unless for example you're doing something like giving the user the option to add rows to a form question.

Using Ajax.begin form in MVC application

I am working on MVC framework and posting my form by Ajax.BeginForm. No Doubt everything works very well but I have applied a ajax loader/Processing that starts work OnBegin and stops on this event OnComplete. So, when this function works after getting success from server:::
function MessageConfirmation(Json) {
if ($("#Id").val() > 0 && $("#Id").val() != '') {
}
else {
$("#Id").val(Json.Inserted_ID);
}
alert(Json.Message);
}
So, this message called after success but the problem arises when I am updating the page and clicking the submit again and again . So the Above function also works again and again and it brings a pop up alert that shows message. In that pop up if I click on "Prevent this page from creating addtional dialogs",
then it shows this error and no alert works
NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.alert] and ajax loader also keep on processing which is not user friendly at all and it shows if the record is not updated

If i get your question right you mean to say that after submit is clicked the success confirmation message is shown and then after subsequent click alert is generated and you want to prevent subsequent click.

Show loading image in asp.net page on submit

I need to show loading image in asp.net page on submit event. I searched for a lot of ideas here and there but did not found a perfect solution for me. Still, I was able to write one myself. Though, one such is here show loading image while the page is loading but I dont think it'll look for page validation.
JS that I call at page submit.
$(document).ready(function () {
$(this).submit(function () {
$("#overlay").fadeIn(30);// Call (Show) loading box by default.
if (Page_ClientValidate() != null) //Check if there is a validation on page.
{
if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
$("#overlay").hide();
}
}
});
});
Here is my loading div:
<div style="display: none" id="overlay">
<div id="modalprogress">
<div id="theprogress">
<img alt="Loading... Please wait" src="../App_Themes/Theme1/images/processing.gif">
</div>
</div>
</div>
This div remains hidden by default. As soon as a submit button is clicked, it calls for Page_ClientValidate() method that is used for validation of page. Works fine for me but has few issues.
A button with a different or no ValidationGroup will fire this Page_ClientValidate() of other ValidationGroup present on page, and then shows the error message in validation summary, though it submits the page, but:
It shows the validation summary that is irrelevant/ for a moment (until the requested page is returned).
In case a button with a ValidationGroup is pressed, and a validation error occurs, it would then suppress all the submits/javascript methods that follow.
Any way to call the same in DropDown or CheckBox methods AutoPostBack Events?
Note#: I am trying to avoid the update panel thing, and other ajax call ideas as of now. Just need some optimization in the above code.

You have to determine the selector.
As example, use certain class (showLoadingImg) for the button where loading image need to show, doing this you avoid rest of the button click.
$('.showLoadingImg').submit(function () {
$("#overlay").fadeIn(30);// Call (Show) loading box by default.
if (Page_ClientValidate() != null) //Check if there is a validation on page.
{
if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
$("#overlay").hide();
}
}
});

How do I add jQuery click event to Django admin save and continue button?

I am trying to add some elaborate javascript validation to a django admin form. When the user clicks any of the three types of save buttons (save, save and continue, or save and add another) my javascript will run. Part of what it does is make an ajax call to provide special checks before posting. When I capture the click event using jquery of the add and continue button, sometimes I stop the form being submitted and sometimes I allow it to be submitted. Sometimes, only warnings are thrown, rather than errors, and then the user can decide that the form should continue to be submitted.
When it is finally submitted in the end, it needs to be submitted using the process dictated by the button they clicked originally. I found that adding JS of form.submit(); only submitted according to the save button, taking the user back to the model list, even if the user originally clicked the save and continue button.
I changed my JS from form.submit(); to capture the button itself and to trigger a click of it that bypasses the validation if the user has chosen to disregard the warnings. But still it returns to the model list after saving, even if the clicked button was save and continue.
What is the Django admin doing client side to dictate a save and continue instead of a plain old save when the user pushes that button?
So here is the short, summarized version of my question...
How can I, using Javascript (including jQuery), force a Django admin form submission that will:
save and continue
save and add another
Thanks in advance for any assistance.

I figured this out. I had to create a hidden field with the name of the button that had been clicked and the value of the button that had been clicked and submit that field along with the form. Worked great!
EDIT (From 02/2020)
So I originally posted this Q&A years ago and haven't been working with Django for the last few months, but I see that someone wanted my code. Working from memory and a few pieces of code I still have around, it was something like this (which is untested)...
var frm = $('form');
var chosenBtn = frm.find('[name="_save"]');
var btns = frm.find('[name="_save"], [name="_addanother"], [name="_continue"]');
btns.unbind('click.btnAssign').bind('click.btnAssign', function(e)
{
chosenBtn = $(this);
});
frm.unbind('submit.saveStuff').bind('submit.saveStuff', function(e)
{
// Add your own validation here. If the validation fails, you can call:
// e.preventDefault();
// But if it works, no need for that line. If everything works...
frm.append(
[
'<input type="hidden" name="',
chosenBtn.attr('name'),
'" value="',
chosenBtn.attr('value'), // or maybe chosenBtn.text()
'" />'
].join(''));
});