Featherlight hide div on Close - javascript

I'm trying to create a preview screen with data submitted, and display it in Featherlight Lightbox.
I have the following sample codes.
jQuery(document).ready(function() {
//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {
var pa_firstname= jQuery('input[name="pa-[name_first]"]').val();
var pa_lastname= jQuery('input[name="pa-[name_last]"]').val();
if (pa_firstname == null || pa_firstname == '') {
alert('Cannot be empty');
return false;
} else {
jQuery('.LightBox').empty();
jQuery('.LightBox').append('First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname);
//alert('done');
}
jQuery.ajax({
url : padvisor_ajax.ajax_url,
type : 'POST',
dataType: 'json',
data : {
action: 'padvisor_test_ajaxcall_lightbox',
pa_first_name: pa_firstname,
pa_last_name: pa_lastname
},
success: function (data) {
jQuery.featherlight(jQuery('.LightBox'), {});
jQuery('.LightBox').toggle();
}
});
return false;
});
And then I have the following html codes to create 2 fields, a submit button and a preview button:
<form id="pd_test">
<span id="pa-[name_first]" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-[name_first]" id="pa-[name_first]" value=""/>
</span>';
<span id="pa-[name_last]" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-[name_last]" id="pa-[name_last]" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button value="preview" class="OpenLightBox">Preview</button></form>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">This is the content, let the content dwell here</div>
I'm able to show to featherlight box with my DIV when i use .toggle, however I cannot make sense of how I can hide the <div> when i close the featherlight light box.
Can anyone guide me on how to hide the DIV when the featherlight box is close, and let me know whether this is the right way to do?
My Objective... to collect input from the form fields, send via ajax to php to process it, and on success, display in a preview light box where i can have a close button and a submit button. The close button can close it, but the submit button will have the same function as the form submit button.
Problem 1: I need to toggle Hide when the feather light closes.
Problem 2: When the featherlight lightbox closes now, and i click on the preview button again, the DIV only calls empty but it doesn't call the .append to put in the value.

You needed to pass the content properly to featherlight and also did not need to toggle the element since featherlight will do that on the close event.
HTML
<span id="pa-name_first" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-name_first" id="pa-name_first" value=""/>
</span>
<span id="pa-name_last" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-name_last" id="pa-name_last" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button type="button" class="OpenLightBox">Preview</button>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">
<span id="content"></span>
</div>
jQuery
//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {
var pa_firstname= jQuery('input[name="pa-name_first"]').val();
var pa_lastname= jQuery('input[name="pa-name_last"]').val();
if (pa_firstname == null || pa_firstname == '') {
alert('Cannot be empty');
return false;
} else {
var content = 'First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname+'';
jQuery('#content').html("");
jQuery('#content').html(content);
jQuery.featherlight('#content', {});
}
});
Working JSFiddle: https://jsfiddle.net/rdawkins/9vktzw88/

Related

Toggle visibility of buttons on forgotten required form fields

