We Keep Coding

Open and Close Classes with jQuery

I have a fairly simple .addClass(open) function in jQuery, but am having trouble passing the right variables.
I have these two buttons in a sidebar:
<ul>
<li class="dashButton active" id="#1"><?php the_field('sidebar_text_0'); ?></li>
<li class="dashButton" id="#2"><?php the_field('sidebar_text_1'); ?></li>
</ul>
And then two divs that should open in eachother's place when it's button is clicked. mainDashWrap relates to id=#1 and editProfile relates to id=#2.
<div class="mainDashWrap dashView open">
...... content .....
</div>
<div class="editProfile dashView">
...... content .....
</div>
And my jQuery adds and removes the open class, which has display:none if there is no open class and display:block if it does have the open class.
My problem is with the //Get the attr2 part below. I don't think it's properly setting the class so that it's formatted to go into the $(newSect).slideDown() function.
$('.dashButton').click(function() {
//Switch active Tab Buttons and close the Menu.
$('.dashButton.active').removeClass('active');
$(this).addClass('active');
$('.dashView.open').removeClass('open');
//Get the attr2
if ( this.id == '#1') {
var attr2 = '.mainDashWrap';
}
else { var attr2 = '.editProfile' }
switchDashViews(attr2);
});
function switchDashViews(newSect) {
//close active section
$('.dashView.open').slideUp('2000', function() {
$('.dashView.open').removeClass('open');
$(newSect).slideDown('2000', function() {
$(newSect).addClass('open');
});
});
};
This will add and remove the open class and hide the dashview that doesn't have the open class, but it will not add the open class to newSect or slide down newSect. How can I get attr2/newsect to set properly?

