I have a login form with a link to a Forgot password, when this is clicked the login div hides using fadeOut() and then the Forgot Password div is shown using fadeIn().
But when I hade a child element to the Forgot password with the same class as in the div that's getting hidden the Forgot password doesn't show up at all.
Function that hides login and displays forgot password
function forgotPassword() {
$('.login, .register, .or').fadeOut(500).promise().then(function() {
$('.forgotpassword').fadeIn(500);
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box account login">
<div class="content">
<h3>Login</h3>
<div id="errorLogin">
<p id="errorLoginMsg"></p>
</div>
<label for="email2">
Email
<input name="email2" id="email2" placeholder="Email...">
</label>
<label for="pw3">
Password
<input name="pw3" id="pw3" type="password" placeholder="Password...">
</label>
<button id="submitLogin" disabled="true">Login</button>
<a id="forgotPassword_btn" onClick="forgotPassword()">Forgot password? Click here</a>
</div>
<div class="bg blue"></div>
</div>
<div class="box account forgotpassword" style="display:none;">
<div class="content">//Adding this class breaks the script
<p>Forgot password</p>
</div>
<div class="bg blue"></div>
</div>
Just change the place of style="display:none" to child div means it should be like this
<div class="box account forgotpassword"><div class="content" style="display:none;">//Adding this class breaks the script
<p>Forgot password</p></div><div class="bg blue"></div></div>
After a lot of search it turned out to be the CSS which for some reason didn't give a full height to the div that was going to be displayed.
I'd like to add that you shouldn't use onClick="", instead you should use an eventListener or if you can use jQuery's .click() function.
You could pass a callback function to .fadeIn() and .fadeOut() functions. Link here.
For example:
function forgotPassword() {
// fadeOut with callback
$('.login').fadeOut(500, function(){
// then...
$('.forgotpassword').fadeIn(500);
});
};
Related
Im trying addClass to wizard-step when button clicked, but still no luck :/
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user"></i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" onclick="step0(this);" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
JavaScript:
<script>
function step0(element) {
$(element).prev('div').find('.wizard-step').addClass('wizard-step-active');
}
</script>
Can anyone please help me !
prev is used to retrieve a previous sibling element. The .wizard-step you want to target is a child of a sibling to a parent of the button being clicked. As such you need to use closest() instead.
Also note that onclick (and all the other onX attributes) are not good practice and should be avoided. As you're already using jQuery you can attach your event unobtrusively, like this:
jQuery($ => {
$('.btn').on('click', function() {
$(this).closest('.wizard-steps').find('.wizard-step').addClass('wizard-step-active');
});
});
.wizard-step-active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user">User icon</i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
Alternatively, instead of calling find() from the shared parent, you could select the form and use prev():
$('.btn').on('click', function() {
$(this).closest('.wizard-content').prev('.wizard-step').addClass('wizard-step-active');
});
Either is fine, it just depends on how your HTML is structured as to which fits best for this use case.
You don't want the div immediately before the button, but the one containing the relevant item(s). So instead of $(element).prev('div') write $('.mt-4').
Your this parameter is referring your button, not your div.
You can do this without Jquery, just using your function like this:
function step0() {
const element = document.getElementsByClassName('wizard-step');
element.classList.add('wizard-step-active');
}
So, you don't need to pass this as a parameter to step0 function.
I am not able to perform the auto suggestion functionality on divs with contenteditable attribute. Also when I write mass-autocomplete to divs, it is showing an error message like "mass-autocomplete not allowed on element div".
The following is code I have written. Could you please give the solution for this?
$scope.getClients = {
suggest: suggest_Client
};
<div class="row">
<div class="col-xs-12">
<div class="marginTB15" mass-autocomplete>
<div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
</div>
Seems that you using the mass-autocomplete directive incorrectly, it need so have an <input> tag as a element. Consider just having 2 blocks inside your div - one is a normal autocomplete:
<div mass-autocomplete>
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>
while another one is a static end result of the autocompletion - say <div>{{user.communities}}</div>. And those two will be toggled by click for example. By this you wont' need content-editable at all.
So full code may look like this:
//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
$scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
suggest: suggest_Client,
on_select:toggleWidgetState //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete
//template
<div class="row">
<div class="col-xs-12">
<div mass-autocomplete ng-show="stateEdit">
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
<ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
</div>
<div ng-show="!stateEdit" ng-click="toggleWidgetState()">
{{getNetworks}}
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
im developing a web application and i am looking to return some error messages via ajax when there is error or success.
i have the ajax script working fine it returns and error or success however my issue is when returning the data i want it to remove the div #webapp_recovery from the dom all together not just hide it once its removed i want to show #webapp_notification
This is the form to submit a request via ajax
<div id='webapp_recovery' class='login-container'>
<div class='page-content'>
<div class='content'>
<div class='panel panel-body login-form'>
<div class='text-center'>
<div class='icon-object border-slate-300 text-slate-300'><i class='icon-lock2'></i></div>
<h5 class='content-group'>Reset Password <small class='display-block'>Reset Your Account Password</small></h5>
</div>
<form method='POST' name='webapp_auth_recover' id='webapp_auth_recover' class='webapp_auth_recover webapp_authentication_val3'>
<div class='form-group has-feedback has-feedback-left'>
<input type='password' id='webapp_auth_password1' name='webapp_auth_password1' class='form-control required' placeholder='New Password' autocomplete='off'>
<div class='form-control-feedback'>
<i class='icon-lock2 text-muted'></i>
</div>
</div>
<div class='form-group has-feedback has-feedback-left'>
<input type='password' name='webapp_auth_password2' class='form-control required' placeholder='Confirm Password' autocomplete='off'>
<div class='form-control-feedback'>
<i class='icon-lock2 text-muted'></i>
</div>
</div>
<div class='form-group'>
<button type='submit' class='btn btn-primary btn-block'>Update Password <i class='icon-circle-right2 position-right'></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
this is the error message i wish to show
<div id='webapp_notification' class='login-container'>
<div class='page-content'>
<div class='content'>
<div class='panel panel-body login-reset'>
<div class='text-center'>
<div class='icon-object border-slate-300 text-slate-300'><i class='icon-warning22'></i></div>
<h5 class='content-group'>Systems Error <small class='display-block'>Erros have been found</small></h5>
</div>
<div class='form-control-static'>
<p>errors have been detected</p>
</div>
</div>
</div>
</div>
i have tried the following but they dont seem to work
$("#webapp_recovery").hide(); //as it says hides the div
$("#webapp_recovery").remove(); //this only removes the single div not all inside
is this at all possible or is there another method for returning a new div for message and removing the old
Try jquery replaceWith function
Here's a sample fiddle
https://jsfiddle.net/gianoneil/zofm4qx6/
say, your error div is hidden on page load, then
here's how it's gonna look like
$('#webapp_recovery').replaceWith(
$('#webapp_notification').show()
);
try playing with jQuery replaceWith, show, & hide functions, and you should be able to accomplish your mission :) have fun
$('#webapp_recovery').remove();
Will remove the div and all its children however if you want to remove all elements yourself you can do this:
$('#webapp_recovery *').remove();
$('#webapp_recovery').remove()
Remove should delete the element as well as contents. This is from the JQ api: "Use .remove() when you want to remove the element itself, as well as everything inside it.".
So I would use the following if your webapp_notification div already exists in the DOM:
$("#webapp_recovery").remove();
$("#webapp_notification").show(); //hide this initially.
Otherwise, if you are removing the old and adding the new, you could use something like:
$("#webapp_recovery").after($("#webapp_notification")).remove();
Using
$("#webapp_recovery").children().hide();
$("#webapp_recovery").hide();
will hide the div and the elements inside it.
This method doesn't use jQuery, if the parent element id is webapp_recovery:
var tmp=document.getElementById("webapp_recovery");
tmp.parentNode.removeChild(tmp);
I have a method from where I need to remove the current div with it's element on clink. But it's not doing anything. I have searched goggle for it and applied various thing but no result. Can anyone please help me on this please?!!! Here are my code below ::
my div where my elements and remove link are stated >>>
<div class="col-xs-4 pNorPpl" id="pPeople">
<div class="form-group">
<label for="participatedPeopleName"><g:message code="sl" default="সদস্যের নাম" /></label>
<g:textField id="participatedPeopleName" name="participatedPeopleName" class="form-control"/>
<a onclick="addAnotherNormalPeople()">Add More</a> ||
<a onclick="removeThisMember()">Remove</a>
</div>
</div>
my remove function >>>
function removeThisMember(){
$(this).closest('.pNorPpl').remove();
}
The context of this does not carry through when you use on* attributes. Instead you need to pass it:
<a onclick="removeThisMember(this)">Remove</a>
function removeThisMember(el) {
$(el).closest('.pNorPpl').remove();
}
Or you can attach your event via jQuery:
Remove
$('.pNorPpl').on('click', '.remove-link', function(e) {
e.preventDefault();
$(this).closest('.pNotPpl').remove();
});
Try with this solution:
http://jsbin.com/tuniyucuki/1
HTML
<div class="col-xs-4 pNorPpl" id="pPeople">
<div class="form-group">
<label for="participatedPeopleName"><g:message code="sl" default="সদস্যের নাম" /></label>
<g:textField id="participatedPeopleName" name="participatedPeopleName" class="form-control"/>
<a onclick="addAnotherNormalPeople()">Add More</a> ||
<a class="removeFromHere" >Remove</a>
</div>
</div>
JAVASCRIPT
$(document).ready(function(){
$('.removeFromHere').click(function(){
$(this).closest('.pNorPpl').remove();
})
})
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.