I have several forms on my profile page. Each form has its own submit button. When a user clicks the submit button, I want the button to disappear and show a spinner.
That works fine. The issue that I am running into, is that if the user forgets to fill-out a required field, the button does not return visible. The spinner stays visible. And the page would have to be reloaded.
Jquery is not intercepting the form submission (though I am open to that if it will fix the issue), it is only toggling the spinner and button visibility.
Any help?
$("#profile-loading").hide();
$("#social-loading").hide();
$(document).ready(function () {
$("#btn_profile").on("click", function (e) {
$("#profile-loading").show();
$("#btn_profile").hide();
checkForm('#formProfile', "#btn_profile", "#profile-loading");
});
$("#btn_social").on("click", function (e) {
$("#social-loading").show();
$("#btn_social").hide();
checkForm('#formSocialMedia', "#btn_social", "#social-loading");
});
});
//Check the passed in form and toggle the buttons and the loading spinner
function checkForm($formid, $buttonid, $spinnerid) {
var emptyFields = $('#formProfile .required').filter(function () {
return $(this).val() === "";
}).length;
if (emptyFields === 0) {
console.log("no emptyFields");
} else {
console.log("emptyFields");
return false;
}
//I tried looping through each form field, but can't seem to get the form targeted.
// $($formid + '.required').each(function () {
// console.log("checkForm");
//
// var self = $(this)
// if (self.val() === '') {
// // empty
// console.log("empty");
// } else {
// // not empty
// console.log("NOT empty");
// }
// });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="somelink" id="formProfile">
<input id="name" name="name" type="text" required="required">
<input id="url" name="url" type="text" required="required">
<i class="fas fa-spinner fa-2x fa-spin" id="profile-loading"></i>
<button id="btn_profile" type="submit">Save Changes</button>
</form>
<form method="post" action="someotherlink" id="formSocialMedia>
<input id="facebook" name="facebook" type="text" required="required">
<input id="instagram" name="instagram" type="text" required="required">
<i class="fas fa-spinner fa-2x fa-spin" id="social-loading"></i>
<button id="btn_social" type="submit">Save Changes</button>
</form>
There are several issues with your code, but the most important one is that you are retrieving required form elements using a required class, which does not seem to be used in your html. Instead, you can retrieve required form elements using something like
$('#formProfile [required]')
which returns all subelements of formProfile which have the required attribute. You have another issue in that the id of the form is hard-coded. Instead of hard-coding it, use the variable $formid.
$($formid + ' [required]')
Try reordering your scripts, do validation first and check if it's pass. Make sure the checkForm returns true if valid.
$("#btn_profile").on("click", function (e) {
if (checkForm('#formProfile', "#btn_profile", "#profile-loading")) {
$("#profile-loading").show();
$("#btn_profile").hide();
}
});
$("#btn_social").on("click", function (e) {
if (checkForm('#formSocialMedia', "#btn_social", "#social-loading")) {
$("#social-loading").show();
$("#btn_social").hide();
}
});

How to show only one reply form in the blog?

I am building a blog app that allows thread comments. The users can reply to other comments by clicking the "reply" button beside the particular comment. By doing that, a comment form will show up, and the user can type in his reply.
I am using jQuery to build this functionality, here is my code:
$(document).ready(function(){
$(".comment-reply").bind("click.a", function(){
// hide all forms
$(".comment-form-reply").hide();
// bind buttons with "click" events again, because one of them is unbinded
$(".comment-reply").bind("click.c", function() {
$(this).parent().siblings(".comment-form-reply").show();
});
// show the comment form for current item
$(this).parent().siblings(".comment-form-reply").show();
// unbind current button with "click" event to prevent multiple forms
$(this).unbind(".a");
});
$(".comment-reply").bind("click.b", function(){
event.preventDefault();
});
});
When I click the first and then the second button, it works well. But if I click the first button again, the two forms are displaying at the same time. I think there should be something wrong here, but I am not able to figure it out.
I can see one mistake. You forgot to define "event" as a parameter:
$(".comment-reply").bind("click.b", function(){
event.preventDefault();
});
Right way:
$(".comment-reply").bind("click.b", function(event){
event.preventDefault();
});
You are talking about a reply-button, so I am going to think you are talking about the other buttons with the same class ".comment-reply".
This example should do exactly what you are looking for with easy code.
$(document).ready(() => {
$(".comment-reply").on("click", evt => { // Use "submit" instead of "click" for form submition !
// Prevent site from updating (this is only needed for submit-buttons inside a form)
evt.preventDefault();
// Define varibles
var elmt = $(evt.target),
elmt_sib_c = elmt.parent().siblings(".comment"),
elmt_sib_cfr = elmt.siblings(".comment-form-reply"),
elmt_sib_exit = elmt.siblings(".comment-form-reply-exit");
if (elmt_sib_cfr.css("display") === "none") {
// Show reply-field
elmt_sib_cfr.show();
elmt_sib_exit.show();
} else if (elmt_sib_cfr.val() != "") {
// Hide reply-field
elmt_sib_cfr.hide();
elmt_sib_exit.hide();
//*//
console.log(
"Posted to DB at comment: '",
elmt_sib_c.text(),
"' with content of: '",
elmt_sib_cfr.val(),
"'"
);
//*//
} else if (elmt_sib_cfr.val() == "") {
elmt_sib_cfr.focus()
}
// Empty reply-field
elmt_sib_cfr.val("");
});
//
$(".comment-form-reply-exit").on("click", evt => {
// Define varibles
var elmt = $(evt.target),
elmt_sib_cfr = elmt.siblings(".comment-form-reply");
function hide () {
// Hide reply-field
elmt_sib_cfr.hide();
elmt.hide();
}
if (elmt_sib_cfr.val() == "") {
hide()
} else if (confirm("Are you sure?")) {
hide()
}
});
});
.comment-form-reply {
display: none;
margin-top: 10px;
margin-bottom: 5px;
}
.comment-form-reply-exit {
display: none;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="comment">This is comment '0'.</div>
<form action="/" method="post">
<input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button>
<br>
<button type="submit" class="comment-reply">Reply</button>
</form>
</div>
<br><br>
<div>
<div class="comment">This is comment '1'.</div>
<form action="/" method="post">
<input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button>
<br>
<button type="submit" class="comment-reply">Reply</button>
</form>
</div>
<br><br>
<div>
<div class="comment">This is comment '2'.</div>
<form action="/" method="post">
<input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button>
<br>
<button type="submit" class="comment-reply">Reply</button>
</form>
</div>
<br><br>
<div>
<div class="comment">This is comment '3'.</div>
<form action="/" method="post">
<input type="textfield" placeholder="My reply ..." class="comment-form-reply"><button type="button" class="comment-form-reply-exit">Abort</button>
<br>
<button type="submit" class="comment-reply">Reply</button>
</form>
</div>

Input Box Values Disappear on Button Click

I am just starting out with JQuery for asp.net core mvc.
I have a section of a page comprising a list of items linked to the main subject. When an 'edit' button is clicked against one of the list items, a hidden section (fieldset) is displayed and populated with the values of that list item. Other inputs on the page are disabled and the user can edit the item. All works fine.
However, when finished editing, the user clicks a 'submit' button (within the previously hidden fieldset) and the idea is to submit the edited data via ajax and, if accepted, to update the list. Ajax, etc. is not (yet) the problem.
When the user clicks the 'submit' button (coded as type="button"), the values in the edited section appear to have been cleared and are returned as spaces or nulls. It only seems to apply to this fieldset, as (disabled) values from the remainder of the document can be retrieved (just for testing purposes).
Can anyone tell me what is going on here and how to preserve these edited values, please?
#**** Drop-down section for editing Admissions ****#
<fieldset id="AdmissionsEditFieldset" class="app-edit-main-fieldset" hidden>
<legend id="AdmissionsEditLegend" class="app-edit-fieldset-legend">Editing Admission</legend>
<div class="row">
<div class="col-sm-12" style="padding-left: 5%; padding-right: 5%">
<div class="form-group">
<strong><label>Institution:</label></strong>
<span class="app-label-to-input-sep">
<input id="admId" name="aId" type="text" class="form-input app-can-disable" asp-for="Admission.Id" hidden />
<select id="admPlace" name="aPlace" type="text" class="app-can-disable" asp-items="Model.PlaceOfDetentionDd" asp-for="Admission.PlaceId"></select>
</span>
<strong><label class="app-input-fld-sep">Date Admitted:</label></strong>
<span class="app-label-to-input-sep">
<input id="admDate" name="aDate" type="text" class="form-input app-can-disable" asp-for="Admission.DateAdmitted" style="width: 5%" />
</span>
<strong><label class="app-input-fld-sep">Sequence:</label></strong>
<span class="app-label-to-input-sep app-can-disable">
<input id="admSeq" name="aSeq" type="text" class="form-input" asp-for="Admission.Seq" style="width: 5%" />
</span>
<span>
<button id="admSubmitBtn" class="btn btn-sm btn-primary app-adm-edit-btn" type="button">Submit</button>
<button id="admCancelBtn" type="button" class="btn btn-sm btn-danger app-button-to-button-sep">Cancel</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding-left: 5%; padding-right: 5%">
</div>
</div>
And this is the JavaScript/JQuery
$(document).ready(function () {
$('.app-adm-edit-btn').click(function (event) {
//*** Prevent default button actions
event.preventDefault();
// btn has format 'editN[N...]'
var btn = event.target.id;
var sid = btn.substring(4);
//*** Un-hide the editing drop-down
$('#AdmissionsEditFieldset').removeAttr('hidden');
//*** Copy values from the relevent line in the table to the editing drop-down
$('#admId').val($('#ident' + sid).text());
$('#admPlace').val($('#placeN' + sid).text());
$('#admDate').val($('#dateAdm' + sid).text());
$('#admSeq').val($('#seq' + sid).text());
//*** Set the section legend
$('#AdmissionsEditLegend').text('Editing an Admission');
//*** Disable other sections
DisableFieldsets(); // Works OK - makes no difference if commented out
//*** Focus the first input box
$('#admPlace').focus();
}); // $('.app-adm-edit-btn').click
/*----------------------------------------------------------------------------------
Admissions Submit button click handler
----------------------------------------------------------------------------------*/
$('#admSubmitBtn').click(function (event) {
//*** Prevent default button actions
event.preventDefault();
// Just to verify nothing wrong with JSON.stringify
var id = $('#admId').val();
var placeId = $('#admPlace').val();
var seq = $('#admSeq').val();
var dateAdmitted = $('#admDate').val();
var court = $('#Court').val();
// Not integrated, so that I can display the values
var jsn = JSON.stringify({
Id: $('#admId').val(),
PlaceId: $('#admPlace').val(),
Seq: $('#admSeq').val(),
DateAdmitted: $('#admDate').val()
});
$.ajax({
url: "api/EditAdmissionApi",
method: "POST",
contentType: "application/json",
data: jsn,
success: function (data) {
alert("Ajax Success"); //TODO
}
});
alert(jsn);
//TODO
});
/*------------------------------------------------------------------------
Admissions Cancel button click handler
--------------------------------------------------------------------------*/
$('#admCancelBtn').click(function (event) {
//*** Prevent default button actions
event.preventDefault();
});
}); // $(document).ready
/*===========================================================================
Helper Functions
===========================================================================*/
/*---------------------------------------------------------------------------
DisableFieldsets Helper function to disable fieldsets while input of linked
items takes place
---------------------------------------------------------------------------*/
function DisableFieldsets() {
DoDisableFieldsets('#MainFieldset');
DoDisableFieldsets('#AdmissionsFieldset');
DoDisableFieldsets('#ChildrenFieldset');
DoDisableFieldsets('#SubmitButtonsNonFieldset');
}
function DoDisableFieldsets(id) {
var xId = $(id);
$('.app-can-disable', xId).attr('disabled', 'disabled');
$(xId).addClass('app-disabled-background');
}
Yes it does and many thanks for the suggestion, mj.
Trying to see why and testing alternatives brought me to the real issue, however. I have to confess that it was one of those stupidities that you can stare at for hours without seeing. Still I will confess, in case it helps anyone else.
I had given the Edit buttons in the list a 'dummy' class name to make selection easier. Then I had inadvertently copied and adapted the button html to be the Submit button following edit, without deleting the class. So both the Edit and Submit button handlers seemed to be called, which was causing havoc (I have not yet worked out why this was not just producing the unedited text in the second handler - but life's too short). So a dumb question on my part - sorry for wasting everyone's time.
The construct $('#admId').val($('#ident' + sid).text()); works fine now.

How to design forget password Hyperlink

I am going to design the "forget Password" Link
in loginPage.jsp I have :-
<form name="testForm" action="passwordValidationController" method="post">
User Id: <input type="text" name="userId" id="userId"><br>
.
.
.
</form>
Click for forget password
.
.
.
forgetPasswordController.java
doPost(.........)
{
//I want to get the "userId" (textbox value) here
}
My question is that:- how can I get the value of "userId" (textbox) of LoginPage.jsp in the "forgetPasswordController" (servlet) when I click on the "Click for forget password" hyper link?
Please help me .....
#R Chatterjee While clicking the hyperlink, open dialog box and show the form to get the values like login id, emailid and secret question with answer. Finally when they clicking button send those values by jQuery ajax. All yuo need to do is include the jQuery plugin. Here your html may looks like this,
Forgetten your Password?
This will open hidden dialog form,
function openForm() {
//This Script is used for load pop up div to forgot password screen
$("#dialog").css({
"display" : "block"
});
$("#dialog").dialog({
minWidth : 600,
modal : true
});
}
This function will show the dialog box div,
<div id="dialog" title="Forgot Password" style="display: none;">
<input type="text" name="userLogin" id="userLogin" class="text-box">
<input type="text" name="userEmailId" id="userEmailId"
class="text-box">
<input type="button" value="Send" class="btn"
onclick="sendEmail();" />
</div>
jQuery ajax to send parameters to servlet,
function sendEmail() {
var loginId = $('#userLogin').val();
var emailId = $('#userEmailId').val();
if (loginId != '' && emailId != '' ) {
$.ajax({
url : "forgetPasswordController&userLogin=" + loginId
+ "&userEmailId=" + emailId,
async : false,
dataType : "json",
success : function(data) {
$('#userLogin').val('');
$('#userEmailId').val('');
}
});
return false;
} else {
//Display error message
}
}
By the way this is one kind of implementation. You can grab some idea from this.

Button is not visible because of hidden div

I have this HTML code where I have a div and a button.
Now, with jQuery I made the div "hidden" and it will only show when you have selected the correct <option>. But now the button is only visible if the div is too.
HTML:
<div id="great">
Do you like the netherlands?
<input type="text" id="greatBox" value="Why..."
</div>
<input type="button" id="submitbutton" value="Submit">
and the JS/Jquery looks like this
(its spread over the file, the rest is not needed (i guess))
$('#great').hide()
$("#selectlist").change(function(){
var value = $(this).val();
if ($(this).val() == "netherlands") {
$('#great').slideDown(750)
$('#other').hide()
}
if ($(this).val() == "other") {
$('#great').hide()
}
});
There is not yet any jQuery/javascript bound to the button.
You need to close <input type="text" id="greatBox" value="Why..." >
Because it's open the div never gets closed and everything after it will be hidden.

Categories