I have this code below working fine in my local PC and local Publish. But when I publish it on another PC as PC Server code below is refresh the page after I click the button log-in.
I also tried the following events e.stopPropagation(), e.stopimmediatepropagation() but it keeps refreshing the page.
JS
$("#frmVerification").on('submit', function (e) {
e.preventDefault();
var elem = $("#frmVerification");
elem.find('.loading').removeClass('hidden');
$.ajax({
url: '../Account/Verify',
data: $(this).serialize(),
type: 'get',
success: function (res) {
console.log(res);
if (res.success) {
setTimeout(function () {
window.location.replace(res.url);
}, 1000);
}
elem.find('.loading').addClass('hidden');
}
});
})
HTML
<form id="frmVerification">
<div class="card-header bg-success-origin">
<div class="card-title">
<label>Login Verification</label>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-8">
<label>Verification Code</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control text-uppercase font-weight-bold" name="VerificationCode" placeholder="ENTER VERIFICATION CODE" disabled />
<span class="input-group-btn">
<button type="button" id="btnResendEmail" class="btn btn-flat rounded-right" disabled><i class="fa fa-refresh"></i></button>
</span>
</div>
</div>
<div class="pr-lg-4 pl-lg-4 col-lg-4 mt-4 text-lg-right text-center">
<button type="submit" class="form-control btn btn-success" disabled>Submit<i class="fa fa-refresh loading hidden"></i></button>
</div>
</div>
<div class="text-danger hidden" style="margin-top: 5px; margin-bottom:-20px;background: #94040b26">
<ul id="divVerificationAlert"></ul>
</div>
</div>
</form>
You Can try this.
<form id="frmVerification" onsubmit="return false">
Related
This is my part of html(ejs) file and I have multiple card forms(such as ID =myContent1, myContent2, myContetn3 ...) they receive ajax data when the i class=icon... is toggled. when the function(toggle) is activated, received ajax data mapping with myContent No. (ex. received ajax data ID 1 with myContent1 and 2 for myContent2 ... so on).
What I want to do is that, ajax data should be loaded when my html file is executed and automatically mapping with my card forms(based on card Id no)
need your kind help.
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="cardHeader3" style="visibility: hidden;">unSaved</div>
<div class="card-body">
<i class="icon-plus icons font-2xl" id="icon3" style="font-size: 5rem !important;margin-left: 46%;cursor:pointer;" onclick="toggler('myContent_3');"></i>
<div id="myContent_3" class="card-title" style="display: none;">
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">sequence</span>
</div>
<input type="text" id="notiSeq_3" name="notiSeq" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">title</span>
</div>
<input type="text" id="title_3" name="title" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-tumblr"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Link</span>
</div>
<input type="text" id="link_3" name="link" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-hand-o-left"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">exposureTime</span>
</div>
<input type="text" id="notiTime_3" name="notiTime" class="form-control" value="" readonly style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="cui-calendar"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Urgency</span>
</div>
<select class="form-control" id="viewYn_3" defaultValue="N">
<option value="N">N</option>
<option value="Y">Y</option>
</select>
<div class="input-group-append">
<span class="input-group-text">
<i class="icon-eye icons"></i>
</span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="button" class="btn btn-primary" onclick ="save('3')">Save</button>
<button type="button" class="btn btn-secondary" onclick="del('3')">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
And This is my part of js file. it currently works with when the card forms are toggled.
function toggler(divId) {
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
$.ajax({
url: GW_URL+'/myRestAPI/get/'+tempId,
type:'get',
contentType: "application/json",
dataType : "json",
cache: false,
success : function(data){
$("#notiSeq_" + tempId).val(data.exposureNo);
$("#title_" + tempId).val(data.title);
$("#link_" + tempId).val(data.link);
$("#notiTime_" + tempId).val(data.exposureTime + " - " + data.exposureTime2);
$("#viewYn_" + tempId).val(data.urgency);
},
error : function(jqXHR, textStatus, errorThrown){
console.log(jqXHR.responseText);
}
});
I am trying to create exception by submiting form using AJAX and exception is also created when button
<button type="button" onclick="submitForm()" class="btn btn-s-md btn-primary saveButton mb-10 "><i class="fa fa-save fa-fw"></i>Save</button>
is clicked and onclick the function function submitForm() is executed.
The problem is that on multiple click of button the form is submitted as well which i don't want.
Below is my form
<form asp-action="CreateException" asp-controller="Attorney" method="post" role="form" enctype="multipart/form-data" id="attorneyExceptionForm">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-3 col-lg-3 col-sm-12">
<div class="form-group">
<label asp-for="Description" class="control-label ">Description<span class="requAstrik">*</span></label>
<input asp-for="Description" class="form-control " />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-12">
<div class="form-group">
<label asp-for="Exception" class="control-label ">Exception<span class="requAstrik">*</span></label>
<select id="slctExceptionA" class="form-control select2" asp-for="Exception" style="color: #444 !important;width:100%;" asp-items="#(new SelectList(#ViewBag.ExcsList, "ExcId", "ExcDescription" ))"></select>
<span id="attorneyExceptionError" asp-validation-for="Exception" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="button" onclick="submitForm()" class="btn btn-s-md btn-primary saveButton mb-10 "><i class="fa fa-save fa-fw"></i>Save</button>
</div>
</form>
Below is my js function
<script>
function submitForm() {
debugger;
var datastring = $("#attorneyExceptionForm").serialize();
var validForm = $("#attorneyExceptionForm").valid();
if (!validForm) { return false; }
$.ajax({
type: "POST",
url: "/Attorney/CreateAttorneyException",
data: datastring,
dataType: "json",
success: function (data) {
debugger;
if (data.success.Result) {
debugger;
$("#myModal5").modal('hide');
var grid = $("#AttorneyExceptionGrid").dxDataGrid('instance');
grid.refresh();
showNotification("Exception saved successfully", "success");
}
else {
debugger;
showNotification(data.success.MessageBody + " is required ", "warning");
}
},
error: function (data) {
debugger;
showNotification("Please input the required field", "warning");
}
});
}
</script>
You can disable the button in the first click and enable it again when the ajax response arrive.
<button type="button" onclick="submitForm(this)" class="btn btn-s-md btn-primary saveButton mb-10 "><i class="fa fa-save fa-fw"></i>Save</button>
function submitForm(e) {
$(e).prop("disabled", true);
//more code
}
And enable it again in the success or error ajax method
$(e).prop("disabled", false);
I have a piece of HTML that looks like this
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
Above that I have a button that looks like this
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
Once that button is pressed I run a function to get the #imageContent div and append a new row with the same as before.
<script type="text/javascript">
function add_fields() {
var div = document.getElementById("imageContent");
div.insertAdjacentHTML('afterend','<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
</script>
This works as expected and adds a new row into the imageContent div.
See picture. If I click Select Image, it launches a modal window with all of my images, and when I select one, it runs this piece of js.
onInsertCallback: function (obj){
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
}
The problem I am having is that it does not get the correct input area to insert the value into, and instead always updates the first element. The full js code looks like this.
$(document).ready(function() {
jQuery(document).ready(function() {
/** Keep track of which modal button was clicked. **/
var currentModalBtn;
jQuery('.modal-btn').click(function() {
currentModalBtn = jQuery(this);
});
jQuery('.laradrop').laradrop({
onInsertCallback: function(obj) {
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
},
onErrorCallback: function(jqXHR, textStatus, errorThrown) {
// if you need an error status indicator, implement here
//Swal here
swal({
title: 'Error!',
text: 'An Error Occurred',
type: 'error',
showConfirmButton: false,
showCancelButton: true
});
},
onSuccessCallback: function(serverData) {
//
}
});
});
});
My question is, how can I ensure that I get the right input field that the button was clicked on to update that fields value and make sure the others stay as they were.
move var currentModalBtn; outside the ready so it is available to the callback(s)
Also have only one
$(document).ready(function() {
jQuery(document).ready(function() {
you have a mess of jQuery/$ and so on - this will likely work better:
function add_fields() {
var $div = $("#imageContent");
$div.append('<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
var currentModalBtn;
$(function() {
/** Keep track of which modal button was clicked. **/
$("#imageContent").on("click",".modal-btn", function() {
currentModalBtn = $(this);
});
$("#test").on("click",function() {
currentModalBtn.closest('.input-group').find('input.file-src').val("hello");
$('#myModal').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
<button type="button" id="test">
click
</button>
I have the following code snippet:
(document)
.on("submit", ".edit-employee-form", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
method: $(this).attr("method"),
dataType: "html",
context: this,
data: $(this).serialize(),
success: function (response) {
p = $(this).parent();
p.prevAll('#first-name').html($(this).find("#first_name").val());
p.prevAll('#last-name').html($(this).find("#last_name").val());
p.prevAll('#email').html($(this).find("#email").val());
p.prevAll('#remain_case').html($(this).find("#remain_case").val());
$(this).parent().hide();
console.log('yay');
},
error: function (response, error) {
console.log("ERROR");
console.log(response);
console.log(error);
}
});
}
);
What it does is it submits a form to edit a particular employee (a list is displayed on the page) and then updates the html to reflect the changes the user submitted.
My problem is that some of the employees are also added via ajax calls, so their corresponding list elements are added dynamically to the html. I don't seem to be able to access their divs with id first-name, last-name, email etc. Any advice on how I can select divs which have been added dynamically?
I'm sorry for this being an image but I don't seem to be able to copy off the chrome console. The second element is added dynamically.
<div class="container firm-employees">
<div class="row">
<div class="col-lg-3 table-header">Name</div>
<div class="col-lg-2 table-header">Surname</div>
<div class="col-lg-3 table-header">E-Mail</div>
<div class="col-lg-1 table-header">Cases</div>
<div class="col-lg-3 table-header">Options</div>
</div>
<div class="row manage-user-row">
<div class="col-lg-3" id="first-name">Gray</div>
<div class="col-lg-2" id="last-name">Sawyer</div>
<div class="col-lg-3" id="email">masakotypu#hotmail.com</div>
<div class="col-lg-1" id="remain_case">1</div>
<div class="col-lg-3">
<button type="button" id="205" class="btn btn-default btn-xs edit-user-button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit User
</button>
<a href="edit/22">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
Edit Secretaries
</button>
</a>
</div>
<div id="ed-205" class="edit-employee-box">
<form id="ef-205" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/205">
<div class="row">
<div class="col-lg-3">
<label for="first_name" class="form_label">First Name</label>
<input type="text" name="first_name" value="Gray" id="first_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="last_name" class="form_label">Last Name</label>
<input type="text" name="last_name" value="Sawyer" id="last_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="email" class="form_label">E-Mail</label>
<input type="text" name="email" value="masakotypu#hotmail.com" id="email" class="form-control">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="phone" class="form_label">Phone Number</label>
<input type="text" name="phone" value="+899-67-1063253" id="phone" class="form-control">
</div>
<div class="col-lg-3">
<label for="remain_case" class="form_label">Remaining Cases</label>
<input type="text" name="remain_case" value="1" id="remain_case" class="form-control">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<br>
<input type="submit" class="btn btn-success btn-md" value="Update User">
<a href="edit/22">
<button type="button" class="btn btn-info btn-md">
Reset Password
</button>
</a>
</div>
<div class="col-gl-3">
</div>
</div>
</form>
</div>
</div>
<div class="row manage-case-row"><div class="col-lg-3" id="first-name">Evan</div><div class="col-lg-2" id="last-name">Thompson</div><div class="col-lg-3" id="email">pubazof#hotmail.com</div><div class="col-lg-1" id="remain_case">2</div><div class="col-lg-3"><button type="button" id="206" class="btn btn-default btn-xs edit-user-button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit User</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Edit Secretaries</button></div></div><div class="edit-employee-box" id="ed-206"><form id="ef-206" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/206"><div class="row"><div class="col-lg-3"><label for="first_name" class="form_label">First Name</label><input type="text" name="first_name" value="Evan" id="first_name" class="form-control"></div><div class="col-lg-3"><label for="last_name" class="form_label">Last Name</label><input type="text" name="last_name" value="Thompson" id="last_name" class="form-control"></div><div class="col-lg-3"><label for="email" class="form_label">E-Mail</label><input type="text" name="email" value="pubazof#hotmail.com" id="email" class="form-control"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><label for="phone" class="form_label">Phone Number</label><input type="text" name="phone" value="+927-10-4155477" id="phone" class="form-control"></div><div class="col-lg-3"><label for="remain_case" class="form_label">Remaining Cases</label><input type="text" name="remain_case" value="2" id="remain_case" class="form-control"></div><div class="col-lg-3"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><br><input type="submit" class="btn btn-success btn-md" value="Update User"><button type="button" class="btn btn-info btn-md">Reset Password</button></div><div class="col-gl-3"></div></div></form></div></div>
</div>
Your code should be sure the order of finished ajax calls because it's too fast to follow with human eyes. If when appending ajax call is not completed, you cannot select those elements using even element id.
To do so, you should put ajax function calls in "success handler".
if Number one is success then Number two in the one's success handler, and Number three in two's success handler, and so on...
The simple solution is to use PROMISE to get all of ajax relative functions in order.
Please refer to the link : https://api.jquery.com/promise/
To check the element is successfully appended in time, check out the console with 'console.info or console.log" or something like that. if it's length is 0, then the appending ajax call is not yet completed.
I have a Jquery function to activate and deactivate forms based off the current form. When I click on the submit button I can get the value of the activeform on the page load if I have it set to ID, but nothing off the second form. When I set it to class it doesn't seem to load any at all and I get no alert back when I click the submit. My jquery is as such:
<script>
$(document).ready(function() {
var activeform = "register";
$("#loginlink").click(function(e) {
var activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
})
$("#registerlink").click(function(e) {
var activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
})
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
</script>
And the code for my forms:
<p>
<form id="register">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for email><i class="fa fa-envelope"></i> Email</label>
<input class="form-control" type="text" id="email"></div>
<div class="col-xs-4"><i class="fa fa-info-circle" title="You may be notified of delayed or denied payments." data-toggle="tooltip"></i></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for submit><i class="fa fa-info" data-toggle="tooltip" title="By Registering you Agree to be Bound by our Terms of Service"></i></label>
<button type="button" class="btn btn-success form-control" class="submit">Register</button></div>
<div class="col-xs-4"></div>
</div>
</form>
<form id="login" style="display:none;">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<br />
<button type="button" class="btn btn-success form-control" class="submit">Login</button></div>
<div class="col-xs-4"></div>
</div>
</form>
</p>
Login | Register
Last but not least. Here's a fiddle. :)
https://jsfiddle.net/rm6j5da9/2/
You were recreating the activeform variable every time in the click event. remove the var keyword. you already declared that as a global variable inside the document ready scope.
$(function(){
var activeform = "register";
$("#loginlink").click(function(e) {
activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
});
$("#registerlink").click(function(e) {
activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
});
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
Also you need to make sure that you have the submit css class on both the login and register buttons
Here is a working sample