class selectors for jquery buttons not responsive - javascript

I'm incorporating jquery into an html file and have had some trouble getting a button to produce some action when I click on it. I've successfully managed to produce an alert for the event whereby I click on a div, but the button is a different matter.
<script type = "text/javascript">
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN PAGE HEADER-->
<div class="row">
<div class="col-md-12">
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
Verification & Validation Tools <small>statistics and more</small>
</h3>
<ul class="page-breadcrumb breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
Users
</li>
<li class="pull-right">
<div id="dashboard-report-range" class="dashboard-date-range tooltips" data-placement="top" data-original-title="Change overview date range">
<i class="fa fa-calendar"></i>
<span>
</span>
<i class="fa fa-angle-down"></i>
</div>
</li>
</ul>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<form class="form-horizontal" method="post" action="validateuser" >
<div class="validate">
<div class="form-group">
<label class="col-md-2 control-label">Email Address to Activate</label>
<div class="col-md-5"><input class="form-control" type="text" name="emailAddress"></input></div>
<button type="submit" class="btn-green"><i class="fa fa-check"></i> Validate</button>
</div>
</div>
</form>
</div>


I think the problem may be that the document it is not fully loaded when you add those event listeners. Try to use:
$(function() {
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});
Which is a shortcut for
$(document).ready(function() {
...
});


You're running the code before anything exists on the page
Use the jQuery ready wrapper https://api.jquery.com/ready/
<script>
$(function() {
// put your code here
})
</script>


wrap your javascript code inside . your code maybe attach event before
DOM load .
$(document).ready(function(){
// code here
});
or add your code at end of page


Wrap the script code inside document.ready function like:
$(document).ready(function(){
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});

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

JQuery Select turn off div and display another

