Input button click is not invoked through JavaScript in IE9 - javascript

I'm working with MVC 3, javascript and jQuery.
I've got a hidden button which click() function needs to be called from javascript.
This works great on every browser except IE9.
$('#fakeSubmitBt').click(function () {
$('#fileUplSubmitBt').click();
});
Here, fileUplSubmitBt is the hidden button and fakeSubmitBt is the visible button which I need to click instead.
I noticed that if a call three times
$('#fileUplSubmitBt').click();
then the form is submitted, but in the backend the elements of the form are not recognized.
UPDATE:
thanks to the hints given by Ricardo and Jay, I tried to use trigger('click') but also this path failed.
In the following I post the code that is shaming me (it's MVC3 using Razor):
<script type="text/javascript">
function s2cPanelReady() {
$('#fakeBrowseBt').click(function () {
$('#fileUplRadio').prop("checked", true);
$('#gravatarRadio').prop('checked', false);
$('#realFileUpload').click();
});
$('#fakeSubmitBt').click(function () {
if ($('#gravatarRadio').prop("checked")) {
$('#grvatarSubmitBt').click();
} else if ($('#fileUplRadio').prop("checked")) {
$('#fileUplSubmitBt').trigger('click');
}
});
}
</script>
<div class="inputForm">
<div class="inputField">
<div class="userPicLargeFrame">
<img src="/Images/Get?id=#Model.ID&size=40" class="userPicLarge" />
</div>
</div>
#using (Html.BeginForm("ChangePicture", "User"))
{
<div class="inputField">
<input type="radio" id="gravatarRadio" />
<span class="inputLabel">Gravatar:</span>
#Html.EditorFor(model => model.Preferences.GravatarEmail)
#Html.ValidationMessageFor(model => model.Preferences.GravatarEmail)
</div>
<input id="grvatarSubmitBt" type="submit" value="Save Pic" style="display:none;" />
}
#using (Html.BeginForm("UploadPicture", "User", FormMethod.Post, new { encType = "multipart/form-data", name = "uplPicForm" }))
{
<div class="inputField">
<input type="radio" id="fileUplRadio" />
<span class="inputLabel">Save your own pic:</span>
<span class="inputLabel">
<span style="display:inline-block; position:relative;">
<input type="file" id="realFileUpload" name="fileUpload" style="position:relative; opacity:0; -moz-opacity:0 ;" />
<span style="display:inline-block; position:absolute; top:0px; left:0px;">
<input id="fakePathBox" type="text" value="" readonly />
<input id="fakeBrowseBt" type="button" value="..."/>
</span>
</span>
</span>
<input id="fileUplSubmitBt" type="submit" name="submit" value="Upload" style="display:none;" />
</div>
}
<div class="inputField">
<span class="inputLabel">
<input id="fakeSubmitBt" type="button" value="Submit" class="s2cButton" />
</span>
</div>
</div>
UPDATE N.2: I tried to remove all javascript stuff, and simply put the file upload HTML tag with a simple submit button: nor in this case on IE9 I'm able to submit the form!!
Sometimes it runs, sometimes it is not fired at the first click, but only at the second click (and in this case the submitted form hasn't got the selected file, so server-side this results in an error...), sometimes it simply doesn't fire the submit button, no matters how many click I do.
This issue starts to make me crazy....
Any other hint?
Thank you very much!
Best
cghersi

I've had a similar problem and ended up just transforming the button into an anchor (<a>) and invoked the jquery-ui function $.button()
NOTE: the jquery ui is required http://jqueryui.com/
That way the link still looked like a button and the $.click() event worked.
html
<div class="input">
Submit
</div>
jquery
$("#emulate-button").button();
//Set event when clicked
$("#emulate-button").click(function () {
//.... your logic here
});

Like Ricardo said, you need to use trigger: http://jsfiddle.net/5hgsW/1/

If the $('#fileUplSubmitBt').click event wasn't defined in JQuery, the .click() trigger may not work.
Put everything from the $('#fileUplSubmitBt').click event inside a function then bind it in the $('#fakeSubmitBt').click and $('#fileUplSubmitBt').click events.

Related

jQuery can change the text of input submit type but button is no longer clickable

I am using jaquery and jquery mobile version 1.8 and I have a button like so:
<div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
<input type="submit" name="Next" id="NextButton" value="Save" />
</div>
And I have a javascript that can change the text for it like so:
$('#AnyButton').live('click', function() {
if(true)
{
$('#myButton div').text('Saving')
}
else
$('#myButton div').text('Continue');
});
I tried so many other ways that didn't work but this works however after I change the text the button seems to replace the myButton div content with the text Saving or Continue and thus the button is no longer clickable.
In my browser debugger the button shows a text Save appear between myButton and the Nextbutton input.
Like so:
<div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
"Save"
<input type="submit" name="Next" id="NextButton" value="Save" />
</div>
I suspect there is more to your code than you have presented. With jQuery Mobile, each input is read as a Button. So you mnay need to refresh it after a dynamic update.
This code is working:
$(function() {
$("#NextButton").click(function(e) {
e.preventDefault();
$(this).val("Saving").button("refresh");
});
});
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
<input type="submit" name="Next" id="NextButton" value="Save" />
</div>
See More: https://api.jquerymobile.com/button/ and https://demos.jquerymobile.com/1.4.5/button/
If I am reading your post correctly, you want to change the text of the
input, you need to change it's value property.
I think .live is relatively old and deprecated and should be replaced with .on and a delegated event handler
$('#AnyButton').live('click', function() {
if(true)
$('#myButton').find('input[type="submit"]').val('Saving');
else
$('#myButton').find('input[type="submit"]').val('Continue');
});

JQuery on('click') does not work when clicked

So I'm currently working on this project and I am stuck this problem. I tried looking at the console but it doesn't show anything when I clicked the button. What I'm trying to do is when I click the button, it will trigger the file input, but so far, when I clicked it, nothing happens, not even an error is shown.(The code is based on the answer in this question: Bootstrap form upload file layout) Can you guys help me find out what I did wrong
These are the codes
TabUploadDokumen.html
<script>
$(document).ready(function () {
/* Some code here */
});
$('#btn_IdentitasKTP/Paspor').on('click', function () {
$('#file_IdentitasKTP/Paspor').trigger('click')
});
$('#file_IdentitasKTP/Paspor').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$('#text_IdentitasKTP/Paspor').val(file_name);
});
</script>
<!--Some other code -->
<div class='form-group'>
<label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
<div class='form-group'>
<label for="text_IdentitasKTP/Paspor" id="lbl_IdentitasKTP/Paspor" class="control-label">Identitas(KTP/Paspor)</label>
</div>
<div class="input-group">
<input type="file" id="file_IdentitasKTP/Paspor" name="name_file_IdentitasKTP/Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
<input type="text" class="form-control" id="text_IdentitasKTP/Paspor" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btn_IdentitasKTP/Paspor">Upload KTP/Paspor</button>
</span>
</div>`
</div>
<!-- Some other code -->
I'm using ASP.NET MVC 5 and Bootstrap version 3.00 and Jquery version jquery version 1.11.1 if it is any help.
Thanks in advance
Your selectors contain forward slashes that need to be escaped like this:
$("#btn_IdentitasKTP\\/Paspor'")
Ensure that your jQuery code is sat within your document.ready() function.
Escape the selectors that contain forward slashes (click here for more)
I would also replace
$('#btn_IdentitasKTP/Paspor').on('click', function () {
with
$('document').on('click','#btn_IdentitasKTP\\/Paspor', function () {
The on('click') function needs to run in the $(document).ready function, otherwise it will run before the DOM is ready and won't find the element it's supposed to bind to.
$(document).ready(function () {
$('#btn_IdentitasKTP\\/Paspor').on('click', function () {
$('#file_IdentitasKTP\\/Paspor').trigger('click')
});
});
(And escape the slashes as suggested in another answer)
it doesn't work because script tag is render before the html elements. it will work if you change the code as below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Some other code -->
<div class='form-group'>
<label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
<div class='form-group'>
<label for="text_IdentitasKTP_Paspor" id="lbl_IdentitasKTP_Paspor" class="control-label">Identitas(KTP/Paspor)</label>
</div>
<div class="input-group">
<input type="file" id="file_IdentitasKTP_Paspor" name="name_file_IdentitasKTP_Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
<input type="text" class="form-control" id="text_IdentitasKTP_Paspor" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btn_IdentitasKTP_Paspor" >Upload KTP/Paspor</button>
</span>
</div>`
</div>
<script>
$(document).ready(function () {
/* Some code here */
});
$('#btn_IdentitasKTP_Paspor').on('click', function () {
$("#file_IdentitasKTP_Paspor").click()
});
$('#file_IdentitasKTP_Paspor').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$('#text_IdentitasKTP_Paspor').val(file_name);
});
</script>
<!-- Some other code -->