I suppose you first removed all .open in click event
$('.dashView.open').removeClass('open');
and only after that trying to slide up this elements in switchDashViews function
$('.dashView.open').slideUp('2000'...
But .open are already deleted
Upd. try not to use var keywords in this block
if ( this.id == '#1') {
var attr2 = '.mainDashWrap';
}
else { var attr2 = '.editProfile' }
because attr2 can be out of scope. Just
if ( this.id == '#1') {
attr2 = '.mainDashWrap';
}
else { attr2 = '.editProfile' }

Remove # from your id in your HTML, it is not a allowed character in id, (Imagine what selector will look like $(##1), pretty bad, huh?).
Add a data-attribute so that you can get rid of if() .. else() ...
HTML
<ul>
<li class="dashButton active" data-class=".mainDashWrap" id="1"><?php the_field('sidebar_text_0'); ?></li>
<li class="dashButton" data-class=".editProfile" id="2"><?php the_field('sidebar_text_1'); ?></li>
</ul>
jQuery
$('.dashButton').click(function() {
//Switch active Tab Buttons and close the Menu.
$('.dashButton.active').removeClass('active');
$(this).addClass('active');
$('.dashView.open').removeClass('open');
// Do this
var attr2 = $(this).data("class");
/* Or you can do this
if ( this.id == '1') {
var attr2 = '.mainDashWrap';
}
else { var attr2 = '.editProfile' }
*/
switchDashViews(attr2);
});
function switchDashViews(newSect) {
//close active section
$('.dashView.open').slideUp('2000', function() {
$('.dashView.open').removeClass('open');
$(newSect).slideDown('2000', function() {
$(newSect).addClass('open');
});
});
};
Make sense?

Don't include # in the ID. While it's legal in modern browsers, it's confusing and will make it difficult to access the element using jQuery or CSS selectors. Instead use
<li class="dashButton active" id="1">
Then change the if to match this:
if (this.id = "1")
I also suggest you use more meaningful IDs than just numbers.

this can be different depending on the function scope, try to use event.target instead so this.id would be event.target.id.
See your example of your code with changes:
$('.dashButton').click(function(event) {
//Switch active Tab Buttons and close the Menu.
$('.dashButton.active').removeClass('active');
$(this).addClass('active');
$('.dashView.open').removeClass('open');
//Get the attr2
if ( event.target.id == '#1') {
var attr2 = '.mainDashWrap';
}
else { var attr2 = '.editProfile' }
switchDashViews(attr2);
});
function switchDashViews(newSect) {
//close active section
$('.dashView.open').slideUp('2000', function() {
$('.dashView.open').removeClass('open');
$(newSect).slideDown('2000', function() {
$(newSect).addClass('open');
});
});
};

I think this.id won't work. ~~You want to convert this to a jQuery object via $(this) then use the attr() method to retrieve the 'id'. So something like...~~
EDIT
Turns out this.id does work! Didn't notice the id="#1" you had in your HTML tags. Yep, as others have pointed out, that'll be the culprit.

Find link from closest li and open it in a new page - Javascript

I have a submenu divided in two parts:in the right side a li which contains a link and in the left side an icon for each li.
Icons use a css class,called 'submenubtn'.I want to make a javascript function which takes the link from the closest li,assign to that icon,and when that icon is clicked,the link should be open in a new tab.
I hope I was clear enough,please ask me anything you didnt'n undertand.
here is the code i have until now:
$(document).ready(function() {
$("body").on("click", ".submenubtn", function() {
var link = $(this).find("li").attr('href');
//window.alert(link);
window.open(link)
});
});
link returns "undifined".
I don't know how much this will help,but the html page:
<?Menu?>
<div id="<?$_name?>" class="atk-menu atk-menu-vertical atk-popover">
<ul>
<?Item?>
<?MenuItem?>
<li id="<?$id?>" class="<?$class?>"> <i class="<?$icon?>"></i><?label?>MenuItem<?/?></li>
<?/MenuItem?>
<?/?>
<?$Content?>
</ul>
</div>
<?MenuSeparator?><?/MenuSeparator?>
<?/?>
EDIT I solved the problem..see in my answer the solution

Use window.location.href = link;
and closest() function of JQuery to get what you want
To open it on a new window add window.open(link, '_blank')

i think using data tags is the solution
here the soure: http://api.jquery.com/data/
new li html:
<li data-url="HERE THE URL!"/>
your new jQuery:
$(document).ready(function() {
$("body").on("click", ".submenubtn", function() {
var link = $(this).closest('li').data('url');
//window.alert(link);
window.open(link)
});
});

li element cannot contain href attribute, you can give your li a data attribute such as:
<li data-href="your url here"></li>
then you can use:
$(document).ready(function () {
$("body").on("click", ".submenubtn", function () {
var link = $(this).closest('li').data('url');
window.open(link, '_blank');
});
});
find() used to find the descendants of your element which is not applicable in your case since your anchor is the child of your li element.
So you need to use closest() to traverse up the DOM tree and get the closest parent li instead.
Try to use:
$(document).ready(function () {
$("body").on("click", ".submenubtn", function () {
var link = $(this).closest('li').find('a').attr('url');
window.location.href(link);
});
});

Problem solved
I managed to solve this...it was pretty simple.
$(document).ready(function() {
$(".submenubtn").click(function() {
a = $(this).closest('a').attr('href');
window.open(a);
return false;
});
});

Function gets called twice for each click

The $(".actionsAdListnTo").click function is getting fired twice.
I tried various solutions posted in StackOverflow but nothing worked.
What is the reason of twice firing any pointers please.
How to avoid this?
$(".actionsAdListnTo").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
var ddlselectedVal = $(this).attr('id');
var $form = $("#frmPostToEmailReports");
var selectedListinsCount = selected_Listings.length;
var SelectedMlsnums = selected_Listings.join();
if (ddlselectedVal != "None" && ddlselectedVal != "select") {
//*********** To Cart Functionality
if (ddlselectedVal == 'Tocart') {
if (selectedListinsCount > 500) {
if ($('#errmesg').length == 0) {
$('.messageCenter').append('<span id="errmesg" class ="errmesg"> <span class="messageIcon"></span><span>The maximum number of listings you may select To Add to cart is 500.</span></span>');
return false;
}
} else {
$.post(urlstring,
function (data) {
$(window.open(urlstring, '_blank', 'width=750, height=400')).load(function (e) {
var $formCopy = $("#frmPostToEmailReports").clone();
$($formCopy).append('<input id="SelectedMlsnums" name="SelectedMlsnums" type="hidden" value="' + SelectedMlsnums + '">');
// Here "this" will be the popup window. insert a form element into the popup window.
$(this.document).find("#divfrmInfo").html($formCopy);
e.preventDefault();
});
});
}
}
}
});
HTML :
<div class="actionsAdListnTo">
<span> Add Listing To</span>
<ul id="actionsAdListnTo" class="ddlAddListinTo" style="display: block;">
<li id="Tocart">To CART</li>
<li id="Toportal">To Portal</li>
<li id="SaveListings">Save Listing</li>
</ul>
</div>

