We Keep Coding

Show/Hide Table Based on Multiple Unordered List Selections

I'd appreciate some help regarding this Fiddle. A user would be presented with two unordered lists. By clicking on an option in one of the lists, a table will be shown and all else hidden.
My problem is that with my current setup, I can't get all the table combinations to work properly. I can use $(this).attr("value") on click to get the selected value for a given list, but using $("#select2 li").attr("value") for instance will always return value "c", even if a user had selected "option d" previously. This results in options like table "bd" not being possible.
Here's the JavaScript:
$(document).ready(function () {
$('.select-menu a').click(function () {
var text = $(this).text();
$(this).parent().parent().siblings().html(text + ' <span class="caret"></span>');
$(this).parent().siblings().removeClass('active');
$(this).parent().addClass('active');
});
$("#ac").show();
$("#select1 li").click(function () {
target = $(this).attr("value") + $("#select2 li").attr("value");
$('table.table').hide();
$("#" + target).show();
});
$("#select2 li").click(function () {
target = $("#select1 li").attr("value") + $(this).attr("value");
$('table.table').hide();
$("#" + target).show();
});
});
I wanted to allow for the user to have to provide only one input for either list to see a different table, instead of requiring a selection in both lists.
Can anyone help me with this please or suggest a better approach? Thanks!

you fetching value with only #select2 li instead of #select2 li.active
try to replace your code with this block even i have updated in jsfiddle.
$("#select1 li").click(function () {
target = $(this).attr("value") + $("#select2 li.active").attr("value");
$('table.table').hide();
$("#" + target).show();
});
$("#select2 li").click(function () {
target = $("#select1 li.active").attr("value") + $(this).attr("value");
$('table.table').hide();
$("#" + target).show();
});

Jquery previous .html() element still showing when new element clicked

I have to write code which finds all anchors and attaches a function that displays a popup of the elements text. My code is probably a mess, but I was able to get it working however the issue I have now is:
If I click link 1, then link 2, then click link 1 again, it displays link 2's text however if i click it again it displays the correct text.
I am not sure exactly how to rewrite or go about fixing this code to properly display the element which is clicked, text all the time.
here is a jsfiddle example: http://jsfiddle.net/2aLfL/1/
$(document).ready(function() {
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('a').click(function(){
if($(this).hasClass('selected')){
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
var elText = $(this).text();
$('#elPop').html("<p>" + "<br><br>" + "You just clicked: <br><b>" + elText + "</b><br><br><br>" + "Click anywhere to Close" + "</p>");
console.log(this);
$("#closeWin").click(function () {
$('.anchorpop').hide();
});
}
return false;
});
});
$(function close(){
$(document).click(function(){
$('.anchorpop').hide();
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
});

You're binding the following click handler
$("#closeWin").click(function () {
$('.anchorpop').hide();
});
inside <a> click handler so whenever a link is clicked, multiple handlers are being added.
You can avoid many unnecessary code using toggleClass() method.
You can also bind same event handlers to multiple elements by passing additional selectors.
after all your code boils down to
$(function () {
$('a').click(function () {
var htmlString = "<p>" + "<br><br>" + "You just clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "Click anywhere to Close" + "</p>"
$('.pop').html(htmlString).slideFadeToggle(function () {
$(this).toggleClass('selected');
});
return false;
});
$("#closeWin, .anchorpop").click(function () {
$('.anchorpop').hide();
});
});
and the custome slideFadeToggle function.
Updated Fiddle

jQuery button. Remove when clicking icon

Im using jQuery ui button to create divs that look like buttons dynamically. Clicking on these divs should open a dialog and clicking its icon should remove the div(button). Ive tried several different approaches but I cant seem to get the result I want.
Closest thing Ive achieved is by using onclick on both the icon & on the div itself, but the problem is that when clicking the icon I would first call the icon's onclick and then afterwards calling the div's onclick, which will cause the dialog to open after the div has been removed.
Ive also tried to add a disable property and set it to true on the div inside the icon's onclick and check for that inside the div's onclick but that dont work(I kinda get why.)
So my question is then: How can I create a button that will open a dialog when clicked on and with a icon that, when clicked on, removes the button?
Code:
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox' onclick='ButtonClicked(this);'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).delegate("span.ui-icon-circle-close", "click", function () {
var btnId = $(this).closest("div").remove().attr("aria-controls");
$("#" + btnId).remove();
});
$('.ui-icon-circle-close').attr('onclick', 'IconCloseClicked(this);');
}
function IconCloseClicked(value) {
$(value).parent().prop("disable", "true");
//alert($(value).parent().attr("id"));
alert("icon");
Remove($(value).parent());
}
function ButtonClicked(o) {
var test = $(o).prop("disable");
alert("div");
if ($(o).attr("disable") == undefined) {
Opendialog();
}
}
function Remove(value) {
$(value).remove();
}
function Opendialog() {
$("#dialog").dialog("open");
}
Ps. Reason why Ive used the button is because it is the widget that looks the most like what I want in jquery ui.
Updated(What I ended up with):
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).click(function (e) {
Opendialog();
});
$('.ui-icon-circle-close').click(function (e) {
$(this).parent().remove();
e.stopPropagation();
});
}
function Opendialog() {
$("#dialog").dialog("open");
}

I'm assuming the icon is a child element of the button div. When the icon is clicked, you need to stop the click event bubbling to the parent div. You can do this with event.stopPropagation()
$('.icon').click(function(e){
e.stopPropagation();
});

how to append more than one button with different id to a div by creating a single function

My task is to append button dynamically to a div .. and i want to apppend more than one button with different id to a single or different div by using a simple function. the below code that i have to used to append single button to a div..
<script type="text/javascript">
$(document).ready(function () {
addInputTo($(".myClass"));
$("#field").click(function () {
alert("hi");
$(".myClass").appendTo({
icons: {
primary: "ui-icon-locked"
},
});
});
});
function addInputTo(container) {
var inputToAdd = $("<input/>", {
type: "button",
id: "field",
value: "Test Button"
});
// var s="trype='button";
container.append(inputToAdd);
}
</script>
<div class="myClass"></div>
Is there any solution to append more than one button by creating single function like..
_app.CreateButton (id, text, primaryIcon, secondaryIcon, className);
please help me
and we use the below code to append icon to button but it dosen't work please help me
<script type="text/javascript">
function runEffect() {
debugger;
alert("1");
$( ".AdvSearchSaveButton" ).button({
icons: {
primary: "ui-icon-locked"
},
});
}
$(document).ready(function () {
$("#filed").click(function () {
alert("hi");
runEffect();
// $( "#filed" ).addClass( "ui-icon-locked" );
});
});
</script>

you can change the function addInputTo to
function addInputTo(container, id, text){
var inputToAdd = $("<input/>", { type: "button", id: id, value: text });
container.append(inputToAdd);
}
then call it using
addInputTo($(".myClass"), 'filed', 'test button');

This is really all you need. I just tied the event handler to the click of any <div> with the class = "myClass" with a self calling function.
HTML:
<div class="myClass" style="width:150px; height:150px;background-color:red;"></div>
Javascript:
var id=0;
$(function(){
$(".myClass").click(function(){
id++;
var newButton = "<input type='button' id='number" + id.toString() + "'value='test button'></input>";
$(this).append(newButton);
});
});
Just click on your <div> and a new button with a unique id will be appended to the <div>. Cheers!

Jquery toggle background color

I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});​

On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});

Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});