We Keep Coding

jQuery prop("disabled") is not functioning

I know this question has been asked and answered many times, but none of the solutions work for this example, even though I know they should. Perhaps other pairs of eyes will help resolve this.
I have placed alerts before and after the code that sets the disabled property, which is indeed set correctly, but the element remains disabled.
I have excerpted the code necessary to reproduce this issue: jsfiddle
Here's some code just to satisfy the SO rule.
$(function () {
var dbVendor = $("#database-vendor");
$("#uses-db").on("change", function (event) {
event.preventDefault();
dbVendor.prop("disabled", ($(this).val() == "Yes" ? false : true));
});
});

Instead of messing with prop("disabled"), do
$dbVendor.selectmenu("enable");
http://jsfiddle.net/r3977gy7/30/
Documentation
http://api.jquerymobile.com/selectmenu/#method-enable

See this solution, please
$(function () {
var dbVendor = $("#database-vendor");
$("#uses-db").on("change", function (event) {
event.preventDefault();
dbVendor.selectmenu($(this).val() === 'Yes' ? 'enable' : 'disable');
});
});

dbVendor.selectmenu(($(this).val() == "Yes" ? "enable" : "disable"))

You are using jquery mobile wich adds "ui-disabled" class to the element and his parent
$(function () {
$("#uses-db").on("change", function (event) {
event.preventDefault();
if($(this).val() == "Yes"){
$("#database-vendor").parent().removeClass("ui-disabled");
$("#database-vendor").removeClass("ui-disabled");
$("#database-vendor").removeAttr("disabled");//edited
}
else{
$("#database-vendor").parent().addClass("ui-disabled");
$("#database-vendor").addClass("ui-disabled")
$("#database-vendor").addAttr("disabled");//edited
}
});
});
actually working code jsffidle

#database-vendor has been wrapped, by jQuery Mobile, with a div and a pile of JavaScript. Changing the disabled property of the select isn't causing jQuery Mobile to respond and change its div.
Removing jQuery Mobile will make the code work.
If you want it to work with jQuery Mobile, then you'll need to look at the jQuery Mobile API to figure out how to enable its pseudo-select elements.

Wrapping a script in a call function

I have a script im currently using, the issue is that i have to add the script directly after every html img tag. So there is the same script in several different places throughout the site. I am wondering if it is possible to wrap this script in a simple function call, and i can just add the function throughout the site instead of the whole script.
EDIT: I should have mentioned. This is a lightbox for a Tumblr theme. photo_{PostID} is valid. photo_{PostID} retrieves the unique photo identifier so the lightbox will display the correct image. The script right now works 100% perfectly fine no doubt about that. I'm looking to turn it all into a simple 1 liner call function to use instead of needing to paste the script after every img tag.
the script is below, thanks.
<script class="inline_embed" type="text/javascript">
var domain = document.domain,
photo_{PostID} = [{
"width": "{PhotoWidth-HighRes}",
"height": "{PhotoHeight-HighRes}",
"low_res": "{PhotoURL-250}",
"high_res": "{PhotoURL-HighRes}"
}];
function event_is_alt_key(e) {
return ((!e && window.event && (window.event.metaKey || window.event.altKey)) || (e && (e.metaKey || e.altKey)));
};
document.getElementById('photo_{PostID}').onclick = function (e) {
if (event_is_alt_key(e)) return true;
window.parent.Tumblr.Lightbox.init(photo_{PostID});
return false;
}
</script>

You tagged this question with [jquery] so I'm going to give an answer using jquery, even though your sample code doesn't use it.
Here's a fiddle:
http://jsfiddle.net/u2f2b5qq/
Given a few images on the page, like this:
<img src="http://placehold.it/250x150">
<img src="http://placehold.it/200x250">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/150x50">
You can do some action on all of them once the page loads, like this:
$(function() {
$('img').each(function() {
$(this).on('click', function() {
alert('You clicked ' + $(this).attr('src'));
// window.parent.Tumblr.Lightbox.init(this);
});
});
});
What I've done is attach a click handler to every image and alert when it's clicked. You would replace that with your lightbox code.
I don't have a full understanding of how tumblr does its magic with interpolating those values, but I assume you could do something like this for each image. It attaches the Photo data to each image element, and then retrieves it later.
<img src="example.jpg" id="photo_{PostID}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-low_res="{PhotoURL-250}" data-high_res="{PhotoURL-HighRes}" />
and then in the jquery kickoff:
$(function() {
$('img').on('click', function() {
var $img = $(this);
alert('You clicked ' + $img.attr('src'));
window.parent.Tumblr.Lightbox.init({
width: $img.data('width'),
height: $img.data('height'),
low_res: $img.data('low_res'),
high_res: $img.data('high_res')
});
});
});
Give that a shot.

