Develop Reference

If Statements with data attribute - load two different templates based on what product has been clicked

I would like to open two templates based on the data attribute, if brand is SIM then open template1, if Samsung open the other.
Here is my code:
$('.item .show-detail').click(function(){
if($(this).find('[data-brand="SIM"]')) {
var myLink1 = $(this);
alert('hey');
$('.content .row').fadeOut({complete: function(){detailTemplate1('Voice',$(myLink1).parent().data('brand'), $(myLink1).parent().data('model'), $(myLink1).parent().data('subcat')); $('.content .row').fadeIn(400)}});
}else
($(this).find('[data-brand="Samsung"]'))
var myLink = $(this);
alert('link All');
$('.content .row').fadeOut({complete: function(){detailTemplate('Voice',$(myLink).parent().data('brand'), $(myLink).parent().data('model'), $(myLink).parent().data('subcat')); $('.content .row').fadeIn(400)}});
})

You have a lot of problems in your code.
You can't specify a condition for else, you have to say else if
Wrap else if block in figure brackets.
Use length to find if element exists.
This is assuming that data-brands exist inside item element you're clicking on:
$(document).ready(function(){
$('.item').click(function(){
if( $(this).find('[data-brand="SIM"]').length ) {
var myLink1 = $(this);
alert('SIM');
}
else if ( $(this).find('[data-brand="Samsung"]').length ) {
var myLink = $(this);
alert('Samsung');
}
});
});
http://jsfiddle.net/f32epg16/

jquery objects will always be truthy, you need to check the length.
if($(this).find('[data-brand="SIM"]').length)
Second else does not have a clause. You need to either drop it or use else if.

Try this
$(document).ready(function(){
$('.item .show-detail').click(function(){
if($(this).attr("data-brand")=="SIM")
alert("SIM");
else if($(this).attr("data-brand")=="Samsung")
alert("Samsung");
});
});
Use jquery attr method to find its value and do the relevant work

How do invoke an already existing jquery function on an html anchor?

I created expandable content using jquery on several divs with unique ids. The code is working but now I also want to trigger this function from a top navigation using an anchor. I have tried several things but nothing works. I am very new to jquery so any help would be greatly appreciated.
I am specifically trying to invoke the click() function on each anchor.
Here is my jquery:
(function($) {
$(document).ready(function () {
var panelspeed = 500;
var totalpanels = 6;
var defaultopenpanel = 0;
var accordian = true;
var panelheight = new Array();
var currentpanel = defaultopenpanel;
var iconheight = parseInt($('.icon-close-open').css('height'));
var highlightopen = true;
//Initialise collapsible panels
function panelinit() {
for (var i=1; i<=totalpanels; i++) {
panelheight[i] = parseInt($('#cp-'+i).find('.expandable-panel-content').css('height'));
$('#cp-'+i).find('.expandable-panel-content').css('margin-top', -panelheight[i]);
if (defaultopenpanel == i) {
$('#cp-'+i).find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
$('#cp-'+i).find('.expandable-panel-content').css('margin-top', 0);
}
}
}
$('.expandable-panel-heading').click(function() {
var obj = $(this).next();
var objid = parseInt($(this).parent().attr('ID').substr(3,2));
currentpanel = objid;
if (accordian == true) {
resetpanels();
}
if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) {
obj.clearQueue();
obj.stop();
obj.prev().find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
obj.animate({'margin-top':0}, panelspeed);
if (highlightopen == true) {
$('#cp-'+currentpanel + ' .expandable-panel-heading').addClass('header-active');
}
} else {
obj.clearQueue();
obj.stop();
obj.prev().find('.icon-close-open').css('background-position', '0px 0px');
obj.animate({'margin-top':(panelheight[objid]*-1)}, panelspeed);
if (highlightopen == true) {
$('#cp-'+currentpanel + ' .expandable-panel-heading').removeClass('header-active');
}
}
});
function resetpanels() {
for (var i=1; i<=totalpanels; i++) {
if (currentpanel != i) {
$('#cp-'+i).find('.icon-close-open').css('background-position', '0px 0px');
$('#cp-'+i).find('.expandable-panel-content').animate({'margin-top':-panelheight[i]}, panelspeed);
if (highlightopen == true) {
$('#cp-'+i + ' .expandable-panel-heading').removeClass('header-active');
}
}
}
}
//Uncomment these lines if the expandable panels are not a fixed width and need to resize
$( window ).resize(function() {
panelinit();
});
$(window).load(function() {
panelinit();
}); //END LOAD
}); //END READY
})(jQuery);
The html for the expandable jquery content is:
<div class="expandable-panel" id="cp-3">
<div class="expandable-panel-heading">
<h2>Testimonials<span class="icon-close-open"></span></h2>
</div>
<div class="expandable-panel-content">
<p>Panel HTML...</p>
</div>
</div>
The html anchors that I want to trigger the click() function are:
<ul class="nav">
<li class="nav">What is Justice Court Judge?</li>
<li class="nav">About Reeves Jones</li>
<li class="nav">Testimonials</li>
<li class="nav">Polling Locations</li>
<li class="nav">Map</li>
<li class="nav">Contact</li>
</ul>
Thank you in advance for your help!

