jQuery show/hide errors on click - javascript

I have a show/hide for messages which is working. There is a subject and message. I need it to work so that only onClick of the title will the message display. At the moment when I click on the title of the message, it opens the message, but when the message is open, if I click on the message, it hides. As I'm going to be having some links within the message, this doesn't work. I only need onclick of the title to show and hide the message.
HTML/PHP CODE:
<div id="note_container">
<div id='empty_msg' style="display:none;">You do not currently have any notifications in your <span id='box_type'>INBOX</span></div>
<!-- Content -->
<?
if(!empty($notes)):
foreach($notes as $box_type=>$notes_array):
if(!empty($notes_array)):
foreach($notes_array as $note):
$envelope_icon = ($note['opened']==1)?'icon_opened.jpg':'icon_closed.jpg';
?>
<div id="note_<?=$note['note_id']?>" class='hdr_active <?=$box_type?>_item'>
<input type="checkbox" name="notes_chk" value="<?=$note['note_id']?>" class="notes_chk" style="float:right;"/></label>
<div style='display:inline-block;' id='note_<?=$note['note_id']?>' class="note new_note hide">
<img src="images/buttons/<?=$envelope_icon?>" id='note_indicator_<?=$note['note_id']?>' class="note_indicator" width="20" height="19" />
<?=$note['subject']?>
<div id='note_details_<?=$note['note_id']?>' class="details" style="display: none">
<p><?=$note['message']?></p>
</div>
</div>
</div>
<?
endforeach;
endif;
endforeach;
endif;
?>
</div><!-- END NOTE CONTAINER -->
JQuery CODE
$(".note").click(function(){
// get the search values
var id = $(this).attr('id')
var id_array = id.split('_')
var note_num = id_array[1]
if($(this).hasClass('hide'))
{
$(this).removeClass('hide').addClass('show')
$("#note_details_"+note_num).slideDown()
if($(this).hasClass('new_note')){
var notes = [note_num]
$(this).removeClass('new_note')
$("#note_indicator_"+note_num).attr("src","images/buttons/icon_opened.jpg");
$.ajax({
type: "POST",
url: "ajax-redirect.php",
data: { type: 'markRead', notes: notes, page:'ajax.php' }
}).done(function(data) {
$(".notes_chk").removeAttr('checked')
if(data!=1)
{
alert("failed to update the system")
$("#note_indicator_"+note_num).attr("src","images/buttons/icon_closed.jpg");
}
})
}
}
else
{
$(this).removeClass('show').addClass('hide')
$("#note_details_"+note_num).slideUp()
}
})
$('#check-all').click(function(){
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function(){
$("input:checkbox").attr('checked', false);
});
})

Please read jQuery documentation! For this case you can use native jQuery method toggle
$("div.note").click(function(){
$(this).toggle(); // or some other selector
});
or if .note is link
$("div.note").click(function(e){
e.preventDefault();
$(".your_block").toggle(); // or some other selector
});

Because div with the note class is the parent of the message any events on its children will bubble up to it so you need to prevent that with event.stopPropagation().
I can't test this code(i dont have the raw HTML to do so) but it should represent what needs to be done:
$(".note").children().click(function(e) {
e.stopPropagation();
});
You need to bind a click event to the children of the div with the note class and prevent it from bubbling up.

Related

Get next or previous element in array by clicking prev or next button

I have the following problem:
I have two divs, only one of these is shown and when I click the next or the previous button the other one is shown and the one which was visible is set to hidden. The div which is shown has the "active" class. Now, I need to get the id of the div which has this class. The problem is that I always get the id of the previous one because when I click the button I get first the id and then the class is changed..and I don't know why, also if the code which change the class is written before the code which get the id.
How can I fix this?
<div class="item <?php if($i == 1) echo 'active';?>" id="<?php echo $dati['id'];?>">
<div class="container">
<div class="carousel-content">
<h1><?php echo $dati['titolo'];?></h1>
<p class="lead">
<?php echo $desc_feed;?>
</p>
</div>
</div>
</div>
<a class="prev" href="#main-slider" id="next-carousel" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="next" href="#main-slider" id="prev-carousel" data-slide="next"><i class="icon-angle-right"></i></a>
function show_feed_data(id)
{
get_feed_data(id);
}
$( "#prev-carousel" ).click(function() {
var id_feed_to_show = $(".active").attr("id");
get_feed_data(id_feed_to_show);
});
$( "#next-carousel" ).click(function() {
var id_feed_to_show = $(".active").attr("id");
get_feed_data(id_feed_to_show);
});
</script>
Its because you are getting the ID of the current active element before it fires the carousel to change the class.
Let's each of the carousel divs are siblings (next to each other) . You can do it like this :
$( "#prev-carousel" ).click(function() {
var id_feed_to_show = $(".active").prev().attr('id');
get_feed_data(id_feed_to_show);
});
$( "#next-carousel" ).click(function() {
var id_feed_to_show = $(".active").next().attr("id");
get_feed_data(id_feed_to_show);
});

Include PHP page and replace divs when link clicked

