How can i remove a div and its contents from the DOM - javascript

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);

Related

Javascript keeps modal hidden

I'm having 2 small issues with some JS below involving a modal and cloning/appending an image:
A button click opens the modal, the modal contains a search bar which populates the content with images. When an image is clicked, it's cloned and appended into another div (outside of modal on the main page) and the modal is closed.
After this is done one time, the button click no longer opens the modal again. How can I alter so that the appending of the images closes the modal but it can be re-opened?
Also, once the image is appended to a new div, if I click it it disappears. Is there a way to only append the image source without the class tag so that clicking on it in the new div won't make it disappear?
function appendSomeItems(url, id, name, style) {
return '<div><div class="md-card md-card-hover"> <div class="gallery_grid_item md-card-content getImage"> <img class ="uk-align-center imageClick" src="https://media.testsite' + url + '" alt=""></a> <div class="gallery_grid_image_caption"> <span class="gallery_image_title uk-text-truncate">' + name + '</span> <span>' + style + '</span> </div></div></div></div>';
}
$(document).on('click', '.imageClick', function handleImage() {
console.log('good');
var img = $(this).closest(".getImage").children("img").clone(true);
$("#holdImage").html('');
$("#holdImage").append(img);
$('#image-modal').hide();
});
<!--image placeholder->
<div id="holdImage" style="margin-top: 15px;">
</div>
<!--open modal-->
<div style="text-align: center;">
Choose an existing image
</div>
<!--Modal-->
<div id="image-modal" class="uk-modal">
<div class="uk-modal-dialog" style="width:80%;">
<a class="uk-modal-close uk-close"></a>
{!! Form::open(array('id' => 'search_form')) !!}
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="md-card">
<div class="md-card-content">
<div class="input-group">
<input type="text" class="md-input" placeholder="Search" name="srch-term" id="srch-term">
<p class="text-center">Search for images by Name </p>
</div>
</div>
</div>
</div>
</div>
{!! Form::close() !!}
<br/>
<div id="imageResult" class="gallery_grid uk-grid-width-medium-1-5 uk-grid-width-large-1-6" data-uk-grid="{gutter: 16}">
</div>
<button style="display: none;" id="hidden_button"></button>
</div>
</div>
Main problem seems to be that you are hiding the entire modal using Jquery's hide() message (which will set display:none; on the element) rather than calling the modal's hide() message. This has also been mentioned on the Git repository as can be seen here.
Solution would be to call the proper hide method like so:
var modal = UIkit.modal("#image-modal");
modal.hide();
instead of
$('#image-modal').hide();
Regarding the other question: remove the class that has the click handler attached before adding it to the #holdImage placeholder:
var img = $(this).closest(".getImage").children("img").clone(true);
img.removeClass("FillInClassNameHere");
$("#holdImage").html('');
$("#holdImage").append(img);
As I don't have the class name for it, you will need to change FillInClassNameHere with the proper class name in your code.

Hiding and showing another div with same child class breaks script

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);
});
};

auto complete on editable divs angular js

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>

Onclick event issue after using the outerHTML

this is the code :
$(".adauga_incasare").click(function(){
var html = $(".incasari")[0].outerHTML;
$(html).insertAfter($(".incasari").last());
});
$(".del_incasare").click(function(){
alert("dsdasdasd");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div class="incasari">
<div class="data_incasare_container">
<label><b>Data</b></label>
<input class ="data_incasare" type="text" id="datepicker">
<label class ="data_incasare_hidden">12-06-2014</label>
</div>
<div class="suma_incasare_container" style="">
<label><b>Suma</b></label>
<input class="suma_incasare" type="text" maxlength="8" name="pret_unitar[]" alt="">
<label class ="suma_incasare_hidden">100</label>
</div>
<div class="coscos" style="">
<a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash"></i></a>
<div style="clear:both;"></div>
<div class ="incasare_action">
<input class="btn btn-success" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
+ Adauga incasare noua
<div class="toram">
<label style = 'cursor:default;'>Total incasat: <b>100 €</b></label>
<label style = 'cursor:default;'>Total ramas: <b>1012 €</b></label>
</div>
</div>
the outerHTML works fine, but when i "clone" the class incasari after that , when the onclick event doesnt work on the clone part. I have a delete button. In the first class "incasari" in works , but in the clone class it does not . Why ?
Use Event Delegation because your element is dynamically created after the click event was assigned. For example, to delegate to the document:
Demo
$(document).on("click", ".del_incasare", function(){
alert("dsdasdasd");
});
This means all clicks will be checked by the .del_incasare selector, and if it matches then the function will run, regardless of when the element was created.
The method you used to fire click event only works with the DOM elements that has been created during page load, DOM elements created dynamically would not be handled by this method.
For the elements created after page load or dynamically you have to use Event Delegation. For this use jQuery on method.
$(document).on("click", ".del_incasare", function(){
// do some cool stuff here.
});
You can use any parent element instead of document here, that was already in DOM during page load.

JavaScript insert div

I'm attempting to insert a div before the "add div" button. I'm receiving an node not found error with this code:
document.getElementById("reg").insertBefore(newField, document.getElementById("op"));
But this code works, even though it's not the result I want:
document.getElementById("reg").insertBefore(newField, document.getElementById("op").parentNode);
Here's the source:
<form id="reg">
<div class="section">
<div class="sectionHeader">Welcome</div>
<div id="op1">
<div class="split25">
<select></select>
</div>
<div class="split25">
<select></select>
</div>
<div class="split50">
<input>
</div>
</div>
<div class="additional" id="op"><button></div>
</div>
<form>
Why can it access its parent node but not itself?
When you insertBefore, the second argument has to be a CHILD of the base object
parentNode.insertBefore(newNode, existingNode);
If existingNode is not a child of parentNode this will fail. That's what is happening in your code.

Categories