jQuery/JS - Hiding specific dynamically created elements/buttons

I've built a simple chat application with message rating functionality. I want to prevent self-ratings by hiding the corresponding rating buttons. So on Bob's screen for example there should be no rating buttons next to Bob's messages.
I've tried to realize that by comparing the #name and #user-name. If they are equal, the rating buttons should be hidden. But it looks like I'm doing that not correctly.
That main problem is that a message div .standard-msg is created dynamically so I need something like "on-dom-change".
Every help appriciated.
$("#standard-msg").on("DOMSubtreeModified", function() {
$('.standard-msg').each(function() {
if ($('#name').val() == $(this).find('#user-name').text()) {
$('button').hide();
}
});
});
<div id="chat-wrapper" class="wrapper">
<div class="message-box" id="message-box">
<div class="standard-msg">
<button class="rating like-btn">Like</button>
<button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Bob</span> : <span class="user-message">hi</span>
</div>
<div class="standard-msg">
<button class="rating like-btn">Like</button>
<button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Alice</span> : <span class="user-message">hello</span>
</div>
</div>
<div class="panel">
<input type="text" name="name" id="name" placeholder="Your Name" maxlength="10" />
<input type="text" name="message" id="message" placeholder="Message" maxlength="80" />
<button id="send-btn" class="btn">Send</button>
</div>
</div>
If the buttons were added to the page after the page has loaded then they won't respond to any code (in the page before they were created) that references them. This is because new event listeners are added for the buttons when they are created and somehow they don't pickup on any code older than they are.
To get around this quirk, just add the code dynamically as you add the buttons to the page and it should work.
e.g.
var s = "$('#standard-msg').on('DOMSubtreeModified', function() { $('.standard-msg').each(function() { if ($('#name').val() == $(this).find('#user-name').text()) { $('button').hide(); } }); }); ";
then append to the page,
$("body").append(s);

