Develop Reference

.on('change' ...) doesn't trigger for data changed by JS

I am trying to trigger an event when an input textbox changed:
$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })
This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.
I created a little jsfiddle to show this:
https://jsfiddle.net/6vnuqxa0/
To try out:
Click on Choose pickup point
Select something from list and click on "Choose this pick up point".
Any ideas how to resolve this issue?

The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.
In your case, add an id to your div so that you have:
<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>
Then the following code will trigger the alert when the contents of that div change.
$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
alert('helo');
}
});
Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.

trigger('change') when click button. but a ID or name on your input would be better
$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
$('.packeta-selector-branch-id').trigger('change');
})

Avoid multiple form submit in html

I'm facing a sort of dummy problem.
On my site there is an order form (simple html form) and I noticed that I get double commands from time to time.
I realized that if I clicked repeatedly few times the submit button (before the action page is loaded) I got as many commands as I have clicked.
So I wonder if there are simple solution to make form submission asyncronous?
Thanks
P.S. I added JQuery UI dialog on submit "wait please..." but I get still double commands.
UPDATE
As GeoffAtkins proposed I will:
disable submit after dialog is shown
make use of unique form's token (as it is already added by Symfony) Do not use Symfony token as unique form token as it is always the same for current session. Use just random or something like that.

I would consider doing this (jQuery since you said you used that)
$(function() {
$("#formId").on("submit",function() {
$("#submitBut").hide();
$("#pleaseWait").show();
});
});
if you submit the form and reload the page.
If you Ajax the order, then do
$(function() {
$("#formId").on("submit",function(e) {
e.preventDefault();
var $theForm = $(this);
$("#submitBut").hide();
$("#pleaseWait").show();
$.post($(this).attr("action"),$(this).serialize(),function() {
$theForm.reset();
$("#submitBut").show(); // assuming you want the user to order more stuff
$("#pleaseWait").hide();
});
});
});
NOTE that disabling the submit button on click of the submit button may stop the submission all together (at least in Chrome): https://jsfiddle.net/mplungjan/xc6uc46m/

Just disable the button on click, something like:
$("#my-button-id").on("click", function() {
$(this).attr("disabled", "disabled");
});

var bool = true;
function onclick()
{
if(bool)
{
//do stuff
bool = false;
}
else
{
//ignore
}
}

You could disable the button on the form when it is clicked, and then continue to perform the action. You would probably change the text to say "loading..." or some such.
You may also want to re-enable the button on fail or complete of the ajax request.
I've done this many times similar to this: https://stackoverflow.com/a/19220576/89211

Javascript disabling a button during requests

I am trying to briefly disable a 'Save' button on a page during requests to prevent users from clicking it twice. Following advice that I found here, I put
elem.setAttribute("disabled","disabled")
at the very beginning of the onclick method, but it doesn't work, I can still click multiple times very fast and cause multiple requests to be sent before the buttons get disabled. Does anyone have any advice?

Try using the elements properties instead of its attributes
elem.disabled = true;

The onclick method can do this, too. In addition to disabling the button.
if (inclick) return;
inclick = true;
... handle the entire click work ...
inclick = false;
be sure to default inclick = false; at the start of the world.
This will make sure any fast clicks get ignored. (It's a sort of 'debouncing' effect.)

like this
elem.attr("disabled", "disabled");
$("#idButton").attr("disabled", "disabled");
could you help this.
Disabling a submit button after one click
http://jsfiddle.net/V7B3T/12/

How do I add an onclick event to the OK button of the Javascript confirm box?

I am working with a .Net 1.1 web application. There is a Save button that, when clicked, will pop up the Javascript confirm box. Once the user clicks OK a long running process is kicked off. We would like to show a busy indicator when the user clicks the OK button of the confirm dialog. Can this be done?

if(confirm("Are you sure you would like to save?")){
alert("Loading") //Replace with what you want to do
}

The button on an alert() dialog is not scriptable. You need to find where in the code the alert() is called and patch in to the code just after this.

What you want to do is pretty simple. A confirm('Text') returns true or false after the user makes their selection. All you need to do is on true show a busy indication.
Here is what you're looking for http://jsfiddle.net/Akkuma/C6ZZf/
$('#save').on('click', function () {
var shouldSave = confirm('Make your choice');
if(shouldSave) {
alert('Do saving');
}
else {
alert('Not saving');
}
});

Javascript Window.onbeforeunload trapping control that fired event

I have an C#.NET MVC3 web app and I have a question related to the attached Stackoverflow question. I am using a window.beforeunload event to see if there have been changes made on my View. If so, I alert the user that they have unsaved changes. However, if they selected the Create (submit) button, the dialog alerting the user still pops up. I want to NOT pop up the dialog if the Create button is selected. Any ideas? Is there a way to see which control was clicked?

I can think of 2 solutions:
$('#submitBtn').click(function() {
unbindOnBeforeUnload();
});
// OR
// maybe you have multiple cases where you don't want this triggered,
// so this will be better
var shouldTriggerOnBeforeUnload = true;
$('#submitBtn').click(function() {
shouldTriggerOnBeforeUnload = false;
});
...
$(document).unload(function() {
if (shouldTriggerOnBeforeUnload) {
confirm();
}
});
I've written it in a jQuery-like syntax, but only to keep the code concise, you can adapt it to anything you want.