Previous form data getting posted along with the current data - javascript

I am creating an application which has a slide in and slide out window. This slide in and slide out window has a form which the user needs to fill. On click of the 'Save' button the POST request is fired. Everything goes well till here. But the second time when the user tries to post, there are 2 POST requests sent over network, the first request has the older data and the 2nd request carries the new data. Third time, when the user fills the form, 3 POST requests are sent.
I am using backbone to create this application, I tried cleaning up the views before sending the data, but that didn't work, can someone suggest me where am I going wrong?

Check your events and make sure that you don't have a submit event and a click event.
Also, if you are rendering the view several times, you might end up with several events attached to one button.
It would be helpful if you had some code so we could actually see what is going on. As #fbynite noted, you might also check your event bindings.

Related

Handling multiple HTML submit button presses from form in WordPress

So I’m running a WordPress site and it has a form I have made using HTML with a text field, an email field, a password field, and a submit button.
The problem is that users can spam the submit button, and users are occasionally prone to do that as I’m using AJAX to handle the form submission which can take a while.
Any elegant solutions would be good. I have a few suggestions I think could work but I’m not sure how to implement them, if they will actually work, or if they’re even viable.
First possibility I’m thinking of — when WordPress loads a new page, it often has the swirly loading screen with a grey background. could I have the loading screen come on prematurely, as in at the point when I run any AJAX code, too, rather than just when it changes page?
Second possibility I’m thinking of — is there a way to block all of the form fields and the submit button from being pressed as soon as you click it so it cannot be spammed and fields cannot be changed? Could this work via JavaScript (sorry not the best with JS)?
Third possibility I’m thinking of — is there a way that the system only accepts one form from an IP in the space of 5-10 seconds and any other submissions of a POST request in that cooldown time are ignored?
Would any of the above solutions work or be viable enough to work? If so, how would or could they work? I’m thinking the second one is probably the easiest to implement? However, wouldn’t the first one confirm to the user that we’re processing their data so it’d be better for the UX?
Fourth possibility that considers UX and the solution I feel is more practical — is there a way to block the submit buttons and input fields from being pressed or edited once the submit button has been pressed once, and then have a swirly loading bar appear below or above it (maybe via CSS and HTML?) so users know the site is doing something or loading?
Something just to note — the change must be client side only and the change should not affect the user if they come back to the page in future, meaning it should not remain blocked if they refresh the page or come back to it later. I know it’s implied, but wanted just to specify that.
Since you're doing this as an AJAX request, i imagine you currently have some javascript tied to the onsubmit event. Most likely this function of yours encodes the data to JSON and then sends it to the server using ajax.
One way you could accomplish this, is:
Introduce a new variable in the global scope (so outside of the onsubmit-handler); like var submission_cache = ''; or the like.
Next, inside your onsubmit handler, between the stage where you have 'encoded the entire form to a single json string' and the stage where you 'actually send the data', you compare the json to the submission_cache variable. If it matches you ignore the submission, if it doesn't match then you store a copy of the json (or a sha1 checksum of it) in submission_cache, and then just continue with the ajax stuff.
This way:
Since it is a variable on the page, the cache has the same lifetime as the page. If they leave your site and return later, the variable will be empty again, and they can submit identical info as the last time.
Secondly, if they notice they made a typo 1ms after they submitted, they can resubmit (since the cache wont match), which i imagine is desirable.
Another solution that you could use in addition to the above is to simply enable the disabled attribute on the submit button (inside your onsubmit handler function. Re-enable it after a setTimeout or in one of your ajax onreceived/onerror closures.

Update part of page automatically when the data from an object changes without reloading the page

I have data being inserted into various divs collected from the backend.
This data gets updated, what i need is for the divs to also automatically update the data within the divs without actually refreshing the whole page.
Right now a page refresh would update the divs but I want the divs to auto update without affecting users experience.
Any suggestions.
As an example, I have a vote up/down button in the frontend, the vote gets sent to the backend then sent back through to the front and inserted into a div, however they wouldnt see their vote registered in the frontend unless they refreshed the page, So I would need the users vote result to be updated in the front end everytime then make a vote or change a vote ect automatically.
This is just one example, there is more data inserted in this table which could be updated at any time.
Update,
Not sure people understand fully what I need or trying to do.
Basically have and object coming through from back-end, on page load, data from that object is inserted into a table such as new posts, votes ect.
What I need to be able to do is check if the object has changed since the page load and if so to then update the data on the page without refreshing the page.
Ideally need this to happen instantaneously, so it recognises as soon as there is a difference between the object data and that being displayed in the browser and updates it.
Hope that makes it more clear as to what I want to do.
I have and object with information such as the suggestiontitle, description, votestatus, etc, these get inserted into a row, when a new. A new row gets added when a new object with main object comes through.
So I need to be able to check for changes in the main object so that I can then add the new objects as rows into the table and also Detect and update any changes with current objects already inserted.
If I understood correctly, all you want is a way to interact with the backend without refreshing the page, correct? If that's the case, you should look into AJAX. Here's a simple way to use it for the voting system example(requires jQuery):
$.post(url_to_interact_with,{key: 1232,vote:1}, function(data){
console.log(data);
}
In this case you sent a post request with key=1232 and a vote of 1. The variable in the function (data) is the output of the request.
However, if this isn't such a simple matter for you, I would recommend looking into websockets. To summarize what they are: A back and forth interaction between backend and front end. The back end can send info at any time without refreshing the page. If websockets are too confusing, then use this: https://pusher.com/
But honestly, you shouldn't try to go for the approach of knowing all info of div in real time unless absolutely necessary. Good luck! :)
What I Understood is that you need to update the div whenever Vote is updated? If I understood correctly then I would like to go with delegate and call a function to the server once you get a response from Vote stuff call.
If you want to get an event from the server-side then I would suggest you go for SignalR, for real-time communication, which will give you an event called the server-side.

asynchronous __doPostBack

Requirement
In User control ( In single update panel) - user will change some data and click on button or link button other than save button
We prompt Dialog box to user for (Yes/No/Cancel)
On cancel we did nothing and remain on same page
On No - we redirect/process further without saving data.
On Save we have to save changes and redirect/process further.
Here the problem is with Save
We have different panels on page (same on user control)
On Selection of Yes, Here we call "_doPostBack" for save button click event (Works fine), and in same javascript function below save postback calls other "_doPostBack" to hide current panel (Panel-1) and show another one (Panel-2) and server side process.
But Its always shows (Panel-1)
However in FF, Panel-2 just prompt and hide again.
EDIT: Hide panels are at server side, as there are multiple buttons which shows/hide panels.
Expected result is : After save data, show Panel-2 and hide Panel-1
can anyone has idea how to overcome this prob ?
Without some actual code it is a bit difficult to see what is going on, but from what I understand it is a problem with timing.
When you click 'Yes', you perform the postback function and immediately after you hide the panel.
Your 'doPostback' is actually a-synchronous. Meaning the response comes a bit later (not immediately). Thus when the response comes back it updates your page and that is where you flow is breaking up.
FF is probably fast enough to actual show you what is really happening. Your hide function works ok, but is overwritten by the ajax response.
I suggest you hide the panel asynchronously, with the response that comes from the server.
Here are some links on that:
- RegisterClientScriptBlock within AJAX method call
RegisterStartupScript doesn't work with ScriptManager,Updatepanel. Why is that?
I hope this helps you get on the right track.
Good luck

Rails multi step form with Javascript – browser back button behavior

I have 1 form that I've separated into multiple divs, each with their own Next button.
Upon clicking "Next" some javascript fires (see below) that hides the current div and unhides the next div (i.e. next step in the form). The URL is also updated with an # and the name of the step (e.g. example.com/booking turns into example.com/booking#contact-info)
$('#booking-details-complete').click(function(event) {
$("#booking-details").css("display", "none");
$("#contact-info").css("display", "block");
});
The Next button code that fires this JS is:
<%= link_to "Next", '#contact-info', :id => "booking-details-complete"%>
The final piece of the form has a Submit button instead of a Next button, which sends one big POST request to the various models.
My problem is back button behavior: going back doesn't update the page. The URL changes correctly, but the parts of the form (i.e. the divs) don't update their show/hide state.
I'm so close to finishing this project, but just can't figure out this last piece. Any help much appreciated.
So you mean hitting "back" on your browser updates your hash in the URL properly, but your page remains static with the desired behavior being that the section you are on collapses and the previous one re-opens?
You need a hash listener, there isn't a particularly standard way of getting one I don't believe. Push and Pop history just manipulate the history stack, it won't give you what you want.
Once you have a hash listener you have to write a JS function that can set your page state based on the hash of the URL.
I've never implemented a hash listener so here's something I found that might help http://benalman.com/projects/jquery-hashchange-plugin/

How to get form input inside ModalBox with jQuery

I am developing my website using jQuery. For the Private Messaging feature, what I had right now is showing a ModalBox (dialog box). So, whenever user wanna check message, they will be displayed with a dialog box with the inbox shown. Now, inside that ModalBox, I have a "Compose" section where users can send message. My question is, when user submits the form, how we could retrieve those inputs without having to actually submit it? Because, I have tried it..., that when I do the submit(), it closed the ModalBox.
Any help would be appreciated.
Since you're using jQuery, see here
In case you're not familiar with AJAX, basically it allows you to send a request to the server (in this case, your submitted data), process the data on the server, and then receive any return back from your request, all without reloading the entire page.
This should alleviate the issue of the modal box closing (the page reloading upon submit, really.)
[edit]
See this article from here at StackOverflow on using the live event handler. This should take care of the issue of not getting the value from newly created DOM elements.
[/edit]

Categories

Resources