why do these two lines of jquery knock off the event handler for another jquery element

I have a jquery event handler for an element w/ID = submitButton. The code works fine -- but if I click on another button w/ID = yeahTotallyButton then the jquery event handler for the submitButton stops working. No errors show in the console -- but the handler for #submitButton stops firing. The debugger does not stop at breakpoints for submitButton once I have clicked the yeahTotallyButton.
In debugging so far, I have noticed that by commenting out two lines in the event handler for the yeahTotallyButton (indicated in the code below) then the submit button works even after I click the yeahTotallyButton. So basically something in these two lines of code is breaking the submitButton handler. Why is this? How can I fix this? I need to do the things that these two lines of code do in my final website.
<body>
<div id='header'>
</div>
<div id='captchaPanel'>
<div id='top'>
<div id='fillerTop'>
</div>
<div id='captcha'>
<img id='captchaText' src='cryptographp.inc.php'> </img>
</div>
</div>
<div id='bottom'>
<div id='left'>
<p id='answerprompt'>Answer: </p>
<input id="answerBox" type="text" name="firstname">
</div>
<div id='right'>
<table id='buttonTable'>
<tr>
<td><img id='recycleButton' src="images/buttons_recycle.png" ></td>
</tr>
<tr>
<td><img src="images/buttons_audio.png" ></td>
</tr>
<tr>
<td><img src="images/buttons_question.png" ></td>
</tr>
</table>
<div id='logo'>
<img src="images/smallLogo.png">
</div>
</div>
<div id='introButtons'>
<button id='yeahTotallyButton' type="submit" class="button">Yeah, totally. I am cool person.</button>
<button id='imARobotButton' type="submit" class="button">No, I can't come. I'm a robot.</button>
</div>
</div>
</div>
<div id='submitDiv'>
<input id='submitButton' type="submit" class="button" value="Submit"/>
</div>
</body>
Here is the script:
$(document).ready(function () {
$("#submitButton").click(function(event) {
$.ajax({
url: 'getRejection.php',
success: function(data) { alert(data) }
});
$('#captchaPanel').animate({ opacity: 1}, 200);
$("#captchaText").attr('src', 'cryptographp.inc.php');
alert(event.target.id);
});
$("#imARobotButton").click(function(){
alert("thanks for being honest");
location.reload();
});
$("#yeahTotallyButton").click(function(){
$("#introButtons").css('visibility','hidden');
//when these two lines are commented out,
//then the submit button works even after
// I click the yeahTotallyButton
//$("#captchaPanel").css('visibility','visible');
// $("#bottom").css('visibility','visible');
$("#top").css('visibility','visible');
$("#left").css('visibility','visible');
$("#right").css('visibility','visible');
$("#captchaPanel").fadeIn("fast");
$("#captchaText").attr('src', 'cryptographp.inc.php');
$("#top").attr('border-radius', '4px');
});
$("#recycleButton").click(function(){
$("#captchaText").attr('src', 'cryptographp.inc.php');
});
});
My guess is that you somehow end up having more than one element with id set to submitButton, and the button you're checking the click on is not the first in this list. For example, in this scenario...
<div id='submitDiv'>
<input id='submitButton' type="submit" class="button" value="Alert Submit" />
<input id='submitButton' type="submit" class="button" value="Alertless Submit" />
</div>
$('#submitButton').click(function() { alert(42); });
... while clicking the first button shows that alert, clicking on the second does nothing.
You can easily patch it by adjusting the selector:
$('[id=submitButton]').click(function() { ... });
Fiddle. But obviously, that'll only mask the real problem: in no circumstances you'd have more than one element with a specific ID in DOM.
The handlers for the yeahTotallyButton were making the captchaPanel element bigger, so that it hung over the submit button -- even though the submitButton was visible. So when you clicked on the submitButton jQuery was not getting the event somehow. Carefully resizing the catpchaPanel solved the problem.

E-mail form interactivity

I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.

Categories

Resources