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>");
});
});

Select correct bound button using Jquery

I have 2 buttons in a table row. A "start" button and a "complete" button. Right now I'm using this code to run an AJAX call.
$(document).ready(function(){
$(document).on("click", "button", function(){
rowID = "row" + this.id;
$("#" + rowID).load("eventHandlersPHP/updateStart.php", {
roomID: this.id
});
});
$(document).on("click", "button", function(){
rowID = "row" + this.id;
$("#" + rowID).load("eventHandlersPHP/updateComplete.php", {
roomID: this.id
});
});
});
Right now my code doesn't know which button to grab and just randomly picks which code to run.
How do I only select the first button or second button in that row and still have it be bound.

change your selector :
$('button:nth-child(1)').click(function(){
...
})
$('button:nth-child(2)').click(function(){
...
})
or user javascript to call click event on html code:
in HTML:
<button onclick="fun1()">btn1</button>
in javascript:
function fun1(){
...
}

You can setup a conditional to check the text of the button and use that to select which template to load. This will also allow you to combine your two functions.
$(document).ready(function(){
$(document).on("click", "button", function(){
rowID = "row" + this.id;
if ($(this).text() == "start"){
$("#" + rowID).load("eventHandlersPHP/updateStart.php", {
roomID: this.id
});
}else {
$("#" + rowID).load("eventHandlersPHP/updateComplete.php", {
roomID: this.id
});
}
});

unable to set CSS and click handler in jQuery after use of replaceWith() [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I am using jQuery to replace normal checkbox with image. I am able to replace checkbox with image but unable to set CSS and click handler on image.
This is my jQuery code.
(function ($) {
$.fn.SetOnOff = function (onImage,offImage) {
debugger;
var html = '<img style="width: 80px; height: 30px" src="'+offImage +'"/>';
$(this).replaceWith(html);
$(html).css('cursor','pointer');
$(html).click(function(){
var fileName = $(this).attr('src');
if (fileName == onImage)
$(this).attr('src', offImage);
else
$(this).attr('src', onImage);
});
return $(this);
};
} (jQuery));
can anybody let me know how to do this?
you use This link to test it

use event delegation for dynamically created element
$("button").click(function () {
var v = "<div>" + $(this).text() + "</div>";
$(this).replaceWith(v);
$(v).css('cursor', 'pointer');
});
$(document).on("click", "div", function () {
alert($(this).text());
});
DEMO

Your css and click methods are not being called on the replaced element but on a newly-created HTML jQuery is generating from your html string.
Try this instead:
var $v = $("<div>" + $(this).text() + "</div>");
$(this).replaceWith($v);
$v.css('cursor', 'pointer');
$v.click(function () {
alert('a');
});

you are trying to set css to string. make it jquery object just like below
(function ($) {
$.fn.SetOnOff = function (onImage,offImage) {
debugger;
var html = $('<img style="width: 80px; height: 30px" src="'+offImage +'"/>');
$(this).replaceWith(html);
$(html).css('cursor','pointer');
$(html).click(function(){
var fileName = $(this).attr('src');
if (fileName == onImage)
$(this).attr('src', offImage);
else
$(this).attr('src', onImage);
});
return $(this);
};
} (jQuery));
Demo

Remove Select option after doing the action

I have a Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed.
FIDDLE
Is this possible ? Any help will be appreciated.
JS
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
});

Fixed my answer to reflect the update in the question:
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var selIndex = $("#contact-location").prop('selectedIndex');
$("#contact-location").prop(selIndex).remove();
$('div').hide();
div.show();
});
});
http://jsfiddle.net/uwt73sj3/
var selIndex = $("#contact-location").prop('selectedIndex'); here we set the select element index to a variable we can work with later.
$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.

You could try something like:
$(document).ready(function() {
$('#contact-location').change(function(){
$('#contact-location option').show(); //clean alls
$('option:selected',this).hide(); // hide selected
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
})
LIVE DEMO

Why not make things more generic at the same time?
$(function () {
$('#contact-location').change(function () {
var $this = $(this);
// show only correct location
$('div').hide(); // maybe use a class rather than hiding every <div>
$('#' + $this.val()).show();
// show only alternate options
$this.find('option').show();
$this.find('option:selected').hide();
});
});

one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).
$(document).ready(function(e) {
$('#contact-location').children().click(function(){
var $select = $(this).parent();
var $clicked = $(this);
var location = $clicked.val(); //is the same like $select.val()
var $div = $('#' + location);
$clicked.hide();
$select.val($select.children(":first-child"));
$div.show();
});
});
I used $ before the names of some variables to indicate that these variables store jQuery objects.

You can get the selected option like this:
$("option:selected", this);
From there you can hide or remove it:
$("option:selected", this).hide();
$("option:selected", this).remove();

jQuery delegate not working

My script:
(function($){
$.fn.megaswitcher = function(settings) {
return this.each(function() {
var $i = $(this),
current,
childs = $i.find('.selection li').length; // returns desired number
$i.find('.selection li').delegate('.active', 'dblclick', function(e){
e.preventDefault();
current = $i.find('.selection li').index(this);
alert('triggered # ' + current); // doesn't even execute
var _delay = $(this).attr('name') > 0 ? (parseInt($(this).attr('name')) * 1000) : 5000;
$(this).delay(_delay).show(0, function(){
if((current + 1) < childs){ // if not last
$(this).removeClass('active').next().addClass('active').show(0, function(){
$i.find('.image img').addClass('tempp');
$(this).find('img').clone().hide().addClass('temp').appendTo($i.find('.image')).fadeIn(400, function(){
$i.find('.image img.tempp').remove();
});
}).trigger('dblclick');
}else{
$(this).removeClass('active');
$i.find('.selection li:first').addClass('active').show(0, function(){
$i.find('.image img').addClass('tempp');
$(this).find('img').clone().hide().addClass('temp').appendTo($i.find('.image')).fadeIn(400, function(){
$i.find('.image img.tempp').remove();
});
}).trigger('dblclick');
}
});
});
$i.find('.selection li.active').trigger('dblclick');
});
};
})(jQuery);
Gotta admit, that, that's a huge mess over there, but I have no idea why that delegate is not working...
Any ideas?
P.S. I have a different plugin based on this same technique with dblclick, that works flawlessly, except, it doesn't do item selection with find();, and I have a feeling that it's the thing that's causing the problem, but I don't know with that to replace it.
Thanks in advance!

You have to call delegate on the parent of the items that you want to attach the event.
Instead of:
$i.find('.selection li').delegate('.active' ...
you should do
$i.find('.selection').delegate('li.active'