Close button not closing the popup box overlay - javascript

This is the html for the my ul,and on click of anchor tag data will be loaded from the other file tab2.html .
<ul class="list-unstyled " id="dist-tabs">
<li class="col-xs-3 student item ">
<a href="./tabs/tab2.html #1">
shimla
</a>
</li>
<li class="col-xs-3 staff item">
<a href="./tabs/tab2.html #2">
dharamshala
</a>
</li>
</ul>
<div id="dist-container">
</div>
Following is the content for the tab2.html , which will be loaded through ajax.
<div class="popup-overlay" id="1">
<div class="popup-box">
<h4>Name 1</h4>
<span class="close-btn">x close</span>
</div>
</div>
<div class="popup-overlay" id="2">
<div class="popup-box">
<h4>Name 2</h4>
<span class="close-btn">x close</span>
</div>
</div>
Every thing is working fine, popup opens just fine. But on click of close button with class="close-btn", the popup-box doesn't close
Following is the js i am using for the purpose stated above .
var containerId = '#dist-container';
var tabsId = '#dist-tabs';
$(document).ready(function(){
$(tabsId + ' A').click(function(){
loadTab($(this));
return false;
});
});
function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');
$(containerId).load(tabObj.attr('href'), function(){
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
$(".close-btn").click(function(){
$(containerId).fadeOut('fast');
});
}
I have tried a lot of code for popup through ajax but not successful so far. So please help me out

Related

jQuery pop up window only opens on second click

/* 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

when i right click on selected tab and open it on new tab ,it always open the default active tab

<li class='active'>
<a data-toggle='tab' href='#table' class="tab_list" >
<div>
<span style="font-size: 16px;">Tweets</span>
</div>
</a>
</li>
<li>
<a data-toggle='tab' href='#summary' class="tab_list">
<div>
<span style="font-size: 16px;">Metrics</span>
</div>
</a>
</li>
<div class="tab-content " style=" background-color:;padding-left: ;">
<!--METRICS TAB-->
<div id='summary' class='tab-pane fade'>
<h1>abc</h1>
</div>
<!--METRICS TAB END-->
<!--Tweets table TAB-->
<div id='table' class='tab-pane fade in active'>
<h1>abc</h1>
</div>
I Have multiple tab in my side navigation bar ,i want to open my selected tab in new browser tab, but when i right click on selected tab and open it on new tab ,it always open the default active tab.
I want to open the selected tab

You can do it with javascript / jquery. Check whether the url contains hash and if there is an id with the same name, show it by triggering click event.
<script>
$(document).ready(function () {
var url = $(location).attr('href');
if(url.indexOf("#")) {
var tabId = window.location.hash;
console.log(tabId);
console.log($('a[href="'+tabId+'"]').parent('li'));
if($('a[href="'+tabId+'"]').parent('li').length){
$('a[href="' + window.location.hash + '"]').trigger('click');
}
}
});
</script>

Saving Bootstrap collapse state between page refresh/page swap

I have this BS navbar that you can collapse, and I want it to save the state when I change page or refresh the current page.
home.php
<!-- Side Navbar -->
<nav class="side-navbar">
<div class="side-navbar-wrapper">
<div class="sidenav-header d-flex align-items-center justify-content-center">
<div class="sidenav-header-inner text-center"><img src="img/marcus_avatar.png" alt="person" class="img-fluid rounded-circle">
<h2 class="h5 text-uppercase"><?php echo $_COOKIE['userName']; ?></h2><span class="text-uppercase">Web Admin</span>
</div>
<div class="sidenav-header-logo"> <strong>S</strong><strong class="text-primary">F</strong></div>
</div>
<div class="main-menu">
<ul id="side-main-menu" class="side-menu list-unstyled">
<li class="active"> <i class="fa fa-home"></i><span>Home</span></li>
<li> <i class="fa fa-users"></i><span>Users</span></li>
<li> <i class="fa fa-upload"></i><span>Upload</span></li>
<li><i class="fa fa-file"></i><span>My Files</span></li>
</ul>
</div>
</div>
</nav>
jsfile.js
$(".side-navbar").on('shown.bs.collapse', function ()
{
var active = $(this).attr('id');
$.cookie(active, "1");
});
$(".side-navbar").on('hidden.bs.collapse', function ()
{
var active = $(this).attr('id');
$.removeCookie(active);
});
$(document).ready(function(){
var panels=$.cookie(); //get all cookies
for (var panel in panels){ //<-- panel is the name of the cookie
if ($("#"+panel).hasClass('shrink')) // check if this is a panel
{
$("#"+panel).collapse("show");
}
}
});
I want it to work like this: http://jsfiddle.net/03u0bfst/3/ but I just can't get it to work for the life of me!

Change span text on a click

I have a link with image
<div class="va-pickers">
<a class="va-picker" data-attribute="pa_Attribute">
<img class="va-picker-item" src="img.jpeg">
</a>
</div>
And I want to change span text ( change it ) on link click
<ul class="gform" id="gform_1">
<li id="field_1">
<div class="ginput_container">
<div class="medium" id="s2id_input_1_2">
<a class="select2-choice">
<span class="select2-chosen" id="select27">change it</span>
</a>
</div>
</div>
</li>
</ul>
I try
$(document).ready(function(){
$("a[data-attribute='pa_Attribute']").click(function(){
$('#gform_1').find('span').text('my_text');
});
});
But it doesn`t work
Thanks

Your code works find. Check in your console to see if nothing is missing (JQuery maybe). Here's your working fiddle.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

jQuery function OnClick doesn't work after the custom lazy load function loads the data into the container

I made my own custom lazy load function with jQuery. Everything on Lazy load side works fine. When the html data from the server is appended to the container, the jQuery function $(".send-comment").on("click"); doesn't work but when its without lazy load its works fine.
JavaScript
/** JavaScript that executes then hit bottom of the document (Lazy Load functionality)*/
$(window).scroll(function () {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
var limit, pageOffSetAttr, url, dataID;
url = "/ajax/lazy-post.php";
limit = 5;
dataID = $("#pageOffSetAttr").attr("data-id");
pageOffSetAttr = $("#pageOffSetAttr").val();
pageOffSetAttr = parseInt(pageOffSetAttr) + limit;
pageOffSetAttr = $("#pageOffSetAttr").val(pageOffSetAttr);
pageOffSetAttr = $("#pageOffSetAttr").val();
$.post(url, {pageOffSetAttr:pageOffSetAttr, dataID:dataID}, function(data){
$(".feeds-unit-container").append(data);
});
}
});
/** AJAX the send comment */
$(".send-comment").on("click", function(){
var callback, context, url, dataAjax, dataID, code, msg;
callback = $(this).attr("data-add-back-btn");
url = "ajax/update-status.php";
context = $("input#new-comment-" + callback ).val();
dataAjax = $("input#new-comment-" + callback ).attr("data-ajax");
dataID = $("input#new-comment-" + callback ).attr("data-id");
$.post(url, {callback:callback, dataAjax:dataAjax, dataID:dataID, context:context}, function(data){
data = data.split("|");
code = $.trim(data[0]);
msg = $.trim(data[1]);
$("input#new-comment-" + callback ).val("");
$("#feeds-comment-" + dataID).fadeIn("fast").prepend(data);
});
});
HTML Side from Lazy Load PHP Script
<div class="row margin0" id="wall-post-#">
<div class="col-md-4 pad0 parent-profile-image">
<a href="#">
<img alt="#" title="#" src="#" width="50" height="50">
</a>
</div>
<div class="col-md-8 pad0 parent-profile-details">
<ul class="pad0">
<li class="name">#
<li class="post"><p>#</p></li>
<li class="likes">
•Delete
•Comment
•<span class="post-time gray">#</span>
</li>
<li class="comment bg-default">
<!-- Comment Box -->
<li class="stats gray commentbox">
<div class="row margin0">
<div class="col-md-4 pad0 commentbox-image">
<img alt="#" title="#" src="#" width="30" height="30">
</div>
<div class="col-md-8 pad0 comment-details f12" style="width: 90%;">
<ul class="pad0">
<li class="">
<p class="margin0">
<input id="new-comment-#" type="text" class="pull-left" data-ajax="send-comment" data-id="#" placeholder="Write a comment..."/>
<button data-add-back-btn="#"type="button" class="send-comment" title="Send Comment..."></button>
</p>
</li>
</ul>
</div>
</div>
</li>
<!-- ** Comment Box -->
<!-- Comment Feeds -->
<li class="stats gray comment-feeds">
<ul class="pad0" id="feeds-comment-#">
<li class="name pad2" id="feeds-comment-#">
<div class="col-md-4 pad0 comment-image">
<a href="#">
<img alt="#" title="#" src="#" width="50" height="50">
</a>
</div>
<div class="col-md-8 pad0 comment-details f12">
<p><a class="bold" href="#">#</a>#</p>
<div class="col-md-8 pad0 comment-iteractions f12">
•Delete
•<span class="post-time gray">#</span>
</div>
</div>
</li>
</ul>
</li>
<li class="stats gray comment-feeds">
<ul class="pad0" id="feeds-comment-#">
</ul>
</li>
<!-- ***Comment Feeds -->
</li>
</ul>
</div>
</div>

try to use delegation
change
$(".send-comment").on('click', function(....
to
$(document).on('click', ".send-comment", function(....

When you first run $(".send-comment") it is empty (i.e. $(".send-comment").length === 0, it is not until the content is appended to the DOM, that you can bind.
Try adding your current bind logic to the $.post callback.

If you want to attach events on dom elements that are not attached to the don now(that will be attached threw Ajax request for example) you should use the following
$( document ).on( events, selector, data, handler ); // jQuery 1.7+
For example:
$( document ).on( "click", ".sent-comment", function(){...});

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
So for your problem is future DOM could not binding the events properly. Ty to fix for the future DOM element.
The solution is Equivalent to .live() would be something like
/** AJAX the send comment */
$(document).on("click", ".send-comment" , function(){
// your code here
});

Categories

Resources