I have the flowing html and jquery code on my development site. It works but seems clunky. I am looking for an easier cleaner way to make the function fade in divs and fade out divs.
$(document).ready(function() {
$("#sup1").click(function() {
$("#sup").show(300);
$("#select").hide(300);
$("#con").hide(300);
});
$("#con1").click(function() {
$("#con").show(300);
$("#conselect").show(300);
$("#select").hide(300);
$("#sup").hide(300);
});
$("#con2").click(function() {
$("#conform").show(300);
$("#select").hide(300);
$("#conselect").hide(300);
$("#sup").hide(300);
});
$(".back").click(function() {
$("#select").show(300);
$("#sup").hide(300);
$("#con").hide(300);
$("#conform").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select" class="lin">
<div>
I am Cool
I am Lame
</div>
</div>
<div id="sup" style="display:none">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="con" style="display:none">
<div id="conselect" style="display:block">
Learn More
Enroll Now
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="conform" style="display:none">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
</div>

Try this code:
$(document).ready(function() {
$(".js-trigger").click(function() {
const $t = $(this);
const href = $t.attr('href');
$(".js-trigger-target").hide(300);
$(href).show(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="anchor3" class="js-trigger-target">
<div>
I am Cool
I am Lame
</div>
</div>
<div id="anchor1" style="display:none" class="js-trigger-target">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="anchor2" style="display:none" class="js-trigger-target">
<div id="conselect" style="display:block">
Learn More
Enroll Now
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div style="display:none" class="js-trigger-target">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
</div>

Looking at what you have is sufficient enough for what you are trying to achieve. No need to over engineer the simple things. That said, if you must make it a bit cleaner ...it would improve your readability to use named functions over all the anonymous inline functions, see below:
function onCon1Clicked() {
$("#sup").show(300);
$("#select").hide(300);
$("#con").hide(300);
}
function onCon2Clicked() {
$("#conform").show(300);
$("#select").hide(300);
$("#conselect").hide(300);
$("#sup").hide(300);
}
function onBackClicked() {
$("#select").show(300);
$("#sup").hide(300);
$("#con").hide(300);
$("#conform").hide(300);
}
$(document).ready(function() {
// Click on sup1.
$("#sup1").click();
// Assign click handlers.
$("#con1").click(onCon1Clicked);
$("#con2").click(onCon2Clicked);
$(".back").click(onBackClicked);
});

jQuery not working on dynamically generated same divs

I am trying to make a comment reply section. I am loading the same div for reply which I use for commenting using $('#1').append($('.enterComment').html()); where 1 is the id of the div which will be displayed when reply is clicked.
.enterComment div contains a hidden submitPost button which will be displayed as soon as the user starts typing comment.
That div is loading properly but The problem for me is that when I loaded the same div in reply section and as I start typing anything in that it only displays the hidden div in the main comment div and not in the reply one.
My html is
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div id="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
For reply I have
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>
and script is
$("body").on('focus', 'textarea', function() {
$('#commentOptions').fadeIn(1000);
});
$("body").on('click', '#1 p .reply', function() {
$('#1').append($('.enterComment').html());
});

You need to fade in the following div of textarea so use .next().
Also, Identifiers in HTML must be unique, hence use CSS class. Here in the example I have used commentOptions CSS class.
$("body").on('focus', 'textarea', function() {
$(this).next('.commentOptions').fadeIn(1000);
});
$("body").on('click', '.commentData p .reply', function() {
var element = $('.enterComment').clone();
element.find('.commentOptions').hide();
$(this).closest('.commentData').append(element);
});
.commentOptions {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div class="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>

I've created an answer in one HTML file which works without dependencies apart from the jQuery and Bootstrap which you were using on your example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
body{
padding: 10px;
}
.wrapper{
width: 800px;
margin-right: auto;
margin-left: auto;
}
.submit-comment-btn-container {
display: none;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
$('#comment-textarea').on('focus', function() {
$('.submit-comment-btn-container').fadeIn('fast');
});
$('#submit-comment-btn').on('click', function() {
var text = $('#comment-textarea').val();
if(text != ''){
$('.submit-comment-btn-container').fadeOut();
$('#comment-textarea').val('');
// cloning the first child of the comments to use as a template
var comment = $('.comment-list').children().first().clone();
// replacing the content of the cloned comment with the new text
$(comment).html(text);
// appending the new comment to the comment list
$(comment).appendTo('.comment-list');
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="enterComment">
<form id="insertComment">
<div class="comment-text-container">
<textarea id="comment-textarea" placeholder="Comment here..."></textarea>
</div>
<div class="submit-comment-btn-container">
<button id="submit-comment-btn" type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
<div class="comment-list-container">
<ul class="comment-list">
<li>
<div class="comment">
Comment goes here
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

Show hide separate divs with jQuery

With my inexperience in jQuery, I'm finding the simplest tasks difficult.
What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="measure">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large" value="locate">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="inform">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
</div>
</div>
My JavaScript code that changes the pov icon/title classes works and is currently here:
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
What I aim to do, is display a certain message (e.g. Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :
$(document).ready(function(){
$('input[.pov_icon_small]').click(function(){
if($(this).attr("value")=="measure"){
$(".pov_description").not("#measure").hide();
$("#measure").show();
}
if($(this).attr("value")=="locate"){
$(".pov_description").not("#locate").hide();
$("#locate").show();
}
if($(this).attr("value")=="inform"){
$(".pov_description").not("#inform").hide();
$("#inform").show();
}
});
The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?

Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.
You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value, then the click function uses that to select the ID you want to display. Here is the code:
HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small" data-value="measure">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large" data-value="locate">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small" data-value="inform">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
Javascript:
$(document).ready(function(){
$('[data-value]').bind('click', function(){
$('.pov_description').hide();
$('#'+$(this).attr('data-value')).show();
});
});
You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/

1st : you just need to get a value and convert it to id ..
2nd: like #juvian mentioned $('input[.pov_icon_small]') is not a valid selector
3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead
4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute
$(document).ready(function(){
$('div.pov_title_small , div.pov_title_large').click(function(){
var ThisValue = $.trim($(this).attr('value'));
$(".pov_description").not("#"+ThisValue).hide();
$("#"+ThisValue).slideToggle()
});
});
Working Demo
if you need to control it from .pov_icon you have 2 ways
1st: put a value attribute in .pov_icon_small/large
2nd: you can use
$('div.pov_icon_small , div.pov_icon_large').click
and
var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));

Close button not closing the popup box overlay

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

Categories

Resources