I am trying to replace a div's contents with another PHP page when clicking on a link.
Link
echo 'Control Panel';
If statement checking if link clicked
<?php
/** Control panel link. */
if(isset($_GET['control'])){
$link=$_GET['control'];
if ($link == '1'){
include('controlpanel.php');
}
}
Divs
<div id="divContainer">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
I am looking for divContainer to hold the controlpanel.php contents when the control link is clicked and div1 div2 and div3 to be 'removed/hidden'.
I can get both functionalities to work individually but not simultaneously.
The code currently displays the content within the page but not within a div/hiding contents of said div.
Any ideas?
Continuing with your current style, you could simply amend your conditional to the following:
<?php
if ($link == '1') {
include('controlpanel.php');
} else { ?>
<div id="divContainer">...</div>
<?php } ?>
Alternatively, as suggested, you could use some JavaScript to hotload in the control panel, and in the same breath, hide the divs you need hidden. Something like this (jQuery):
function loadPanel() {
$.ajax({
url: 'controlpanel.php',
method: GET,
success: function(res) {
$('#divContainer').html(res);
}
});
}
And then bind this to your link.

Unable to trigger popup box on click event

I'm wrapping up results of ajax request on div and appending to main div in a page. SO if the array of results returned empty, I would like to alert user, saying that no result found and also provide a link for them to click on. When they click a pop up box carrying products by category would popup. Important thing to notice here is,the products are derived via php and ajax scripts.
So When I use onclick event or directly, nothing happens!!!. But if I call empty or HTML pop up it would work. Also the same php scripts contained pop up would work if I trigger it on page load or in the ajax success function. SO I dont understand why only with on click it doesn't work?
This is the pop up I want to trigger on 'click' event
<section id="browse-search-popup" class="mfp-hide white-popup">
<h1>Browse Courses</h1>
Can't find what you're looking for? Tell us here!
<h2>First, pick a learning Zone:</h2>
<div class="row">
<div class="small-12 medium-8 large-8 medium-centered large-centered columns">
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2">
<?php
$tutor = new register();
$data = $tutor->get_maincat();
$i=0;
foreach($data as $k=>$v)
{
$i++;
?>
<li><div class="mainCat_<?php echo $i;?>" id="<?php echo $v['main_cat_id'];?>"><?php echo $v['main_cat_name'];?></div></li>
<?php
}
?>
</ul>
</div>
</div>
<h2>Then, pick a field:</h2>
<div class="row">
<div class="small-12 medium-12 large-12 columns" id="cat">
</div>
</div>
<h2>Finally, choose your Course:</h2>
<div class="row">
<div class="small-12 medium-12 large-12 columns" class="choosen_subjects">
</div>
</div>
<div class="row">
<div class="small-12 medium-12 large-12 columns" id="sub">
</div>
</div>
<input type="submit" id="done" value="Done">
</section>
Ajax request
$("#search_tutor").submit(function() {
var data = {
"action": "test"
};
var subject = $("#subject").val();
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "/fetch_tutor.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
$("#contents img.loading").remove();
var sizy = data.length;
if(sizy ==0) {
console.log("sorry, cannot locate");
$(".simply-popup-link").trigger("click");
$("#simply-popup").empty();
//This is where I want to trigger the on click
$("#simply-popup").append("Unable to locate the subject you entered, please <a href='#' onclick='browse("+sizy+")' class='yellow'>Browse</a>");
}
console.log("size= "+data.length);
var j=0;
for (i = 0; i < data.length; i++) {
........................
......................
The browse function:
function browse(param) {
//this would work
/* $(".simply-popup-link").trigger("click");
$("#simply-popup").empty();
$("#simply-popup").append("test only"); */
// but not this
$(".browse-search-popup-link").trigger("click");
}
I tried loading the page into the an empty popup box ($("#simply-popup")) like this but doesn't work either:
$("#simply-popup").load('search/browse.php');
Change
$("#simply-popup").append("Unable to locate the subject you entered, please <a href='#' onclick='browse("+sizy+")' class='yellow'>Browse</a>");
to
$("#simply-popup").append("Unable to locate the subject you entered, please <a href='#' class='yellow browse'>Browse</a>");
write a separate code for this
$('body').on('click', '.browse', function() {
$('.browse-search-popup-link').click();
});
Can't you just call that function after append:
$("#simply-popup").append("Unable to locate the subject.....");
browse(sizy);// call it here.
or when you append it in the element then you can call the click:
$("#simply-popup").append("Unable to locate the subject.....");
$("#simply-popup a").click();
$(document.body).append('browse value is 1');
$(document.body).find('a').click();
function browse(num){ $(document.body).find('p').html("<pre>"+num+"</pre>");}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
log out here:
<p></p>

Show div on click by Jquery only apply to 1 div at a time

I'm using wordpress and in my loop I have a link that is clickable to toggle a div to show and hide the content, since this is within the loop it uses the same class for each item in the loop so when I toggle one link it shows the content for all.
<div class="additional-info">Additinal Information</div>
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(".additional-info-box").toggle();
});
})
</script>
So the additional-info class and the additional-info-box gets generated for each post, but when I click on any of the additional-info divs every additional info box gets shown.
Try wrapped :
<div class="additional-info">
Additinal Information
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(this).find(".additional-info-box").toggle();
});
})
</script>
with that only the .additional-info clicked will show their content.
Live Demo

Want to make inactive hyperlink

I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}

Categories