I have a HTML rows like this
<div class="wsdRow">
<div class="ib swsLbl">(new)</div>
<div class="ib swsLbl"><input type="text" class="wsd"></div>
<div class="ib swsLbl"><input type="text" class="wsAmount numbersOnly"></div>
<div class="ib swsLbl">
<button class="saveWC">save</button>
<button class="delWC">-</button>
<div class="wcResult ib"></div>
</div>
<div class="clr"></div>
</div>
<div class="wsdRow">
<div class="ib swsLbl">(new)</div>
<div class="ib swsLbl"><input type="text" class="wsd"></div>
<div class="ib swsLbl"><input type="text" class="wsAmount numbersOnly"></div>
<div class="ib swsLbl">
<button class="saveWC">save</button>
<button class="delWC">-</button>
<div class="wcResult ib"></div>
</div>
<div class="clr"></div>
</div>
then I bind the delete button like so
$(".delWC").click(function(){
var ths=$(this).parent().parent(".wsdRow");
alertify.confirm("are you sure you want to delete this row?", function (e) {
if (e) {
$(ths).remove();
}
});
});
for some reason, I have to click the alertify.confirm twice. The first time the user clicks "ok" the row is deleted as expected, but the alert stays until they click again. If they click "cancel", they still need to do it twice otherwise it won't go away.
Try using this
$('[id^=alertify]').remove();
Related
I have a screen like this:
So what I am trying to do is when the CLICK button is clicked, return the image on the right and show the result box (which is div).
So the section is like this:
<section class="weight__calculations">
<div class="container calculations__content">
<div class="row contents">
<div class="col-lg-2 col-md-12 col-sm-12"></div>
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="form-group">
<div class="calorie__button__area">
<button
type="submit"
class="button-secondary button__calculate"
>
HESAPLA
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="result__box">
<div class="title">RESULT</div>
</div>
</div>
</div>
</div>
</section>
And I hided calculate__content__result in css:
.calculate__content__result {
display:none;
}
But I dont know how to show it again and display none picture with the return effect.
Thanks for your help.
check this out it may help in your needs... Same time you toggle the class name of image too.
css
.calculate__content__result_show{
display : block ;
}
jquery
$(document).on('click','.click',function(){
$('.calculate__content__result').toggleClass('calculate__content__result_show');
});
javascript
var clickBtn = document.querySelector('.click');
var result = document.querySelector('.calculate__content__result');
clickBtn.addEventListerner('click',function(){
result.classList.toggle('calculate__content__result_show');
});
Add an ID in the element you want to hide/show
<div id="imageDiv" class="col-lg-6 col-md-12 col-sm-12 calculate__content">
and add functions to hide/show with javascript at the the begining of the html
<script>
function showImage(){
document.getElementById("imageDiv").style.display = "block";
}
function hideImage(){
document.getElementById("imageDiv").style.display = "none";
}
</script>
Call the functions when needed, for example:
<button onclick="showImage()" class="button-secondary button__calculate">
Click
</button>
In my HTML there are eight div. I was able to get the number of the div using jQuery and insert it into the .num div element.
However when I delete one of the div by clicking the delete button, the number of divs in the span retrieved through jQuery won't update to the current number of divs remaining. It will still show 8.
How can I get the current number of div elements left in the DOM immediately after clicking the button?
setTimeout(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
The problem is because you're using setTimeout(), which only runs once after the specified delay.
For the pattern you're using to work you need to use setInterval() instead, which will run repeatedly at the set delay:
setInterval(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
However, using a timer for this is not ideal. As the number of div elements is only affected when the button is clicked, just update the .num span element in that event handler:
var $span = $(".num span").html($(".delete div").length);
$("button").click(function() {
$(".delete div:last-child").remove();
$span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
/* action dropdown*/
jQuery(document).ready(function(){
jQuery(".action-toggler").click(function(ev){
jQuery(this).children(".action-dropdown").toggle();
ev.stopPropagation();
});
jQuery("body").click(function(){
jQuery(".action-dropdown").hide();
});
});
/* modle-popup*/
jQuery(document).ready(function(){
jQuery(".popup-button").click(function(){
event.preventDefault();
jQuery("body").addClass("sitemodal-open");
jQuery(".sitemodal").addClass("in");
});
jQuery('.sitemodal .sitemodal-dialog').click(function($){
$.stopPropagation();
});
jQuery(".close-popup ,.sitemodal").click(function(){
jQuery("body").removeClass("sitemodal-open");
jQuery(".sitemodal").removeClass("in");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="msg-icon action-toggler" style="float:right;">
<img src="images/dots.png" ></img>
<ul class="action-dropdown">
<li>
<a class="popup-button" data-target="#delete-popup" >Delete</a>
<!-- siteModal content-->
<div class="sitemodal fade" id="reply-popup">
<div class="sitemodal-dialog">
<div class="sitemodal-content">
<div class="sitemodal-header">
<h4 class="sitemodal-title">Delete</h4>
</div>
<hr style="margin-top: 8px;margin-bottom:2px;">
<div class="sitemodal-body" style="padding: 16px 0;">
<h4 class="sitemodal-title" style="font-size: 16px;font-weight: 400;">Are you sure you want to delete this message?</h4>
<form enctype="multipart/form-data" method="Post" action="" name="" onsubmit="">
<hr style="margin-top: 16px;margin-bottom:2px;">
<div class="sitemodal-footer" style="display: flex;margin-bottom: -8px;">
//php code here
</div>
</form>
</div>
</div>
</div>
</div>
</li>
</ul>
</span>
I have a drop down menu which contains a "delete" option when clicked it shows a pop up window
the problem that i am having is that when the "delete" option is clicked nothing happens first time but when clicked second time the pop up shows up
tried to trigger drop down window from the "model-pop" but didn't work
trid to remove the pop-up window outside of the </ul> but didnt work
can you please give me a hint or i am getting wrong at the least
removed some unrelated code to be easier to read
hi everyone i want to ask you something.
I am trying to make a popup window. My popup window is working fine. But if is possible anyone can tell me How do I withdraw some text in popup window.
For example i have created this DEMO.
You can see in this demo there is a JohDoe1,JohnDoe2,JohnDoe3 and JohnDoe4 and also there is a Click to show name in popup link.
I want to learn how can i withdraw that name (JohDoe1,JohnDoe2,JohnDoe3 and JohnDoe4) when i click (Click to show name in popup) link
Javascript
$(document).ready(function(){
var i;
$('.vd_button').click(function(){
i = $(this).attr('id');
$('.vduzalani, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.vvalan').animate({'opacity':'1.00'}, 300, 'linear');
$('.vduzalani, .vvalan').css('display', 'block');
});
$('.vkapat').click(function(){
close_box();
});
$('.vduzalani').click(function(){
close_box();
});
});
function close_box()
{
$('.vduzalani, .vvalan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.vduzalani, .vvalan').css('display', 'none');
});
}
HTML
<div class="vduzalani"></div>
<div class="vvalan">
<div class="vkapat">✖</div>
<div class="bilgidegistirmealani">
The name should be here
</div>
</div>
<div class="container">
<div class="divcont">
<div class="name" id="5">Jogn Doe1</div>
<div class="show_name vd_button" id="5">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="6">Jogn Doe2</div>
<div class="show_name vd_button" id="6">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="7">Jogn Doe3</div>
<div class="show_name vd_button" id="7">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="8">Jogn Doe4</div>
<div class="show_name vd_button" id="8">Click To show name in popup</div>
</div>
</div>
Essentially, bind a click event to those divs with class names of "show_name". When clicked grab their "prev" sibling's text and use that text to update the dialog's text. With jQuery, that is pretty easy and straight forward:
$('.show_name').click(function () {
var text = $(this).prev().text();
$('.bilgidegistirmealani').text(text);
//open dialog here
});
Here is a sample solution:
$('.show_name').on('click', function() {
var text = $(this).siblings('.name').html()
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vduzalani"></div>
<div class="vvalan">
<div class="vkapat">✖</div>
<div class="bilgidegistirmealani">
The name should be here
</div>
</div>
<div class="container">
<div class="divcont">
<div class="name" id="5">Jogn Doe1</div>
<div class="show_name vd_button" id="5">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="6">Jogn Doe2</div>
<div class="show_name vd_button" id="6">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="7">Jogn Doe3</div>
<div class="show_name vd_button" id="7">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="8">Jogn Doe4</div>
<div class="show_name vd_button" id="8">Click To show name in popup</div>
</div>
</div>
I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.
Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.