When i click on submit button. I got an error like "Object doesn't support property or method stop " in Internet Explorer but data is successfully added in database.
Here is my code.
function SaveComment(subCommentId, trShowresponseId, tdShowresponseId, startDate, endDate) {
// alert("");
debugger;
try {
var response = document.getElementById("TextBoxResponse~" + subCommentId).value;
if (response === "") {
alert("Please Enter Response.");
return false;
}
else {
// var isAdvanceComment = 1;
$("#showloading").show();
var commentType = 'A';
var returnReult = dashboards_DiscreteRating.SaveComment(response, subCommentId, commentType, startDate, endDate, 0).value;
if (returnReult.match("Error")) {
document.getElementById("spanErrorMessage").innerHTML = returnResponse;
}
else {
document.getElementById(tdShowresponseId).innerHTML = returnReult;
}
// document.getElementById(tdShowresponseId).innerHTML = dashboards_DiscreteRating.SaveComment(response, subCommentId, commentType, 0).value;
document.getElementById("trHiddenTextBox~" + subCommentId).className = "hide";
document.getElementById("trAddSpan~" + subCommentId).className = "show";
document.getElementById("TextBoxResponse~" + subCommentId).value = "";
document.getElementById(trShowresponseId).className = "show";
$("#showloading").hide();
window.stop();
}
}
catch (ex) {
alert(ex.description);
}}
Instead of using window.stop(), return false or call preventDefault on the event object in the form’s submit listener – likely wherever you call SaveComment. Something along the lines of:
commentForm.addEventListener('submit', function (e) {
// …
SaveComment(…);
e.preventDefault();
});
The alert here suggests you might already be passing the return value straight through:
alert("Please Enter Response.");
return false;
in which case you should be able to do it here too:
$("#showloading").hide();
return false;
See https://developer.mozilla.org/en-US/docs/Web/API/Window/stop
The stop() method is not supported by Internet Explorer.
Also: I don't know what you are trying to achieve by calling stop().
However: you call window.stop(); as the last line in your file. Since you don't rollback in your catch-block or anything, everything before that call (e.g. writing to database) gets executed and not rolled back
Finally i solved this error by using this .
function SaveComment(subCommentId, trShowresponseId, tdShowresponseId, startDate, endDate) {
// alert("");
debugger;
try {
var response = document.getElementById("TextBoxResponse~" + subCommentId).value;
if (response === "") {
alert("Please Enter Response.");
return false;
}
else {
// var isAdvanceComment = 1;
$("#showloading").show();
var commentType = 'A';
var returnReult = dashboards_DiscreteRating.SaveComment(response, subCommentId, commentType, startDate, endDate, 0).value;
if (returnReult.match("Error")) {
document.getElementById("spanErrorMessage").innerHTML = returnResponse;
}
else {
document.getElementById(tdShowresponseId).innerHTML = returnReult;
}
// document.getElementById(tdShowresponseId).innerHTML = dashboards_DiscreteRating.SaveComment(response, subCommentId, commentType, 0).value;
document.getElementById("trHiddenTextBox~" + subCommentId).className = "hide";
document.getElementById("trAddSpan~" + subCommentId).className = "show";
document.getElementById("TextBoxResponse~" + subCommentId).value = "";
document.getElementById(trShowresponseId).className = "show";
$("#showloading").hide();
if ($.browser.msie) { //************** Here is the answer ************
document.execCommand('Stop'); //************** Here is the answer ***********
}
else {
window.stop();
}
}
}
catch (ex) {
alert(ex.description);
}}
Internet Explorer does not support window.stop() so we can use document.execCommand("Stop") for IE.
Related
Unable to reset the data in jQuery. I am trying to save the data using jQuery its happening. But when I click on remove glyph-icon, data is not reset in the form. I tried a code but it is not working. When I click on remove icon also the data is being saved. I am stuck with place the reset code. Used glyphicons to save and reset the data. I do not wish do abort in ajax.
//Banking details form validation
$(document).ready(function() {
$('.editBankDetailBtn').click(function() {
if ($('.editBankDetail').is('[readonly]')) { //checks if it is already on readonly mode
$('.editBankDetail').prop('readonly', false); //turns the readonly off
$('.editBankDetailBtn').html('<span class="glyphicon glyphicon-floppy-disk"> </span>' + '<span id="reset-form" class="glyphicon glyphicon-remove"> </span>');
// $('.glyphicon-remove')[0].reset();
} else { //else we do other things
var patt = /^([0-9]{11})|([0-9]{2}-[0-9]{3}-[0-9]{6})$/;
var reg = /^[A-Za-z]{4}[0-9]{6,7}$/;
patt.test('acdbdfdsfsf22-333-666666'); // true
var bname_1 = document.getElementById('bankName').value;
if (bname_1 == "") {
document.getElementById('bankName').style.borderColor = "red";
return false;
} else {
document.getElementById('bankName').style.borderColor = "#cccccc";
}
var aaccount_number = document.getElementById('accountNumber');
if (!patt.test(aaccount_number.value)) {
document.getElementById('accountNumber').style.borderColor = "red";
return false;
} else {
document.getElementById('accountNumber').style.borderColor = "#cccccc";
}
var bifsc = document.getElementById('ifscCode').value;
if (!reg.test(ifscCode.value)) {
document.getElementById('ifscCode').style.borderColor = "red";
return false;
} else {
document.getElementById('ifscCode').style.borderColor = "#cccccc";
}
var bank_address = document.getElementById('branchAddress').value;
if (bank_address == "") {
document.getElementById('branchAddress').style.borderColor = "red";
return false;
} else {
document.getElementById('branchAddress').style.borderColor = "#cccccc";
}
$('.editBankDetail').prop('readonly', true);
$('.editBankDetailBtn').html('<span class="glyphicon glyphicon-pencil"> </span>');
}
$(document).ready(function() {
$('.glyphicon-remove').on('click', function() {
$("#reset-form").trigger("reset");
});
});
});
});
function saveBankDetail() {
$.ajax({
url: '${pageContext.request.contextPath}/update-bankdetail.html',
type: "post",
data: {
bankName: $('#bankName').val(),
branchAddress: $('#branchAddress').val(),
accountNumber: $('#accountNumber').val(),
ifscCode: $('#ifscCode').val(),
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You have $(document).ready(...) within $(document).ready(...). Note that the event is only fired once, which means that the inner one is never fired. You have also nested the click events (not recommended).
Your code should be looking something like:
$(document)
.ready(
function() {
$('.editBankDetailBtn').click(function() {
...
};
$('.glyphicon-remove').on('click', function() {
$("#reset-form").trigger("reset");
});
...
Let me start off by saying that this is my second day learning jQuery so I'm very much a beginner.
I've written a document ready function and all components are working except the countryField.change function I wrote. I'm pretty sure the web application already has a change function for this field and I'm not sure if there can be two of the same event on a field. When I say it's not working, I set a breakpoint in the Chrome debugger and it never enters the function.
Maybe I have to temporarily pause the existing event, run my code, then re-enable the default event?
Any help would be appreciated. Thanks.
$(document).ready(function(){
var submitReady = true;
var phoneField = $("p.phone").find("input");
var phoneExt = $("p.Ext").find("input");
var countryField = $("p.country").find("input");
var stateField = $("p.state").find("input");
var provinceField = $("p.Province").find("input");
var regex = /^\([2-9][0-9]{2}\)\s+[2-9][0-9]{2}\-[0-9]{4}$/;
phoneField.mask('(000) 000-0000', {placeholder: "(###) ###-####"});
phoneExt.mask('00000', {placeholder: "#####"});
$('#pardot-form').submit(function() {
// DO STUFF
if (submitReady) {
if (phoneExt.val() != "") {
phoneField.val(phoneField.val() + ' x' + phoneExt.val());
return true;
}
}
else {
return false;
}
});
phoneField.focusout(function() {
if (regex.test($(this).val())) {
submitReady = true;
return true;
}
else {
$(".form-field.phone").after( "<p class='tempError error no-label'>Please Enter a valid phone number: (###) ###-####</p>");
submitReady = false;
}
});
phoneField.focus(function() {
$(".tempError").remove();
});
countryField.change(function() {
phoneField.val("");
provinceField.val("");
stateField.val("");
submitReady = true;
});
});
You can try
$( "p.country" ).change(function() {
phoneField.val("");
provinceField.val("");
stateField.val("");
submitReady = true;
});
When using jQuery's .post() function to submit my form data, I'm getting an Uncaught RangeError: Maximum call stack size exceeded.
I know this generally means recursion but I can't see where the recursion is happening.
I've put the post request into a function ( submitRequest() ) so I can submit data from 2 different points in the code. It originally resided inside the submit event and at that point worked perfectly. The error came as soon as I moved it outside.
Any ideas?
JavaScript code (with commented logs so you can see the flow) :
$(document).ready(function() {
var downloadLink = '',
downloadName = '',
details,
detailsSaved = false;
$('.js--download').click(function(event) {
var self = $(this);
event.preventDefault();
downloadLink = self.data('filePath'); // Store clicked download link
downloadName = self.closest('.brochure').find('.brochure__name').html().replace('<br>', ' ');
if (!detailsSaved) {
$('#brochure-section').addClass('hide');
$('#capture-section').removeClass('hide');
$('html, body').animate({
scrollTop: $("#capture-section").offset().top
}, 500);
} else {
submitRequest();
}
return false;
});
$(".submit-btn").click(function(event) {
var antiSpam = $('input[name=url]').val();
if (antiSpam != "") {
outputResultText('Error - Please leave the spam prevention field blank', 'error');
proceed = false;
event.preventDefault();
return false;
}
var name = $('input[name=name]').val(),
company = $('input[name=company]').val(),
email = $('input[name=email]').val(),
phone = $('input[name=phone]').val(),
proceed = true;
if(name==""){
$('input[name=name]').addClass("error");
proceed = false;
}
if(phone==""){
$('input[name=phone]').addClass("error");
proceed = false;
}
if(email==""){
$('input[name=email]').addClass("error");
proceed = false;
}
if(!proceed) {
outputResultText('Please check all required fields', 'error');
event.preventDefault();
return false;
}
event.preventDefault();
if(proceed) {
console.log('About to request'); // Logged out
submitRequest();
}
return false;
});
//reset previously set border colors and hide all message on .keyup()
$("input, textarea").keyup(function() {
$(this).removeClass("error");
$(".form-result").fadeOut(100);
});
function submitRequest () {
console.log('Start submitRequest'); // Logged out
if (!detailsSaved) {
console.log('Details are NOT saved');
post_data = {
'name': name,
'company': company,
'phone': phone,
'email': email,
'brochure': downloadName,
'brochure_url': downloadLink
};
details = post_data;
} else {
console.log('Details are saved');
post_data = details;
post_data['brochure'] = downloadName;
post_data['brochure_url'] = downloadLink;
}
console.log('Posting data'); // Logged out
// CRASH: Uncaught RangeError: Maximum call stack size exceeded
$.post(bcf_local_args['post_url'], post_data, function(response){
console.log('Response received');
if(response.type != 'error') {
if (detailsSaved) {
outputAlert("Thank you for your request to receive our <strong>'"+downloadName+"'</strong> brochure.<br>We'll send you a copy soon to <strong>'"+email+"'</strong>, so please check your inbox.<br>Want it sent to a different email? Simply refresh the page and try again.");
} else {
//reset values in all input fields
$('#brochure-capture-form input').val('');
$('#brochure-capture-form textarea').val('');
$('#capture-section').addClass('hide');
$('#brochure-section').removeClass('hide');
outputAlert("Thank you for your request to receive our <strong>'"+downloadName+"'</strong> brochure.<br>We'll send you a copy soon to <strong>'"+email+"'</strong>, so please check your inbox.");
}
if (!detailsSaved) {
detailsSaved = true;
}
$('html, body').animate({
scrollTop: $(".brochure__alert").offset().top
}, 500);
} else {
outputResultText(response.text, response.type);
}
}, 'json');
}
function outputResultText (text, status) {
var output = '';
if(status == 'error') {
output = '<div class="error">'+text+'</div>';
} else {
output = '<div class="success">'+text+'</div>';
}
$(".form-result").hide().html(output).fadeIn(250);
}
function outputAlert (text) {
var output = '<div>'+text+'</div>';
$('.brochure__alert').hide().removeClass('hide').html(output).slideDown(250);
setTimeout( function() {
$('.brochure__alert').slideUp(250);
}, 6500);
}
// function accessStorage(action, dataKey, dataValue) {
// if(typeof(Storage) === "undefined") {
// // No support for localStorage/sessionStorage.
// return false;
// }
// if (action == 'store') {
// localStorage.setItem(dataKey, dataValue);
// } else if (action == 'retrieve') {
// return localStorage.getItem(dataKey);
// }
// }
});
I don't know if you already found a solution but I was having the "same" problem.
In my code I had this function where I was calling after an upload of images, and I was passing the images name as paramaters along with others parameters required to my POST data.
After some research I found out that browsers has some limitations on passing parameters so the problem wasn't AT $.post but in my function calling.
I don't know the technical term but I was 'overusing the stack parameters'.
So maybe your problem isn't at your $.post either, but something else exceeding the stack.
Hope this helps.
[]'s
I use a Greasemonkey script in Firefox to intercept a submit process in order to modify a certain post variable. I save the old submit routine to call it later and overwrite HTMLFormElement.prototype.submit with my interception (modification) function.
The problem I am currently facing is that something drops the post variable post=Submit and calling the (old) submit function after the modification takes me back to the current page.
var intercept_complete = false;
window.addEventListener('submit', function (e) {
e.stopPropagation();
e.preventDefault();
interceptor(e);
}, true);
function interceptor_setup() {
HTMLFormElement.prototype.real_submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = interceptor;
}
function interceptor(e) {
var frm = e ? e.target : this;
if (!interceptor_onsubmit(frm)) {
return false;
}
if (!intercept_complete) {
ModifyAndPost(frm);
return false;
} else {
HTMLFormElement.prototype.real_submit.apply(frm);
return true;
}
}
function interceptor_onsubmit(f) {
return !f.onsubmit || f.onsubmit();
}
function ModifyAndPost(f) {
var attrs = new Array('name', 'type', 'value');
for (var i = 0; i < f.elements.length; i++) {
for (var a = 0; a < attrs.length; a++) {
if (attrs[a] == 'name') {
if (f.elements[i][attrs[a]] == "message") {
var current_message = f.elements[i][attrs[a + 2]];
if (current_message.indexOf("hello") != -1) {
var do_replace = confirm("Detected hello, would you like to replace that with bye?");
if (do_replace) {
f.elements[i][attrs[a + 2]] = current_message.replace("hello", "bye");
}
}
}
}
}
}
PerformSubmit(f);
}
function PerformSubmit(f) {
HTMLFormElement.prototype.real_submit.apply(f);
}
interceptor_setup();
Basically the script works and modifies the post variables successfully but when calling HTMLFormElement.prototype.real_submit.apply(f); to submit the modified form the request is missing the Post=Submit variable and the submit fails.
I tried removing e.stopPropagation() and e.preventDefault() and then it worked sometimes, but still dropped that post variable once in a while.
Would be great if anyone could point me in the right direction on this one. ;)
I'm trying to make a form send its data through AJAX and cancel the event sans jQuery, just for learning native JavaScript, which can never be bad, I figured. Anyway, this code is returning the error:
"Object doesn't support this property or method"
in IE8 at the line where I declare variables s and r in the send() function. I figured the problem must actually be elsewhere? Code works in both Firefox and Chrome, returning no errors. Ideas?
// Function to serialize form
function serialize() {
var a = document.getElementsByTagName('input'), b = '';
for (i = 0; i < a.length; i++) {
b += a[i].name + '=' + a[i].value + '&';
}
return b.substring(0, b.length - 1);
}
// Function to execute when user submits form
function send(evt) {
// Prevent the page from reloading
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
// Declare DOM variables for quick access
var s = document.getElementsByClassName('skicka')[0], r = document.getElementById('return');
// Hides the submit button and return text
s.style.visibility = 'hidden';
r.style.visibility = 'hidden';
// Initialize and send data and request to login.php
var xhr = new XMLHttpRequest();
xhr.open('POST', 'login.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(serialize());
// Check for return value from login.php
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.responseText == true) {
// If response if true, reload page
window.location.reload(true);
} else {
// If response is false, reset form and show response
s.style.visibility = 'visible';
r.style.visibility = 'visible';
r.innerHTML = xhr.responseText;
}
}
};
return false;
}
// Declare event listeners
if (window.addEventListener) {
window.addEventListener('load', function() {
document.forms[0].addEventListener('submit', send, false);
}, false);
} else {
window.attachEvent('onload', function() {
document.forms[0].attachEvent('onsubmit', function() {
send(window.event);
});
});
}
IE8 does not support .getElementsByClassName(). See the Ultimate GetElementsByClassName for a pure JavaScript implementation that will work in IE.