JQuery fades not working in IE9

I'm new to JQuery and can't for the life of me figure out why this isn't behaving properly. As the content in my "content" div changes, I want it to fade in and out. I created a generic "load" function to do this:
function loadPage(page, callback) {
if(current_doc != page) {
current_doc = page;
$("#content").fadeOut(400, function() {
$("#content").load(current_doc, function() {
$("#content").hide().fadeIn(400, function() {
if(typeof(callback) == 'function'){ callback(); }
});
});
});
}
}
Is there some sort of glaring mistake that I'm missing?
Thanks.
P.S. - This code works fine in Firefox.

One thing to check in IE, in Internet Options > Advanced, under Multimedia should be a checkbox that says "play animations in webpages". Ensure that is checked.

While I'm not entirely sure why, placing the content div inside another div and fading that instead seems to have done the trick. I would think that that would have been giving me issues only if "content" itself were being deleted, but that isn't the case from my code. Oh well.

how can I intercept a click for all img's ? I have a bunch of images, each needs to reply to a click.

I would like to present images to my users, where they can select them. I need them to select a limited number, say 5, so:
The images are shown in a matrix, and the user can click them.
I thought:
function boom()
{
this.css('background-color','#fff');
this.data('clicked','yes');
// I should also make checks here to see how many were clicked already
}
$('img').click(boom);
// I thought this would connect all img's that were clicked upon to this function, where I can call the 'this' with the css function...
But it doesn't work as I thought it would...
Any help would do, thanks !

$(function(){
var clicked_img = 0;
$('img').click(function(){
$(this).css('background-color','#fff').data('clicked','yes');
clicked_img++;
});
});
EDIT: UPDATED CODE BELOW FOR NEW REQUEST, FOUND IN COMMENT THREAD:
Per your updated code request, if your HTML is this:
<img id="one" class="clicked" src="img/one.png" />
<img id="two" class="clicked" src="img/two.png" />
This JQuery has been fixed to work for you:
$('img.clicked').click(function(){
boom(this);
});
function boom(e) {
if($(e).data('clicked')=='yes') {
$(e).data('clicked','no').css('border','none');
}
else {
$(e).data('clicked','yes').css('border','3px solid #cccccc');
}
}
Working demo of the new code: http://jsfiddle.net/Vwye8/

Try assigning a variable to an annonymous function
var boom = function()
{
this.css('background-color','#fff');
this.data('clicked','yes');
// I should also make checks here to see how many were clicked already
}
and then calling the $('img').live("click",boom);
js fiddle here: http://jsfiddle.net/t7u6t/

asp.net page reloading on javascript onclick function

Novice question I guess:
The Scenario:
I have an asp.net page that contains 6 divs and 6 hyperlinks which are linked to javascript function:
function showdiv(divname)
{
hideallcontentdivs();
var targetdiv = document.getElementById(divname);
targetdiv.style.display="block";
}
var alldivs=new Array();
function hideallcontentdivs()
{
alldivs=document.getElementsByTagName("div");
for(var i=0; i<alldivs.length;i++)
{
if(alldivs[i].className=="content")
{
alldivs[i].style.display="none";
}
}
}
ImageButton:
<img alt="alternate_text" src="imagesource" border="0px" />
the divs have id's: item1, item2....item6 and the hyperlink specify to the javascript function the id of the div that needs to displayed.
The Problem:
Whenever I click on an hyperlink, the effect that I want is achieved but the page reloads too. Don't really know where I'm going wrong but if anyone could guide me in the right direction, I'll be very very thankful.

Just return false on click
onclick="showdiv('item1');return false;"
Update:I just point the issue :), you can return the false where ever you like.
onclick="return showdiv('item1');"
and say to showdiv() to return false

You should add return false to your onclick handler. This prevents the default behaviour of the link.
A better solution would be to use jQuery or some other library and attach the event to the element. They also contain special functions to prevent the default behaviour:
Html:
<a id="button1" href="#"><img alt="alternate_text" src="imagesource" /></a>
Javascript/jQuery:
$('#button1').click(function(event) {
$('div').hide(); // hides all divs
$('#div1').show(); // shows the div with the id 'div1'
event.preventDefault(); // prevents postback
});

always, return false :)
but i'd rather put it in the function
function showdiv(divname)
{
hideallcontentdivs();
var targetdiv = document.getElementById(divname);
targetdiv.style.display="block";
return false;
}

+1 for Aristos' answer, although if you refactor the return false; to the end of the showdiv function you want have to update all the links.

return false is the key, as the other answers have said.
Just to add my tuppence though: you don't really need to use an anchor here and imho it's not good semantic style. Just use a span or div instead, and then the problem goes away.