If I understand correctly, you don't want to trigger the click event for the anchors, but instead you want to trigger the click event of the corresponding navigation element when an anchor is clicked.
You can do that by adding the following code inside your document-ready function:
$('.nav a').click(function() {
$($(this).attr('href')).find('.expandable-panel-heading').click();
});
This code registers a click handler on all the <a> elements inside the .nav element. It uses the href value of the clicked <a> element to get a jQuery object representing the navigation element.
In this case, you should not place the "onclick" attribute on the <a> elements.
BTW: For valid HTML, you should nest the <a> elements inside the <li> elements, not the other way around.

I recommend not to use inline event handlers.
You can add the following to your jquery code:
$(".nav").find('a').trigger("click");
$(".nav").find('a').click(function(){
//your code
})

adding specific class to element on click jquery

I'm having trouble with a simple nav bar that uses jQuery to add and remove a specific class when a certain page is active. I want a class to append to my aLink class depending on which ID is click. If I click on #aboutLink I want .linkActive to be added, but if I click on #sasLink I want .link2Active to be added. The tutorials I've looked at all have a single class being added, but since both my classes are different I need a specific one to be added depending on which ID is click.
HTML:
<div id="mainNav">
<ul id="nav">
<a id="mainLogo" href="/"><li></li></a>
<a id="aboutLink" class="aLink" href="/"><li></li></a>
<a id="sasLink" class="aLink" href="/savings-and-support"><li></li></a>
<a id="external" href="/"><li></li></a>
</ul>
</div><!--/#mainNav-->
I know my jQuery doesn't make sense, but it's all I could come up with. Logically I get it, but I'm lost on the syntax.
jQuery:
$(function () {
$(".aLink").click(function () {
if ($(this) == $("#aboutLink")
$(this).addClass('activeLink');
else $(this).addClass('active2Link');
});
});
Thanks for any input or direction.

var idToClass = {
'aboutLink' : 'linkActive',
'sasLink' : 'link2Active'
}
$('#nav a').click(function(){
e.preventDefault();
$(this).addClass(idToClass[this.id]);
});
JS Fiddle demo.
You could, instead, use toggleClass() to allow for those classes to be removed by a second click:
var idToClass = {
'aboutLink' : 'linkActive',
'sasLink' : 'link2Active'
}
$('#nav a').click(function(e){
e.preventDefault();
$(this).toggleClass(idToClass[this.id]);
});
JS Fiddle demo.
Edited in response to question, from the OP, in comments, below:
How would I remove the class so that both links don't appear to be active at the same time?
There's a few ways, but because you're adding different class-names to denote the 'active' state, they're a little inefficient. The first approach is to use a brute-force method, effectively looking for all a elements that have a class attribute and setting that attribute to the empty string, and then adding the linkActive/link2Active class-name to the clicked-on a element:
$('#nav a').click(function(e){
e.preventDefault();
var self = $(this);
self.closest('ul').find('a[class]').attr('class', '');
self.toggleClass(idToClass[this.id]);
});
JS Fiddle demo.
The alternative is to remove the specific classes from the elements who have their id listed in the idToClass object. This is, however, somewhat expensive in that it needs to iterate over the object, retrieving the id, finding the element with that id and then removing a class-name:
$('#nav a').click(function(e){
e.preventDefault();
for (var id in idToClass) {
if (idToClass.hasOwnProperty(id)){
$('#' + id).removeClass(idToClass[id]);
}
}
$(this).addClass(idToClass[this.id]);
});
JS Fiddle demo.
If, of course, you use a common class-name then it all becomes much easier:
$('#nav a').click(function (e) {
e.preventDefault();
var self = $(this);
self.closest('ul')
.find('.commonActiveClassName')
.removeClass('commonActiveClassName');
self.addClass('commonActiveClassName');
});
JS Fiddle demo.
References:
addClass().
closest().
event.preventDefault().
find().
removeClass().
toggleClass().

Since you already have ID tags to easily reference... I think you want something more like this?
$(function () {
$("#aboutLink").click(function () {
$(this).addClass('activeLink');
});
$("#sasLink").click(function () {
$(this).addClass('active2Link');
});
});

Try using this instead:
$(function () {
$(".aLink").click(function () {
var currentId = this.id;
if ( currentId == "aboutLink"){
$(this).addClass('activeLink');
else if( currentId == "sasLink") {
$(this).addClass('active2Link');
}
});
});

How to call and run same function simultaneously from different `<LI>`

How to call and run same function simultaneously from different <LI> using javascript or jQuery.
I want to use same function with different parameters. I want to create like Browser tabs.The multiple tabs are loading simultaneously.

(Sorry, I missed the jquery tag somehow originally.)
Using jQuery:
HTML:
<ul id="mylist">
<li>One</li>
<li>Two</li>
</ul>
JavaScript using jQuery:
$("#mylist > li").click(function() {
// Here, `this` refers to the raw DOM element.
// If you want to know which one it is by index,
// you can use $(this).index() (they start at 0).
// Or you can store information on the element
// using data-* attributes, and use
// $(this).data(...)
});
Live example
Original answer from when I'd missed the jquery tag (doh!):
There's the DOM0 way:
<li onclick="doSomething(1);">One</li>
<li onclick="doSomething(2);">Two</li>
Or there's the unobtrusive DOM0 way:
HTML:
<ul id="mylist">
<li>One</li>
<li>Two</li>
</ul>
JavaScript:
var ul = document.getElementById("mylist");
var li;
var index;
for (li = ul.firstChild; li; li = li.nextSibling) {
if (li.nodeName.toUpperCase() === "LI") {
li.onclick = makeCallback(++index);
}
}
function makeCallback(val) {
return function() {
doSomething(val);
}
}
Or the DOM2 way:
(Same HTML.)
JavaScript:
var ul = document.getElementById("mylist");
var li;
var index;
for (li = ul.firstChild; li; li = li.nextSibling) {
if (li.nodeName.toUpperCase() === "LI") {
hookEvent(li, "click", makeCallback(++index));
}
}
function makeCallback(val) {
return function() {
doSomething(val);
}
}
function hookEvent(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
}
else if (element.attachEvent) {
element.attachEvent("on" + eventName, handler);
}

Try to use $.each:
$(...).each(function(index, Element) {
...
});
See: http://api.jquery.com/each/
For example:
$(...).each(function(index, Element) {
var target = $(this);
target.click(function() {
// when user click...
});
// something other logic...
});

$('li').click(function(){ var target = $(this);// get your target element
});

And here is the jquery way:
$("li").click(function(){
doSomething($(this).data('someValue'));
});
With the HTML holding the parameters.
<li data-someValue="one">One</li>
<li data-someValue="two">Two</li>

Add a rel attribute to the <li> element, then call the function on the <li>
$('li.your-class').bind('event_type', function(){
var ref = $(this).attr('rel');
// call your function
myFunction(ref);
}

There are quite a few outof the box solutions for this, such as jquery ui. If you wanted to do it manually you could do it fairly easily.
jQuery tabs:
http://jqueryui.com/demos/tabs/
Have your content areas named:
#main_0
#main_1
...
Then add a selector to LI
Something like:
var CurrentTabIndex = null;
$("li").live('click', function(e) {
var TabIndex = $(this).index;
var divName = "#main_" + TabIndex;
$.ajax({
url: "OpenTab.php",
data: { TabId: TabIndex },
success: function (data) {
$(divName).html(data);
$(divName).show();
if(CurrentTabIndex != null)
{
$("#main_" + CurrentTabIndex).hide();
}
CurrentTabIndex = TabIndex;
}
});
});

How to I undo .detach()?

I'm using JQuery 1.5 and the following code to detach li elements w/ a certain class when a button is clicked. What I want to know is, when that button is clicked again, how do I add the element back onto the page?
<script>
$("#remove").click(function () {
$('li.type').fadeOut(300, function() { $(this).detach(); });
});</script>

The question is: where on the page do you want to put the element back? If, for example, all the li elements go back inside <ul id="foo"></ul> you might use something like this:
var items = [];
$('li.type').fadeOut(300, function() {
items.push( $(this).detach() );
});
$('#replace').click(function() {
for(var i = 0; i < items.length; i++) {
$("ul#foo").append(items[i]);
}
items = [];
});

here u can't for loop.
var demo;
$('li.type').fadeOut(300, function() {
demo = $(this).detach();
});
$('#replace').click(function() {
$("ul#foo").append(demo);
});