Develop Reference

Prevent onclick from firing

I was working around with form submissions in html. Please take a look at below code
<form id="form1">
<button id="btn1" onclick="clicked();">Submit</button>
</form>
<script>
$("#btn1").click(function (event) {
alert("event triggered");
if(some_condition == true){
// stop firing onclick method but it always submits the form
event.stopImmediatePropogation(); // not working
event.preventDefault(); // not working
event.stopPropogation(); // not working it's for bubbled events
}
});
function clicked(){ alert("clicked me"); }
</script>
I want to stop clicked() function from firing which is attached to inline onclick attribute. I would like to run my jquery click function and if something goes wrong, I dont want to trigger onclick but it always runs clicked() function. Could any one help me. Any help is greatly appreciated.

The order in which an onxyz handler is called relative to dynamically-attached handlers varies from browser to browser, so your handler may well not run before the original does.
To deal with that, you save and remove the onclick handler:
var btn = $("#btn1");
var clickHandler = btn[0].onclick;
btn[0].onclick = false;
Then, in your handler, if you want that function to be called, you call it:
clickhandler.call(this, event);
Example:
// Get the button
var btn = $("#btn1");
// Save and remove the onclick handler
var clickHandler = btn[0].onclick;
btn[0].onclick = false;
// Hook up your handler
$("#btn1").click(function(event) {
alert("event triggered");
if (!confirm("Allow it?")) {
// Disallowed, don't call it
alert("stopped it");
} else {
// Allowed, call it
clickHandler.call(this, event);
}
});
// The onclick handler
function clicked() {
alert("clicked me");
}
<form id="form1" onsubmit="return false">
<button id="btn1" onclick="clicked();">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Try event.stopPropagation()
api docs

if condition is true then remove the 'onclick' attribute
if (some_condition == true) {
$("#btn1").removeAttr('onclick').click(function(event) {
alert("event triggered");
//do something
});
}
function clicked() {
alert("clicked me");
}

I am sharing a quick workaround without knowing why you cannot add logic to stop adding "onclick="clicked();" code which you are saying getting automatically added.
I recommend you hide button with id as "btn1". Add style display:none. You donot need on ready function for this but simply add style attribute to the button btn1 or if that is also not possible directly then use jQuery to do that post document ready.
Read :
How to change css display none or block property using Jquery?
Then add a new button to the form using jQuery with id as "btn2" and add register the btn2 click event as well. DO this after form load.
<form id="form1">
<div id="newbut">
<button id="btn1" onclick="clicked();">Submit</button>
</div>
</form>
jQuery("#newbut").html('<button id="btn2">Submit</button>');
$(document).on('click', '#btn2', function(){
// Your Code
});
Refer below url to how to register click event for new button:
Adding click event for a button created dynamically using jQuery
jquery - Click event not working for dynamically created button

Can't you do the condition check and the clicked() logic in one function? i.e
<script>
function clicked() {
if(some_condition == true){
return;
}
alert("clicked me");
}
</script>

input type image click event in jquery

I am trying to navigate to another page using jquery
Markup :
<input type="image" name="ImageButton1" id="btnCancel" src="../images/btn_cancel.gif" />
JS
$('input[type="image"][id^="btnCancel"]').live('click', function () {
window.location.replace('default.aspx');
});
Page just refreshes, it does not navigate to desired page. when i change type=button it works.
How to achieve the same by keeping type as image only ?

$("#btnCancel").on('click', function () {
window.location.href = 'default.aspx';
});

Use preventdefault:
$('input#btnCancel').on('click', function (e) {
e.preventDefault();
window.location.replace('default.aspx');
});

Us on instead of live...and prevent default to stop the default behaviour.
$(document).on('click','input[type="image"][id^="btnCancel"]',function(e){
e.preventDefault();
window.location.replace('default.aspx');
});
live is deprecated

Dynamically add event handler to an href which is also dynamically generated

I have a button and when this button is clicked I need to generate a link dynamically and add a handler to it which shows a twitter bootstrap modal. I tried this:
$(function() {
function showModal() {
$("#myModal").modal("show");
}
$(document).on("click", "#my_btn", function() {
//generating a link a adding a handler to it which is "showModal()"
//.....
$("#my_href").html("Some text123 <a href='#' onclick='showModal();'>test123</a>.");
//.....
})
});
But when I clink a this link the error is being thrown saying
Uncaught ReferenceError: showModal is not defined
I can, of course, move showModal() out of $(function() {...}). But I was wondering, is there a better way to do it? And in general, is this a good way to achieve what I want?
UPDATE:
Even after moving showModal() out of $(function() {...}) it doesn't work, it redirects me to the same page but doesn't show pop up.