The click on li bubbles to its parents, one of them being <div class="actionsAdListnTo">, so the parent's click handler is also called. Try to stop propagation of the click on li:
$(".ddlAddListinTo li").click(function (e) {
e.stopPropagation();
...

In this case it looks it would be more correct to target the link only for the toggle and not the outer div. Be as specific with your selectors as possibe, similar to this:
$(".actionsAdListnTo a#select").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
If you want to be more specific without an id using the structure, you could do it simlar to:
$(".actionsAdListnTo > span:first > a").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
Anyway, the way your HTML is structured there is no need to have the toggle triggered by the div as only the link should react to it.
DEMO - Getting more specific with the selector

What I see here is that you are defining two events in the same place, the second one on a child.
$(".actionsAdListnTo").click( function(e){
...
});
$(".ddlAddListinTo li").click(function () {
...
})
Maybe you can use e.sTopPropagation() in the second one, or e.preventDefault()

Add anchor to links using jquery

I'm new to javascript.
Need to remove any existing anchors (eg: #page33) add other anchor (eg: #page1) to all links in a list dynamically (client side) with javascript or jquery:
Initial html (from server):
<ul id="lang_menu">
<li>English</li>
<li>Tamil</li>
<li>Sinhala</li>
</ul>
this should behave like (replace #page33 with #page1 at client side):
<ul id="lang_menu">
<li>English</li>
<li>Tamil</li>
<li>Sinhala</li>
</ul>
This is where I need this Developing Website
Please help me. Thanks in advance...

Try this way:-
$(function () {
$('#lang_menu li a').attr('href', function (_, oldHref) {
return oldHref + "#page1";
});
});
Demo
For your updated question you can try something like this:
using regex to replace the #part from the url.
$(function () {
$('#lang_menu li a').attr('href', function (_, oldHref) {
oldHref = oldHref.replace(/\#(.*)/g, "#page1");
if(oldHref.indexOf('#') == -1)
oldHref += "#page1";
return oldHref;
});
});
Demo2

If you are dealing with a lot of DOM elements its less expensive to add the anchor lazily.
jQuery("a").bind("click", function(e) {
e.preventDefault();
document.location = jQuery(this).attr("href") + "#page1";
});

How to assign a variable using onclick of html?

I am writing a code where the onclick of html should cause a javascript variable to be assigned a value which causes a function to trigger.
<script type="text/javascript">
function set_str(numb)
{
if(numb == 1)
var str_in_func = 'a.tab_1';
else if(numb == 2)
var str_in_func = 'a.tab_2';
return str_in_func;
}
jQuery(window).bind("load", function() {
str = set_str(num);
// When a link is clicked
$(str).click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
I want the javascript variable str to have a value of 'a.tab_1' when the link below is clicked
Topics
This doesn't seem to work though. The above jQuery function doesn't run at all.

There is a much easier approach to this that doesn't require all the mucking about with HTML attributes:
HTML:
<nav>
tab 1
tab 2
</nav>
<div id="content">
<section>Content 1</section>
<section>Content 2</section>
</div>
JS
$(document).ready(function() {
$('.tab').on('click', function() {
$('.active').removeClass('active');
$(this).addClass("active");
$('#content section')
.slideUp()
.eq($(this).index()).slideDown()
;
});
});
See demonstration here.

Topics
The problem is the var before your variable's name. Remove it and you will be fine. var tells javascript that you are declaring a variable for the local scope, not the context of the window, making it unavailable outside of the current context.
You want:
Topics