I have a simple form with a "Submit" button and an additional "Add" button in blade template. On form submit there is an ajax callback to a controller which validates provided value. Based on the returned result from the controller, I'd like to change the "Add" button onClick event. Here is blade snip:
<button id="theId" type="button" >Add</button>
Relevant ajax pice:
$.ajax({
...
success: function(result){
//Update onClick for the add button
addButton.onclick=function () {
//location.href = 'www.example.com';
window.location="www.example.com";
};
addButton.html("aNewName");
}
}
Based on all the sources either location.href or window.location should redirect me to a different page (in my case just a different subpage) but it does not. After hours of research I thought that I get a wrong button or sth is wrong with the ajax itself but then I added addButton.html line and this works well. What do I do wrong here?
Get the button, remove eventually previous click events, add the new event using the http/https prefix, change the text of the button
success: function(result){
var button = document.querySelector('#theId');
button.addEventListener('click', function () {
window.location = 'https://www.google.it';
});
button.innerHTML = "my new button text";
}
From the MDN docs here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Registering_on-event_handlers, a handler registered via an on* attribute will be available via the corresponding on* property, but not the other way around.
What this means is that the onclick attribute of the div remains the old event handler in HTML.
To keep sanity, always register event listeners with the addEventListener method.
It looks like you are trying to set a jQuery object's onclick property to a function, which is not the right way to set a click event handler in jQuery.
You should use the jQuery object's click method to set a click handler. And use the off method to remove the previous handler:
addButton.off('click');
addButton.click(function () {
window.location="https://www.example.com";
})
Here's a working fiddle.
Related
I've bound an event to an icon on click. The event changes the id of a button on the page. I want a new event to be bound to that new id, and the existing event bound to the old id to be unbound. How do I do this?
I can see from Firebug that the button id successfully changes when the icon is clicked. However, when I look at POST, I see that the hidden field with id "Final_Approval" has the value of "Approved", which tells me that the event tied to the original button id occurred, and I don't want it to. All of my jQuery is inside document ready.
The original button:
<button id="btn-final-approval-no-review" class="btn btn-warning" type="submit">Final Approval</button>
The original event tied to that id:
$('[id^="btn-final-approval"]').click(function () {
$("#Final_Approval").val("Approved");
});
The event triggered when the icon is clicked:
$("#add-vendor-item").click(function () {
$('#btn-final-approval-no-review').attr('id', 'btn-vendor-rep-review2');
}
The new event I want to take place:
$("#btn-vendor-rep-review2").click(function () {
$("#ItemRequestStatusId").val("#Portal.BusinessModel.Entities.ItemRequestStatusId.VendorRepReview");
});
To bind events to elements that change dynamically, you need to use delegation with on():
$(document).on('click', '[id^="btn-final-approval"]', function() {
$("#Final_Approval").val("Approved");
});
As adeneo said, you probably shouldn't move IDs around, you should use classes. But the same idea applies, you just have to change the selector in the on() call.
Use on delegate to bind click event dynamically.
$("body").on("click","#btn-vendor-rep-review2", function () {
$("#ItemRequestStatusId").val("#Portal.BusinessModel.Entities.ItemRequestStatusId.VendorRepReview");
});
$(document).on('click', '#finalApproval', function() {
if($(this).hasClass('first')){
$(this).removeClass('first');
//first action to be preformed
}else{
//second action to be preformed.
}
});
then simply add class first to the button on page load.
If you need it to toggle back you can just re-add the class first in the second action to be preformed area
EDIT
after re-reading the question you probably cant use this - just substitute with the id / class of the item in question and add the if/else statement to the handler for that item.
I'm working on some web very simple drag and drop game using html5 and javascript. After they drag the elements I have a button that verifies either the arrange is correct or not. My verify function is on an external JS file and I'm calling it using onclick inside the input tag. It works, however my boss doesnt want event handlers to be shown on the html. I'm just starting with javascript so is there a way to call an onclick event without using the onclick on a tag in the html file?
Ive read you can do it easily with jquery, but can you use it without jquery?
You can bind a click event to the button like they do in jquery:
document.onclick = function(event) {
var targetElement = event.target;
if ( targetElement.className == "myButton" ) {
// do something
alert("my button clicked");
}
};
This example works on a class name but you can change that to any attribute you want on the button or something else.
There are two meanings I got from your question.
1) You want to call onclick event of an item on particular thing.
For this you can directly call the methods you want to call onclick.
2) not showing on html that it has onclick. For this you can use something like this:
document.getElementById('id').onClick = "yourMethod()";
Hope it helps.
I am using Rapheael to draw a control Dashboard. Right now I am adding a hyperlink object into the Dashboard editor. It is a text with the HREF attribute.
When I add the element and click on it, it opens the link. Is there some way to temporarly disable the link?
When I click the other elements, it opens the property dialog. I would like that also with the Hyperlink object.
I've tried adding return:false, but didn't help:
obj.dblclick(function (event) {
jQuery('##divProperties').dialog('open');
return false;
});
Returning false is a way to cancel events with more traditional event binding, e.g.
obj.onclick = function() { return false }
or
<a onclick="return false;"></a>
But it doesn't work with jQuery event bindings.
To do that, you need to call the .preventDefault() method on the event object, which is passed to the event handler:
obj.dblclick(function (event) {
jQuery('##divProperties').dialog('open');
event.preventDefault();
});
You may want to prevent default on the click event also if you're capturing double click so it doesn't get fired either.
I have a button in ASP.NET, that renders to HTML as such:
<input id="btn" type="submit" value="clickme">
If I then add the jquery:
$('#btn').click(function(){return false;});
Every time the button is clicked, nothing will happen (i.e. no postback).
This is fine.
Is there any way in Javascript I can programatically invoke the click (which will cause a postback) whilst also disregarding the jquery-attached, return false function?
You can have the event handler accept additional arguments. When triggering the handler with .trigger you can specify values for these arguments, which will let the handler modify its behavior accordingly.
For example:
$("#btn").click(function(event, submitForm) {
submitForm = submitForm || false;
if (!submitForm) return false;
});
// This will not submit the form
$("#btn").trigger("click");
// But this will
$("#btn").trigger("click", true);
The button itself does nothing by default except submitting the form, so try this:
$('#btn').closest('form').submit();
I want call OnClick function on page load with out user clicking. Can we do that in jQuery or javascript?
<input name="ctl00$PlaceHolderMain$ButtonSection$RptControls$BtnSubmit"
class="ms-ButtonHeightWidth"
id="ctl00_PlaceHolderMain_ButtonSection_RptControls_BtnSubmit"
accessKey="o" onclick="javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl00$PlaceHolderMain
$ButtonSection$RptControls$BtnSubmit",
"", true, "", "", false, true))"
type="button" value="OK"/>
$(document).ready(function() {
$("#ctl00_PlaceHolderMain_ButtonSection_RptControls_BtnSubmit").click();
});
This will trigger the click event on the element with the supplied id, and it will run when the document is fully loaded.
You can call trigger and pass the type of event to trigger.
$('#ctl00_PlaceHolderMain_ButtonSection_RptControls_BtnSubmit').trigger('click');
You can try doing a $("#ctl00_PlaceHolderMain_ButtonSection_RptControls_BtnSubmit").trigger('click'); This would emulate a click on the button more info here
You imply in the question title that the button you want to click is a submit button. If so you would be better off calling the submit method of the form instead of the click event of the submit button.
document.forms["myform"].submit()
Or with javascript inside the body:
<body onload="javascript:document.getElementById('ctl00_PlaceHolderMain_ButtonSection_RptControls_BtnSubmit').click()" ></body>
The trick is to get the element and call the click method.
Greetings.
var $btnSubmit = $('#ctl00_PlaceHolderMain_ButtonSection_RptControls_BtnSubmit');
// Either method will work:
// Method 1: jQuery has a click event pre-defined
$btnSubmit.click();
// Method 2: some events (such as newly defined HTML5 events)
// may not be pre-defined, so .trigger('[event]') is a way to
// explicitly invoke that event
$btnSubmit.trigger('click');