Don't use inline Javascript. You've posted a perfect example of how you should be doing this right in your question: Use .on on the containing element.
$(document).on("click", "#my_btn", function() {
$("#my_href").html("Some text123 <a href='#'>test123</a>.");
});
$('#my_href').on('click', 'a', showModal);

Use jQuery delegated event handlers to add the click handler
$(function () {
function showModal() {
$("#myModal").modal("show");
}
$(document).on("click", "#my_btn", function () {
//generating a link a adding a handler to it which is "showModal()"
//.....
$("#my_href").html("Some text123 <a href='#' class='showmodal'>test123</a>.");
//.....
});
$("#my_href").on('click', '.showmodal', showModal)
});
In your case you have a inlined event handler which is calling showModal, this expects a method named showModal in the global scope but you have added the method showModal as a closure method in the dom ready handler.

$(function() {
function showModal() {
alert("Modal");
}
$('<a/>',{
href: '#',
text: "Click Me",
click: function(e) {
e.preventDefault();
showModal();
}
}).appendTo('#my_href');
});
jsfiddle

Here you should attach your event to the body or document not to the button
$("body").on( "click","button[id$=my_btn]", function(){
alert( "hi" );
})

Unable to get javascript to do button click from child iframe

I'm playing around with the Jquery UI dialog. I have a page with a gridview, a button that refreshes the gridview and a link. When you click a link, a dialog window popup up with the details of the record.
When I press save on the child page, I have the child page calling a javascript function from the parent page. In this function, it tried to do the button click event but it doesn't seem to be working.
If you look at the showThanks function below,
The alert works, the button text changes but the button click doesn't work.
Could this be a security feature? Both pages are on the same page right now.
hmm any clue?
Thanks
Edit - if you click the button manually, it changes the grid (in the button event handler). Yet, the jquery doesn't seem to be going in the button's event handler and the grid doesn't change.
Parent page html
<asp:GridView ID="gv" runat="server" />
<asp:Button ID="btnRefresh" runat="server" />
<a id="popoutUsers" href="popup.aspx?page=Bob" class="OpenNewLink">CLICK ME</a>
<script type="text/javascript">
$(function () {
$('.OpenNewLink').click(function () {
var url = $(this).attr('href');
var dialog = $('<div id="modal"></div>').appendTo('body')
$('<iframe id="site" src="' + url + '" />').dialog({
modal: true
, close: function (event, ui) {
// remove div with all data and events
dialog.remove();
}
});
return false;
});
showThanks = function () {
alert("Thanks");
var button = $("#btnRefresh");
button.val("hello"); //This works
button.click(); //Nothing seems to happen
// button.trigger("click"); (Tried trigger as well but no luck)
};
});
</script>
Child page
<div>
Why hello there
<asp:Button ID="btnBob" runat="server" Text="click me" />
</div>
<script type="text/javascript">
$(function () {
$('#btnBob').click(function (e) {
e.preventDefault();
window.parent.showThanks();
window.parent.$('.ui-dialog-content').filter(function () { return $(this).dialog('isOpen'); }).dialog('close');
return false;
});
});
</script>

So decided to do a new round of google searching and found this link Html Button that calls JQuery and does not post back
I changed my button to the following (added the UseSubmitBehavior)
and now it works. Hopefully I didn't waste people's time...

How to set focus on <input type="text" /> on "SelectedIndexChange" event of an DevExpress combobox at client click?

function DefaultText(textBox) {
textBox.focus(function()
{
if ($(this).val() == $(this)[0].title)
{
$(this).removeClass("activecss");
$(this).val("");
}
});
textBox.blur(function()
{
if ($(this).val() == "")
{
$(this).addClass("deactivatecss");
$(this).val($(this)[0].title);
}
});
textBox.blur();
}
Above function is called when document loaded successful.
form.aspx
<dx:ASPxComboBox ID="comboBoxAttributes" SelectedIndexChanged="function(s, e) { $('#textBox').focus(); }" />
</dx:ASPxComboBox>
now it got focus for mili sec. and then goes to ASPxComboBox's selected text.

Bind a click event to your button and call .focus() to trigger a focus event:
Bind a change event on your dropdown and call .focus() to trigger a focus event:
$('#dropdown').change(function() {
$('#textbox').focus();
});
Note: replace "#dropdown" and "#textbox" by selectors to your dropdown and your textbox respectively.
Further reading:
Bind a change event
.focus()

<input type="button" id="button" value="Button"/>
$("#button").click(function(){
textBox.trigger("focus");
});

use the below line to focus particular text box
$("#button").click(function(){
$("#id").focus();or $('.classname').focus();
});