I am trying to trigger a click event for a button from jquery. it works very well in FF but IE(all versions) seem to ignore it. this is what i have tried so far..
$('#uxcSubmit').trigger('click');
then tried this..
$('#uxcSubmit').click();
just to clear out..even this..
jquery('#uxcSubmit').click();
then even tried this to check if it is a problem of jquery..
document.getElementById('uxcSubmit').click();
nothing seems to help IE..
thanks in advance..
Update: this is the code.. and no i don't have elements of the same id..
<div id="uxcSavingDiv">Click sumbit to save changes...</div>
<input id="uxcSubmit" value="Submit" onclick="return SaveChange();"/>
<script type="text/javascript">
function getFrameValue() {
if (Stage == 0) {
$('#uxsHiddenField').attr("value", "saved");
Stage = 1;
$('#uxSubmit').click();
return false;
}
else {
$('#uxcSavingDiv').innerHTML = "Saving...";
return true;
}
}
</script>
i think i have been clear here
In the code you posted Stage is undefined, IE won't like this. Also $('#uxSubmit').click(); should be $('#uxcSubmit').click();. I also wasn't sure when you were calling getFrameValue(); but it must be done at or after document.ready or the elements won't be there to match selectors on.
I cleaned up the rest to use jQuery methods as well (leaving the in-line for demo, but I'd remove this as well and change it to a click handler), this works fine in IE8:
<div id="uxcSavingDiv">Click sumbit to save changes...</div>
<input id="uxcSubmit" value="submit" onclick="return SaveChange();"/>
<script type="text/javascript">
var Stage = 0;
function getFrameValue() {
if (Stage == 0) {
$('#uxsHiddenField').val("saved");
Stage = 1;
$('#uxcSubmit').click();
return false;
}
else {
$('#uxcSavingDiv').html("Saving...");
return true;
}
}
function SaveChange() {
alert("Value clicked");
}
$(function(){
getFrameValue(); //Trigger it on document.ready
});
</script>
To change that SaveChange() to a bound click handler, remove the onclick and do this on ready:
$('#uxcSubmit').click(SaveChange);
$("#uxcSubmit").closest("form").submit('SaveChange'); //let SaveChange() return true/false
... and remove inline 'onclick' attribute
The relevant code piece from jQuery should be this one
// Trigger an inline bound script
try {
if ( !(elem && elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()]) ) {
if ( elem[ "on" + type ] && elem[ "on" + type ].apply( elem, data ) === false ) {
event.result = false;
}
}
// prevent IE from throwing an error for some elements with some event types, see #3533
} catch (e) {}
So I guess either this has something to do with bug mentioned 3533 (which I can't check as dev.jquery.com is down at the moment) or there is some other IE bug. btw. do you get any warnings in the error console?
Related
When my users are readOnly, I want to limit some access. In this case, the ability to edit notes. I can't explain why with this code, I still can open up my note when the user is readOnly
if(codeParam == '{{ $baby->readOnlyCode }}' ) {
//I am in side this code
$("a.btn, .btn-link, #logNote, pre, .btn").click(function() {
return false;
});
}
https://mybabies.app/baby/797b808a-e8c6-4a83-acf4-14ebe1f776b1?code=rithys4k
Please click on the note box, you will see that somehow it still be able to trigger.
I even tried added the check and return false in showModal()
function showModal(val, type, logId ) {
console.log("val, type, logId",val, type, logId);
if(codeParam == '{{ $baby->readOnlyCode }}' ) {
return false;
}
...
or tried preventDefault
if(codeParam == '{{ $baby->readOnlyCode }}' ) {
$("a.btn, .btn-link, #logNote, pre, .btn").click(function(e) {
e.preventDefault();
return false;
});
}
If you spotted what I missed, please let me know.
The problem you're having is you're attaching a second event listener that only returns false and prevents default, but the first event listener that pops the modal is still attached.
I.e.,
$("a.btn").click(function(e) {
alert("Hello World!");
});
$("a.btn").click(function(e) {
return false; // this does nothing to the previously attached event listener
});
Possible solutions:
From inspecting your code, you have some options:
$(document).on('show.bs.modal', '#noteModal', function (e) {
// move the check for the param here
if(codeParam == 'rithys4k' ) {
return false;
}
});
Or: Use disabled attributes on the buttons/links when in readonly mode.
To give you some more background - $().click() is really just shorthand for addEventListener on the click event
You have to use on method with suffix in jQuery, on jQuery Docs
const clickAction = (e) => {
// do anything
}
$('.btn, pre').on('click.go', clickAction);
Use off to remove events, off jQuery Docs
$('body').off("click.go", ".btn, pre");
// OR
$('body').off("click.go", ".btn, pre", clickAction);
// OR
$('.btn, pre').off("click.go");
You can debug the event order like this: $._data($("#logNote").get(0), "events");. New events go to the end and executed from top to bottom. In your case all you need to do is remember the trigger function and remove/add it when needed, example:
const cbToggleNoteModal = () => $("#toggleNoteModal").click();
// you have to store the cb in a variable
$("#logNote").click(cbToggleNoteModal);
// to disable the cb, just de-register the callback
$("#logNote").off("click", cbToggleNoteModal);
// and register it back when you need it
$("#logNote").click(cbToggleNoteModal);
Try doing this with css property pointer-events: none;
$("a.btn, .btn-link, #logNote, pre, .btn").css('pointer-events', 'none');
I have the following script that is not working in IE 8, it works in other browsers fine but in IE 8... all the user gets, even with the checkbox input selected is alert. Any thoughts would be greatly appreciated.
$(function() {
$("form#insider-account").bind("keypress", function(e) {
if (e.keyCode == 13) return false;
});
var isChecked = false;
$("form#insider-account").change(function() {
if ($("input#insideraccount_verified").is(":checked")) {
isChecked = true;
} else {
isChecked = false;
}
});
$("form#insider-account").submit(function(e) {
if (!isChecked) {
e.preventDefault();
alert("You must agree that the information you provided is correct.");
}
else {
}
});
});
Not sure why you set isChecked in a separate event from the submit-event. I think your problem is that in IE8, this:
$("form#insider-account").change(...
Isn't triggered when a control inside the form is changed. Why not attach the change event to the control itself:
$("input#insideraccount_verified").change(...
Or, better, just check that the checkbox is checked in the submit event instead of using a variable that you set in some other event:
$("form#insider-account").submit(function (e) {
if (!$("input#insideraccount_verified").is(":checked")) {
e.preventDefault();
alert("You must agree that the information you provided is correct.");
}
else {
}
});
Listen for change on elements inside the form instead of the form iteself, after searching google for "form change ie jquery" there were a number of results stating that this was an issue including jQuery .change() event not firing in IE
It's suggested there to use the on event instead, which will listen to the change event for input elements inside your form, like so:
$("form#insider-account input").on('change', function() {
isChecked = $("input#insideraccount_verified").is(":checked");
});
A follow on from this question
Edit
JSFiddle code
As you can see if you run the code the button text does not change, the onclick is overriding the click function. If you remove the form id attribute from the function and the onclick attribute from the html tag the code works as expected (in a real scenario no onclick function implies a submit button rather than a button)
End Edit
I had thought that a typo was responsible for JQuery not firing the click() event when an inline event was specified, however I've run into the issue once more. Here's my code and the offending tag
<input id="submit1" type="button" onclick="this.disabled=true; doSubmit();" value="submit">
<script>myfunction('submit1', 'working', myformID)</script>
var myfunction = function(ID , text , formID) {
if(ID) {
var element = document.getElementById(ID);
if(formID) {
var form = document.getElementById(formID);
}
if (element) {
jQuery(element).click( function() {
if(jQuery(this).attr('disabled')) {
return false;
}
jQuery(this).attr('disabled' , 'disabled');
jQuery(this).attr('value' , processingText);
onclick = (jQuery(this).attr('onclick') || jQuery(this).attr('onClick'));
if(form && !onclick) {
jQuery(form).submit();
}
jQuery(this).click();
});
}
}
};
I'm using javascript to create a function which will disable submit buttons while keeping any onclick attribute working in case of a doSubmit, like in this case. In other cases where the form id is set and there isn't an existing onclick I submit the form. Therefore if there is an issue with the html tag I need a general way to fix it with JS.
Many thanks in advance
Your inline handler disables the button: this.disabled=true;
Then jQuery handler checks if it is disabled and returns if so:
if(jQuery(this).attr('disabled')) {
return false;
}
There is, unfortunately, no way to predict the order of event handlers execution for the same event on the same element.
As a quick fix, I can suggest this:
Demo
jQuery(element).click( function() {
if(jQuery(this).attr('disabled-by-jquery')) {
return false;
}
jQuery(this).attr('disabled' , 'disabled');
jQuery(this).attr('disabled-by-jquery' , 'disabled');
jQuery(this).attr('value' , text);
onclick = (jQuery(this).attr('onclick') || jQuery(this).attr('onClick'));
if(form && !onclick) {
jQuery(form).submit();
}
jQuery(this).click();
});
I have this external jQuery code:
jQuery(document).one('keydown', 'g',function (evt){
if ($("#tb").html() == "0")
{
$("#tb").html("Testing the chicken.")
} else {$("#tb").html("Chickens fart too.")}
return false;});
There are no errors in console.
I know it's rather silly, but never mind the text in .html(). Anyways, whenever I go to the webpage it just replaces the default 0 in the page with nothing. Then, when I press any key nothing happens. Ultimately, what I want this script to do in the end is display the letter or number that the user types in the tb div.
P.S. I'm new to stackoverflow so please tell me if my formatting is wrong or if I broke a rule.
Okay, so I edited the code and here is what I have:
$('#tb').on("keydown", function(event) {
if ($("#tb").html() == "0")
{
$("#tb").html("Testing the chicken.")
} else {$("#tb").html("Chickens fart too.")}
});
It still doesn't work.
A div element does not have a keydown event. Only element that have focus property can have it.
So I think you are referring to a input inside the div..
HTML
<div id="tb">
<span class="output"></span>
<input type="text" />
</div>
JS
// Delegating the event on input to it's container
$('#tb').on("keydown", 'input', function (event) {
// $(this).val() - Gets the value of the input on keydown
if ($(this).val() === "") {
// Set the html for span inside div
$(".output").html("Testing the chicken.");
} else {
$(".output").html("Chickens fart too.");
}
});
Check Fiddle
// Bind event to the document which fires when document is focussed and
// a key is pressed
$(document).on('keydown', function(event) {
// Key code for g
if(event.keyCode === 71) {
// Bind the event to the input when g is pressed
$('#tb input').on('keyup', inputKeydown);
// unbind the event on document as no longet necessary
$(document).off('keydown');
}
return;
});
function inputKeydown() {
// $(this).val() - Gets the value of the input on keydown
if ($(this).val() === "") {
// Set the html for span inside div
$(".output").html("Testing the chicken.");
} else {
$(".output").html("Chickens fart too.");
}
}
Another Fiddle
I have called this function on onchange event on html checkbox.
When i click for first time all the controls in the table get disabled but when i reclick i want them to enable again.I want it javasrcipt not $("#checkbox1").change
function notewizardcheckbox() {
$('#DispalyTable td').find('*').attr('disabled', "disabled");
}
Plese help me
Thanks in Advance
I'd suggest:
function notewizardcheckbox(el) {
// this does require you to pass in the element, though
var el = el.nodeType && el.nodeType == 1 ? el : false;
if (el === false) {
return false;
}
$('#DisplayTable td').find('*').prop('disabled', !el.checked);
}
Personally, however, I can't see any valid reason not to use the change() method to handle the events, it is definitely valid JavaScript albeit it's a jQuery method, to emulate the onchange/change event.
So, unless you're looking for a plain JavaScript alternative there seems to good reason to avoid it, and even with that requirement, the native events can still be used.
References:
prop().
try with prop() and is(":checked") to check if it is checked or not..
function notewizardcheckbox(obj) {
if($(obj).is(":checked")){
$('#DispalyTable td').find('*').prop('disabled', true);
}else{
$('#DispalyTable td').find('*').prop('disabled', false);
}
}
and make sure you pass this in onchange event onchange=notewizardcheckbox(this)
OR
updated after all the comment i got.. :)
function notewizardcheckbox(obj) {
$('#DispalyTable td').find('*').prop('disabled', obj.checked);
}
try
$("input[type=checkbox]").click(function () {
if($(this).attr('checked',true))
{
$('#DispalyTable td').find('*').attr('disabled', false);
}
else
{
$('#DispalyTable td').find('*').attr('disabled', "disabled");
}
});