I'm trying to make a individual dropdown container like of that on the nopnav of the google, well everything runs ok, exept the fact that i would like to deactivate the activated class of the trigger event when i click on to hide the container!
Inserted the page where are the links where will be triggered to push up the container, and the second page is the content of the container, where i put in one script to hide the container and the second one to "tabfy" the menu with the jquery tools tabs.
Here's the code:
$(function () {
"use strict";
$(".user-link").click(function (e) {
e.preventDefault();
if ($(".user-link").hasClass("#buser-box")) {
$(".user-link").removeClass("#buser-box");
} else {
$('#buser-box').show('fast');
$(".user-link").addClass("active");
}
$.ajax({
url: "conta-box/conta-home.html",
cache: false,
dataType: "html",
success: function (data) {
$("#buser-box").html(data);
if (!$(this).hasClass("#buser-box")) {
$("#buser-box").removeClass("#buser-box");
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
});
});
});
HTML of the Index:
<div class="tabs-global">
<ul id="nav">
<li class="user-link" title="Conta"><a class="user-box"></a></li>
<li class="loja-link" title="Loja"><a class="loja-box"></a></li>
<li class="ava-link" title="Avaliação"><a class="ava-box"></a></li>
</ul>
</div>
<div id="buser-box"></div>
<div id="loja-box"></div>
<div id="ava-box"></div>
HTML of the container-content:
<div class="topbar">
<span class="box-close" onclick="box.close();"></span>
</div>
<div id="menu-box">
<h2>
<span class="icones-conta"></span><span class="texto">Conta</span></h2>
<ul id="conta-tabs">
<li class="current">Configuração</li>
<li>Localização</li>
<li>Compras</li>
</ul>
</div>
<div id="conta-container"></div>
<script type="text/javascript" src="./js/jquery.tools.min.js"></script>
<script type="text/javascript">
$(".box-close").click(function () {
$("#buser-box").hide("fast");
});
</script>
If you use any Jquery property that refers to class, you then need to use a class.
For example:
if ($(".user-link").hasClass("#buser-box")) {
$(".user-link").removeClass("#buser-box");
}
Should Be:
if ($(".user-link").hasClass("buser-box")) {
$(".user-link").removeClass("buser-box");
}
Also you could try a click function for showing and a click function
for hiding:
// hide your dropdown menu by default
$('#myMenuContainer').addClass('closed').hide();
$('.mylink').click(function(showMenu){
//display your drop down menu
if($('#myMenuContainer').hasClass('closed')) {
$('#myMenuContainer').show().addClass('open').removeClass('closed');
}
});
$('.mylink').click(function(showMenu){
//hide your drop down menu
if($('#myMenuContainer').hasClass('open')) {
$('#myMenuContainer').removeClass('open').addClass('closed').hide();
}
});
Related
Here is the situation. I have a box which is a div which contains another div which is basically a button. When the outer box is clicked it should redirect to a product details page. When the button within the box is clicked it should perform an ajax call which adds that particular item to cart.
Currently, when the outer box is clicked it redirects to product details page which is the desired functionality. However, when the inner button is clicked it adds to cart AND redirects while I do NOT want it to redirect but just add to cart. How do I achieve this desired functionality?
Here is the code for asp.net
#using LaptopMart.Models
#model IEnumerable<LaptopMart.Models.Product>
#{
ViewBag.Title = "User Index";
}
<h2>title</h2>
#foreach (Product product in Model)
{
<div class="inline">
<div class="A" div-product-id ="#product.Id">
<div class="card">
<div class="card-head">
<img src="~/Content/ProductImages/#product.Image" alt="product-image" class="card-product-image">
</div>
<div class="card-body">
<div class="product-details">
<span class="product-title">#product.Name</span>
<span class="product-price">$<b>#product.Price</b></span>
</div>
<div>
<div class="btn-sm btn-primary js-add-to-cart" data-product-id="#product.Id" >Add to Cart</div>
</div>
</div>
</div>
</div>
</div>
}
#section scripts
{
<script>
$(document).ready(function () {
$(".A").on("click", function () {
if ($(this).hasClass("js-add-to-cart")) {
return;
}
else {
window.location.href = "/user/ProductDetails/" + $(this).attr("div-product-id");
}
});
$(".js-add-to-cart").on("click",
function () {
var button = $(this);
$.ajax({
url: "/api/user/AddToCart/" + button.attr("data-product-id"),
method: "GET",
success: function () {
window.setTimeout(function () {
bootbox.hideAll();
}, 1000);
bootbox.alert("This has been added to cart");
}
});
});
});
</script>
}
In the function handling the click event for the inner div, stop the event from propagating to the outer div by calling event.stopPropagation() on the event:
function clickHandler(event) {
event.stopPropagation();
// Do your other stuff like Ajax calls
}
I am trying to hide a category list on click of a particular category and load the respective contents. The loading, fading in and fading out works fine but the problem is that whenever I fade Out the div the page scroll position goes to the element before the hidden div and whenever new elements are faded in the scroll position remains in the position of the last element. What to do so that the scroll position remains the same and a text or gif can be shown so that the user can see that some work is going on before the new elements are faded in?
HERE IS MY paste.
HTML
<div id="main_container">
<div id="coupon">
<div id="left_content">
<div id="coupon_heading">COUPON ★★★ </div>
<div id="coupon_text">USE <strong><i>NEW20</i></strong> TO GET AN ADDITIONAL 20% OFF</div>
</div>
<div id="right_content">
<div id="exclamation">OPENING<br>SALE</div>
</div>
</div>
<div id="content">
<div id="category1" class="category" data-categories="SPL">
<img src="images/c_w.png"><div class="category_description">Chef's Special</div>
</div>
<div id="category2" class="category" data-categories="LCH">
<img src="images/l_w.png"><div class="category_description">Lunch</div>
</div>
<div id="category3" class="category" data-categories="SNK">
<img src="images/s_w.png"><div class="category_description">Snacks</div>
</div>
<div id="category4" class="category" data-categories="DNR">
<img src="images/d_w.png"><div class="category_description">Dinner</div>
</div>
<ul class="items">
<!-- Menu List -->
</ul>
</div>
</div>
JS
<script type="text/javascript">
$(document).ready(function(){
$('body').on('click', '.category', function(){
var category = $(this).data('categories');
//alert(category);
$('.category').fadeOut(300);
$.ajax({
type: "POST",
url: "./assets/listproducts.php",
data: {cat: category},
cache: false,
success: function(response){
//console.log(response);
$('#nav').html('Back').addClass('back');
$('.items').html(response).delay(400).fadeIn(300);
}
});
});
$('#action_bar').on('click', '.back', function(e){
e.preventDefault();
//alert('click');
$('.items').fadeOut(300);
$('.category').delay(400).fadeIn(300);
$('#nav').html('CATEGORIES').removeClass();
});
});
</script>
UPDATE
I tried using a callback in fadeOut but didn't work.
success: function(response){
//console.log(response);
$('.category').fadeOut(300, function(){
$('#nav').html('Back').addClass('back');
$('.items').html(response).delay(400).fadeIn(300);
});
}
It seems that the following works just the way I want. If there is something really wrong in the code I wrote, please correct me.
$(document).ready(function(){
$('body').on('click', '.category', function(){
var category = $(this).data('categories');
//alert(category);
$.when($('.category').fadeOut(500)).done(function(){
//Try showing a loader
});
$.ajax({
type: "POST",
url: "./assets/listproducts.php",
data: {cat: category},
cache: false,
success: function(response){
//console.log(response);
$('#nav').html('Back').addClass('back');
$('#content').append($('<ul class="items">').append(response)).delay(400).fadeIn(500);
}
});
});
$('#action_bar').on('click', '.back', function(e){
e.preventDefault();
$.when($('.items').fadeOut(500)).done(function(){
$('.items').remove();
$('#nav').html('CATEGORIES').removeClass();
$('#content').append($('.category').css('display','block')).delay(400).fadeIn(300);
});
});
});
</script>
I found this fiddle from other questions, and its good to use. The problem is the added class(.active) in button remove when refresh. How can I make it remain even I reload it.
FIDDLE
HTML
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a></li>
<li><a class="button" data-rel="#content-b" href="#">b button</a></li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
JS
// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
Thanks in advance..
You need to store the active state either in the server(if there is a way to do this) or in the client side(you can use web storage)
To store it in client side
// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
localStorage.setItem('active-container', $(this).data('rel'));
});
// set content on load
localStorage.getItem('active-container') && setContent($('.button[data-rel="' + localStorage.getItem('active-container') + '"]'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
Added more details to Arun's answer.
Store menu item in local storage after click.
$('.menu-item').click(function (e) {
localStorage.setItem('active-menu-item', $(this).attr('href'));
});
Set active menu item style by adding class 'active' and click the item to go to the active page. It is inside $(document).ready() so that it runs after refresh.
$(document).ready(function () {
const activeMenuItem = $('.menu-item[href="' + localStorage.getItem('active-menu-item') + '"]').first();
activeMenuItem && setActiveLink(activeMenuItem);
});
function setActiveLink($el) {
$el.addClass('active');
$el.click();
}
I'm working on a web-application and I use jQuery UI with tabs and accordions and qTip2 (with tooltips).
I'm trying to create a "help" function that would toggle the display of all visible tooltips - and when the user change tab or accordion, then the tooltips should update based on which tooltips that should be visible.
I've created a simple js-fiddle example that illustrates the problem pretty well.
http://jsfiddle.net/Z3My2/8/
HTML:
<div id="mainDiv">
<div id="mapContainer">
<div id="simple_map" style="display: inline-block">
<p title='MapTitle' data-qtip2Enabled>Place map here</p>
</div>
</div>
<button type="button" id="ShowHelp">Show all help messages</button>
<div id="tabs">
<ul>
<li>Search
</li>
<li>Search results
</li>
</ul>
<div id="queryTab">
<div id='search'>
<p>Options</p>
<div id='queryOptions'>
<h3>
<span id='option1' title='This is option 1' data-qtip2Enabled>Option 1</span>
</h3>
<div id='option1Div'> <a title="another title" data-qtip2Enabled>Some text</a>
</div>
<h3>
<span id='option2' title='This is option 2' data-qtip2Enabled>Option 2</span>
</h3>
<div id='option2Div' title="Some Title" style="display: inline-block" data-qtip2Enabled>LaLaLaLALA</div>
</div>
</div>
</div>
<div id="parametersTab">
<div id="parametersTabText">Text.
<br>
<p title='lorum ipsum' data-qtip2Enabled>More text with tooltip.</p>
</div>
</div>
</div>
<!-- this div is a pop, and don't actually appear -->
<div id="errorMessageDialog" title="Warning" hidden>this is not a qtip-title (with tag data-qtip2Enabled)</div>
</div>
Javascript:
$(document).ready(function () {
$("#tabs").tabs();
$('#ShowHelp').click(toggleHelp);
$("#queryOptions").accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
$('[data-qtip2Enabled]').qtip();
});
var helpEnabled = false;
function enableHelp() {
unbindHelp();
$("DIV#tabs li").on("click", function () {
showHelp();
});
$("DIV#search span").on("click", function () {
showHelp();
});
helpEnabled = true;
}
function unbindHelp() {
$("DIV#tabs li").unbind("click");
$("DIV#search span").unbind("click");
}
function toggleHelp() {
if (!helpEnabled) showHelp();
else {
helpEnabled = false;
unbindHelp();
//$('[data-qtip2Enabled]').qtip('destroy');
$(".qtip-content").hide();
$('[data-qtip2Enabled]').qtip({
show: 'mouseenter',
hide: 'mouseleave',
});
}
}
function showHelp() {
if (!helpEnabled) enableHelp();
$(".qtip-content").hide();
$('[data-qtip2Enabled]').each(function () {
$(this).qtip({
show: true,
hide: false,
events: {
focus: function (event, api) {
api.set('position.adjust.y', -5);
},
blur: function (event, api) {
api.set('position.adjust.y', 0);
},
},
});
});
}
Any help or pointers would be greatly appreciated :)
Edit: Updated the code and fiddle based on some experiments and Rakesh Singh's answer.
I'm still wondering how to not display the tooltips that should be hidden - all tooltips are displayed now, but they are updated to the correct places when the UI changes.
Just put
$("DIV#tabs li").on("click",function(){
showHelp();
});
in jquery ready function.
i hope this will help.
I solved the rest of my problem, and it was a quite simple solution, so I'm marking Rakesh' answer as the accepted since it helped me a lot solving this
The solution to filter out what tooltips to show or not was to add a simple if-sentence:
$('#tabs [data-qtip2Enabled]').each(function() {
if ($(this).is(':visible')) {
$(this).qtip({
show : true,
hide : false,
events : {
focus : function(event, api) {
api.set('position.adjust.y', -5);
},
blur : function(event, api) {
api.set('position.adjust.y', 0);
},
},
});
}
});
And bind this (with a hide()) to the on-change of $("DIV#tabs li") and $("DIV#tabs h3")
I need to remove the parent div when user click on delete. So far I have below code:
<script>
function Confirmation(message, theurl)
{
if(confirm(message)) {
$.ajax({
type: "POST",
url: theurl,
success:function(response){
//on success, hide element user wants to delete.
$(this.className).unwrap();
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
}
}
</script>
<div class="row">
<div class="col-sm-6">test7</div>
<div class="col-sm-3">Advanced</div>
<div class="col-sm-3">
<a href="http://localhost/v2/index.php/hr/employee/editSkill/10">
<a href="javascript:Confirmation('Are you sure you want to delete?', 'http://localhost/v2/index.php/hr/employee/delete/1/skills/10');">
</div>
</div>
This code perform the deletion but the div still not unwrap. I also try the remove() function but still no luck.
function Confirmation(message, theurl)
{
var $this = this;
if(confirm(message)) {
$.ajax({
type: "POST",
url: theurl,
success:function(response){
//based on the structure on your DOM
$($this).parents('.row').remove();
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
}
}
You should try $(this).parent().remove(this); instead of $(this.className).unwrap(); inside the Confirmation() function if you want to delete the parent tag of button which you just clicked.
<script>
function Confirmation(elem, msg) {
if(confirm('Are you sure you want to delete?')){
$.post(elem.href)
.done(function(data){
$(elem).parents(".row").remove();
}).fail(function(data){
alert(data);
});
}
}
</script>
<div class="row">
<div class="col-sm-6">test7</div>
<div class="col-sm-3">Advanced</div>
<div class="col-sm-3">
<a href="http://localhost/v2/index.php/hr/employee/editSkill/10">
<a onclick="Confirmation(this, 'Are you sure you want to delete?'); return false;" href="http://localhost/v2/index.php/hr/employee/delete/1/skills/10">
</div>
Edited: now includes fail case.
Edited 2: includes use of function;
try this
$('body').on('click', '.buttonremove', function() {
$(this).parents("div:first").remove();
});
this inside the ajax success does not refers to the tag. You should store a reference of this initially and use the reference of the inside ajax success to do perform remove operation.
<div class="row">
<div class="col-sm-6">MySQL</div>
<div class="col-sm-3">Advanced</div>
<div class="col-sm-3">
<a href="http://localhost/v2/index.php/hr/employee/editSkill/3">
EDIT
</a>
<a class="delete" href="javascript:void(0)">
DELETE
</a>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6">MySQL</div>
<div class="col-sm-3">Advanced</div>
<div class="col-sm-3">
<a href="http://localhost/v2/index.php/hr/employee/editSkill/3">
EDIT
</a>
<a class="delete" href="javascript:void(0)">
DELETE
</a>
</div>
</div>
<hr>
$(".delete").click(function(e){
var self = this;
var didConfirm = confirm('Are you sure you want to delete?', 'http://localhost/v2/index.php/hr/employee/delete/1/skills/2');
if (didConfirm == true) {
$.ajax({
type: "POST",
url: tourl,
success:function(response){
//on success, hide element user wants to delete.
$(self).parent().parent().next('hr').remove()
$(self).parent().parent().remove();
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
}
});
I changed the approach. Assigned a class to delete and added a click listener to it. Show the confirmation alert inside it and make ajax call etc., I hope this approach would work for you.
FIDDLE
First of all i don't get why you are passing the message "Are you sure you want to delete?" as an argument. There are really better ways to do this, But as for now i will just correct your code and I am not 100% sure if the this pointer will work.
change this statement
$(this.className).unwrap();
to
$(this).parent().remove();
if you want to remove the div with class="row"
change the statement to
$(this).parent().parent().remove();