I have 3 links which are the names of students.On clicking a link first time or odd number time,another div which contains the details of that student appears.On clicking the same link on second time or even number time, I need to hide the student div.Its working perfectly for me using data() event of jquery.
My requirement is if I click first student link,div with the details of first student will come.If I click the second student link,details of second student will come.If I again click on first link,the student div will hide since data() is associated with it(I think so). But I want to make it displayed because,previous click was on the second link.
My html is like this
George
Leo
Kelm
My jquery:
$("#sections ").on('click','.student_link',function(){
var clicks = $(this).data('clicks');
//alert(clicks);
if (clicks) {
$("#div_students").hide();
//alert(1);
}
else
{
$("#div_students").show();
//alert(2);
}
$(this).data("clicks", !clicks);
return false;
});
That is if I click George for first time, the corresponding div of student will appear,If I click Leo without clicking George to hide the div,I need div of Leo should come.If I click George again,I need div with details of George should come.But for me the div is hiding since the variable click is already true for George.I need the div to be displayed if previous click was not on the current link.
You can use the following code:
$("#sections").on('click', '.student_link', function () {
var prevClickedId = $('#sections').data('prevId');
if (prevClickedId != $(this).attr('id')) {
// This was not the previous clicked element
} else {
// This was the previous clicked element
}
$('#sections').data('prevId', $(this).attr('id'));
return false;
});
You can so something similar to this:
$("#sections").on('click', '.student_link', function(){
if( $("#div_students").data('viewing') == $(this).attr('id') ) {
$("#div_students").hide().data('viewing', '');
}
else {
$("#div_students").show().text($(this).attr('id'));
$("#div_students").data('viewing', $(this).attr('id'));
}
return false;
});
Here's a working example: https://jsfiddle.net/7qwsguoq/
Why don't just use jquery toggle() method? it hides element when it's visible, and shows when it's hidden.
Related
I am developing a laravel website, in which there is a product list page (List page) where I show all the products with ajax lazy load. I also have a Product Details page which show details of the individual product. I created a hidden field which saves scroll count I call this field as Page_No field. When I go to list page, Initially I show 6 products from database and also set Page_No to "0", after I scroll down, another 6 products gets added to list by ajax and by determining Page_No field and that time I increment the Page_No field by one. And so on.
When I scroll down for some time (say three times) that means I have 24 products on my list page, and my Page_No count is "3". After that I click on any product and go to product page to see details. After that when I click browser's back button and go to list page, I see first 6 products are there and then if I scroll down I get more products, but it skips some of the products (for ex it shows me 45th product and so on..so what about those product from 24-45?).
My understanding:
When I get back to list page by clicking browser's back button Page_NO field is set to 3, if I scroll down it gets incremented by one i.e. "4", So my ajax query executes and get result from that point skipping some products.
Things I tried:
I understood that I have to control Page_No field in order to get my list work properly after pressing back button. when I go to product details page by clicking any one product that time I creates a session which will have value "0". After that I created SetInterval Ajax function which will continuously check that session and update the Page_No field. But this thing also does not work properly (Only works for first instance).
lazyload.js
onscroll = doLazyLoad;
//global check flag for do lazy load
var ll_check_flag = true;
function doLazyLoad()
{
var productsDiv = document.getElementById('ProductsView');
if(window.scrollY > (productsDiv.scrollHeight - 200))
{
if(ll_check_flag)
{
ll_check_flag = false;
getMoreProducts();
}
}
}
function getMoreProducts()
{
var product_filters = [];
$('input.checkfilter:checkbox:checked').each(function ()
{
product_filters.push($(this).val());
});
var pageno = parseInt($('#pageNo').val())+1;
$('#pageNo').val(pageno);
var range_filter = $('#range').val();
productsLazyLoadAjax(product_filters,range_filter,'',pageno);
}
function productsLazyLoadAjax(product_filters,range_filter,search_term,pageno)
{
weburl = $('#MasterURL').val();
$.ajax({
url: weburl + '/index/get/products',
type: "POST",
data: {pf:product_filters,rf:range_filter,st:search_term,page:pageno},
beforeSend:function()
{
res.container.append(res.loader);
},
success: function(data)
{
if(data != 0)
{
res.container.find(res.loader).remove();
$('#ProductsView').append(data);
ll_check_flag = true;
}
},
complete: function() {
}
});
}
Product Detail Page (After click on list page products we land on product detail page)
jQuery(document).ready(function()
{
$('#pageNo').val(0);
}
I have been trying to figure out this problem I've been having all day. I will give you a simplified run down of what I have been trying to do. The user enters a number, and however much the number is, is the number of categories there are going to be on the following page. Within each category, there is an input text button, along with an "Add Textbox" button that adds additional input textboxes dynamically. However, the problem here is that each category has this same setup on the same page. For example, if the user enters the number "3", then the page will vertically load three categories looking something like the following:
Category #1
(Initial user input textbox for category #1)
("Add Textbox" button to allow user to fill out another option)
Category #2
(Initial user input textbox for category #2)
("Add Textbox" button to allow user to fill out another option)
Category #3
(Initial user input textbox for category #3)
("Add Textbox" button to allow user to fill out another option)
The struggle I have been encountering is that each category button will need to have its own function, to tell the button where to place the textbox. This coupled with the fact that the number of categories changes depending on the user's input, has made things difficult. I started with the following:
var categoryCount = <?php echo $categoryCount; ?>;
var click = {};
for (var num=1;num<=categoryCount;num++) {
var newClick = "click_" + num;
click[newClick] = function() {
// some contents when this button is clicked
};
}
This JS creates an object of functions, which in JS would be able to be accessed by doing something like the following:
click['click_' + someID]();
However, the problem is that I cannot do this using the "onclick" attribute in my HTML/PHP button. I cannot access this object of functions, and cannot call any of the individual functions, obviously. I think I am going to need to rethink all of this and start again. I just can't think of another way to get this to work. Please share your ideas with me! Your help would be greatly appreciated.
For something like this, I'd write a constructor I could use like this
var cat1 = new Category(document.body);
Luckily for you, I also wrote one as an example. See the DEMO HERE. I haven't styled it at all for the new lines etc, though.
var Category = (function () {
var categoryCount = 0;
function elem(tag) { // shortcut
return document.createElement(tag);
}
function text(str) { // shortcut
return document.createTextNode(str);
}
function Category(node) {
var self = this; // this should have been var'd, oops!!
this.categoryId = ++categoryCount;
// make add button
this.addButton = elem('button');
this.addButton.appendChild(text('Add Textbox'));
this.addButton.addEventListener('click', function () {
self.addTextbox();
});
// make wrapper
this.wrapper = elem('section');
this.wrapper.setAttribute('id', 'cat'+this.categoryId);
this.wrapper.appendChild(this.addButton);
// make textboxes
this.textboxes = [];
this.addTextbox();
// append to document
if (node) {
this.append(node);
}
}
Category.prototype.addTextbox = function () {
var e = elem('textarea');
e.setAttribute('name', 'cat-'+this.categoryId+'-textbox[]');
this.textboxes.push(e);
this.wrapper.insertBefore(e, this.addButton);
};
Category.prototype.append = function (node) {
return node.appendChild(this.wrapper);
};
return Category;
}());
I am getting json in "data" and passing it in for loop. Onclick of buy button, it goes to the App function. On success I need to hide the buy button and display the download label.
My problem is onclick of 1st buy button, download link for both the buttons appear.
Ideally oneclick of first buy button, buy button should be hidden and download label should appear. similarly oneclick of second buy button, buy button should be hidden and download label should appear.
How do I get particular id of each button so that I can hide one at a time?
Please help me out
function (data)
{
var Class ='';
for (var i=0; i <data.length;i++)
{
Class += '<div name="buy\''+data[i].id+'\'" class="btn btn-primary btn-small" onclick="buy(\''+data[i].identifier+'\',\''+data[i].id+'\',\''+data[i].url +'\'); return false;" href=""></div><div class="download\''+data[i].id+'\'" id="download">D<span style="font-size:15px"></span></div>';
}
return Class;
}
App = function(identifier, app_id, url) {
$.ajaxSetup({
data : {
csrf_test_name : $.cookie('csrf_cookie_name')
}
});
var jqxhr = $.post(SITE_URL + 'admin/appstore/purchaseApp', {
identifier : identifier,
ap_id : ap_id
}).done(function(data1) {
obj = JSON.parse(data1);
bootbox.alert(obj.status, obj.label);
$("#download").html('<a href='+download_url+app_id+'>Download!</a>');
});
};
it is for loop am using.. am passing '; now how do I hide buy id? $("#buys"+"'"+data[i].id+"'").hide(); is this the right way? It gives me error
if you look at the actual markup generated in Class, you will see that your buy buttons don't have an id at all. perhaps something like
Class += '<div id="buy-button-'+data[i].id+'" name="...
Now you have a unique id on each button. The next part of your problem is knowing which button to remove after a successful Ajax call. You will need to include that in the data1, returned from the server. For the sake of argument, let's say the server returns the value in your data1 object as app_id. Then all you need to do is
jQuery('#buy-button-'+data1.app_id).hide();
Slightly off-topic, I'm not too keen on the way you're using single quotes in the buttons' name attributes, either, but I don't think that's relevant here.
I have a table that contains several rows each containing one checknox. Checkbox will get selected on the row click event.
Now how can I apply an onclick event for a checkbox?
$('input[type=checkbox]').click(function() {
countPopChecked();
});
This is my script. This is working when I click on the checkbox. But I want this functionality when I am clicking on the table row.
$('input[type="checkbox"]').closest('tr').on('click', function() {
countPopChecked();
});
or :
$('tr').has('input[type="checkbox"]').on('click', function() {
countPopChecked();
});
I'm standing in front of a forest. Can you help me find the tree?
Currently I'm generating a list with PHP
echo '<div>';
echo ' <ul>';
foreach ( $myArray as $key => $value):
echo '<li>'. $value . '</li>';
endforeach;
echo ' </ul>';
echo '</div>';
The array contains a limited number of items, which can vary.
What I want to do is to highlight the current item and show all other items as normal.
So, when showing the page, the first item should be shown as being highlighted.
When clicking on second item,
the first item should not stick out (not have any styling).
the second item should be highlighted until another item is clicked.
all other items should be shown as a normal styling.
I would like to be able to do this using nothing but CSS.
To be named, when clicking on a list item I plan to show/hide other div elements, where I plan to use jQuery.
$('li').on('click', function() {
$('li.highlight').removClass('highlight'); // first un-highlight all lis
$(this).addClass('highlight'); // then highlight only clicked li
});
To set first item as highlight when page load, you can do it in PHP/ jQuery also.
If you want to do in jQuery then try:
$(document).ready(function() {
$('div > ul > li:first').addClass('highlight'); // set first item
// highlight at page load
$('li').on('click', function() {
$('li.highlight').removClass('highlight'); // first un-highlight all lis
$(this).addClass('highlight'); // then highlight only clicked li
});
});
Try .addClass() .removeClass() and .eq():
$(function(){
$('div ul li').eq(1).addClass('active');
$('div ul li').click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
As .eq() is 0 indexed so .eq(1) will select the second li on page load.
You probably need to add a class name to the li's to give you a convenient selector. In my example below, I have use some_class for this purpose. I am also assuming that you want to use a class the indicate the selected item. In this example, I have used selected as the class name for this.
$('li.some_class').click(function() {
$('li.some_class').removeClass('selected');
$(this).addClass('selected');
});
thanks all to your fast reply.
I finally mix your answers to get it working for me
$(document).ready(function()
{
$('div#myclass > ul.myid > li:first').addClass('current'); // set first item
$('div#myclass > ul.myid > li').click(function()
{
$(this).siblings().removeClass('current');
$(this).addClass('current');
});
});
The myclass and myid I've added to distinguish between other list items.
#thecodeparadox: The update when clicking another item was not done with your proposal.
#jai: the initial set was not done with your proposal.
But with the final mix, it works 100% as I need.
Thanks a lot again.
Wolfgang