We Keep Coding

Image change depending to dropdown value change?

I am using Templating Example of select2 library. When first time I change dropdown value it works and preview correct image, but second time, it appends second image and do not place first image.
Js:
$(document).ready(function () {
$('select#event_palette').change(function () {
var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
$("#app-bg").append("<img src='"+ selectVal + "'></img>");
// $("#app-bg").remove();
});
});

You are appending new image to same node replace it to make it work.
$(document).ready(function () {
$('select#event_palette').change(function () {
var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
$("#app-bg").html("<img src='"+ selectVal + "'></img>");
});
});

use html() instead of append().
$(document).ready(function () {
$('select#event_palette').change(function () {
var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
$("#app-bg").html("<img src='"+ selectVal + "'></img>");
});
});

Jquery ui tabs auto select newly created tab

This question is about jquery ui tabs selecting.
I have been trying to get this seemingly simple thing to work for a few hours.
It doesnt select the first dynamicly added tab, but any tab added after that, is auto selected just fine. ( fiddle )
I create a new tab using,
function addTab() {
var label = tabTitle.val() || tabNameCounter,
id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").find('li:last').before(li);
tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
tabs.tabs("refresh");
tabCounter++;
tabNameCounter++;
}
And try selecting it with:
var tabs = $('#tabs').tabs({
activate: function (event, ui) {
if (ui.newPanel.is("#add-tab")) {
tabs.tabs("option","active",-2);
}
}
I would really appreciate some insight, Thank you.

If you call setActiveTab(); inside the click handler it seems to be working fine.
$("#add-page").click(function () {
if (tabNameCounter < 6) {
addTab();
addTabBut();
setActiveTab();
}
});

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

jqGrid deleted row with confirm dialog

i am using struts2-jquery-jqgrid. i have buttons in the columns of the grid. i need to implement a confirm dialog when user clicks to delete.
SOLUTION:
// JAVASCRIPT THAT ADD BUTTONS IN THE COLUMN AND EVENT CLICK
$.subscribe('gridCompleteTopics2', function() {
var ids = jQuery("#gridtable2").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var fila = jQuery("#gridtable2").jqGrid("getRowData", ids[i]);
link = "<button id='opener' onClick='deleteRecord(" + fila["idplanilla_det"] + ");'>Open Dialog</button>";
jQuery("#gridtable2").jqGrid('setRowData',ids[i],{acti:link});
}
});
function deleteRecord(id) {
alert(id);
$("#dialogo").dialog("open");
}
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"ACEPTAR": function() {
$( this ).dialog( "close" );
},
"CANCELAR": function() {
$( this ).dialog( "close" );
}
}
});
});
<div id="dialog" title="Empty the recycle bin?">
These items will be permanently deleted and cannot be recovered. Are you sure?
WORK.

First of all, you should not have multiple controls with the same ID. Here, you are creating ids.length-many buttons with id opener. Instead, assign a class to the buttons, e.g. opener.
Then, you should move your .opener click function after the buttons were created, as such:
$.subscribe("gridCompleteTopics2", function () {
var ids = jQuery("#gridtable2").jqGrid("getDataIDs");
for (var i = 0; i < ids.length; i++) {
var fila = jQuery("#gridtable2").jqGrid("getRowData", ids[i]);
link = "<button id='opener'>Open Dialog</button>";
jQuery("#gridtable2").jqGrid("setRowData", ids[i], { acti: link });
}
$(".opener").on("click", function() {
$("#dialog").dialog("open");
});
});

JQuery dynamically added javascripts tags close button

I'm using javascript to dynamically add new tabs in jquery. I use the following code:
$("#mytabs1").tabs("add","list.action","New Tab");
My question is how i can add the close button (x button) to those dynamically added tabs?

There is actually an example to achieve this on the jQuery ui tabs demo pages.
Use the tabTemplate property:
HTML template from which a new tab is created and added. The
placeholders #{href} and #{label} are replaced with the url and tab
label that are passed as arguments to the add method
Here's the code from the site:
var $tabs = $( "#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function( event, ui ) {
var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
$( ui.panel ).append( "<p>" + tab_content + "</p>" );
}
});
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
});
In your implementation, you should not use .live() but delegate() or on(). Something like:
$('#tabs').on('click', 'span.ui-icon-close', function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
});

Tabs do not inherently have an x button. If you are adding an x button to your tabs somewhere else, and would like this same x button added to new tabs you add, you could try using the tabsadd event:
$("#mytabs1").tabs({
add: function(event, ui) {
//your code that adds the custom x button to the new tab here
}
});

If you want to select immediately new added tab:
var $tabs = $('#tabsid').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
this will not work..