We Keep Coding

Check if file exists and display it - order of code

Section on my website with a list of fixtures.
When I click on one it loads the fixture information in a modal window - each club might have an image so I want to check if there is an image and if so display it otherwise display a generic image.
Code is below:
$('#fixModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var hclub = button.data('hclubid')
imgpath = "/images/clubcrests/"
homecrest = imgpath + hclub + '.jpg'
gencrest = imgpath + 'generic.jpg'
$.get(homecrest)
.done(function() {
homecrestsrc = "<img src='" + homecrest + "'>"
}).fail(function() {
homecrestsrc = "<img src='" + gencrest + "'>"
})
var modal = $(this)
modal.find('.fixmodhomec').html(homecrestsrc)
})
But first time I click on it I get the error:
homecrestsrc is not defined
$.get seems to run after the modal.find.
If I click on it again it displays but always the image it should have from the previous time the button was clicked.
How can I make sure the $.get bit runs first?

$.get is asynchronous - did you read the documentation? modal.find will have run long before the response from the AJAX call has come back.
You need to move your logic inside the callbacks.
$('#fixModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget),
hclub = button.data('hclubid'),
modal = $(this),
imgpath = "/images/clubcrests/",
homecrest = imgpath + hclub + '.jpg',
gencrest = imgpath + 'generic.jpg',
homecrestsrc;
$.get(homecrest).done(function () {
homecrestsrc = "<img src='" + homecrest + "'>"
}).fail(function () {
homecrestsrc = "<img src='" + gencrest + "'>"
}).always(function () {
modal.find('.fixmodhomec').html(homecrestsrc);
});
})

This is the confusing part of js/ajax. This code does not wait for an ajax reaponse, but instead jumps strait on to the next command. Meaning it will continue with your last 2 lines of code, and then the response will come thru, and then it will set homecrestsrc for the first time. Whatever you expect to be done AFTER you get a reaponse, you put in done and fail. So put your last or last 2 lines of code inside the done and fail functions.
Sry typing from phone so i cant explain too much, but hope you understand, it takes time to get it bcs this is not so obvious when you start

The other answer kind of covered this... basically, if the code below the get request depends on that result, it needs to be inside the .done() block.
However, I'd also like to point out that having your image displaying depend on the whether a get request fails or not is bad practice. You should instead have your api route return true if that image exists or false if it doesn't. Then you can filter the correct picture in a .success() block.
.fail() should be reserved for debugging only.

jQuery working with dynamic elements

I have so much problem working with dynamic elements in jQuery, that I just need to ask a question. First, a little example from my system:
main.js
$(function () {
renderPlaceList(places);
setupVoting();
}
The two function are in separate files, renderPlace.js is a file, where I am creating a new elements. These elements have class .option and they are then stored in a .places div. So far so good. But then I want to work with these elements in setupVoting():
$('.participants .option').each(function () {
...
})
But this just doesn't seem to be working. When I call the code in browser console, it runs just fine. But if it's run while the site is loading, the jQ selector won't find the elements. Where is the catch?
Thanks for your time and answers :)
EDIT
renderPlaces function
function renderPlaceList(places) {
var htmlMeetingPlace = "";
into = $(".places");
$(places).each(function(_, d){
htmlMeetingPlace +=
"<div class='option' data-meeting_place_id='" + d.id + "'>" +
"</div>";
});
into.fadeOut('slow',function(){
into.html("");
into.append(htmlMeetingPlace);
into.fadeIn('slow');
});
}

Problem is that when renderPlaceList return.. $(".places") is not enought formated.. because is still fadeouting..
You can try
function renderPlaceList(places) {
var htmlMeetingPlace = "";
into = $(".places");
$(places).each(function(_, d){
htmlMeetingPlace +=
"<div class='option' data-meeting_place_id='" + d.id + "'>" +
"</div>";
});
into.fadeOut('slow',function(){
into.html("");
into.append(htmlMeetingPlace);
into.fadeIn('slow');
setupVoting(); //here!
});
}

jQuery append img element with url on src not working in IE and FF

I have an image tag that retrieves the src by an url, like:
<img src="http://localhost:2000/User/GetImage/1" />
That element is generated by jQuery, that is:
this.updateImage = function()
{
console.log("Change me!");
var context = this;
var imageSrc = webApiUrl + "User/GetImage/" + this._id;
$("#ga-application-header .user-info-image").each(function()
{
$(this).empty();
/* First try */$(this).append($("<img title='" + context._firstName + " " + context._lastName + "' />").attr("src", imageSrc));
/* Second try*/$(this).append("<img title='" + context._firstName + " " + context._lastName + "' src='" + imageSrc + "' />");
});
}
That lines with coments - first and second try - are the way I've tried the get this achieved.
Now the most important detail. When page is loaded, this function is called and displays the image. This works. But if I call it again(when user change it's picture) the image doesn't shows in IE and FF. Only on Chrome. IE and FF don't even open an image request(on network tab in console) for it. Note that the console.log text "Change Me!" is always called.

The issue is caused by the browser caching the image. The fix is to append a random query string to the image source.

First, I tend to use the following pattern as opposed to string concatenation.
var img = $('<img/>').attr('title',context._firstName).attr('src',imageSrc);
$(this).append(img);
Second, inside your this.updateImage, could you console.log/dir(this), I'm guessing your context isn't proper, you may want to do a var that = this, to keep your references in check.

I just ran into the same issue with IE.
This helped me:
Instead of
$form.find( ".classname" ).append( content );
This worked in IE and all other browsers:
$form.find( ".classname" ).html( $form.find( ".classname" ).html() + content );
Hope it helps somebody here...

Can't change iframes onload listener in IE9

I have the following code within an external javascript file.
jQuery(function ($) {
//////////////////////UPCOMING EVENTS JSON SERVER START///////////////////////////
var eventList = $("#eventList"); //cache the element
$.getJSON("/JsonControl/Events.json", function (jsonObj) {
val = "";
for (var i = 0; i < jsonObj.events.length; ++i) {
val += "<p>" + jsonObj.events[i].dateMonth + "/" + jsonObj.events[i].dateNumber +
"/" + jsonObj.events[i].dateYear + " - <span id='EL" + i + "' class='link' " +
"onclick=plotEvent(" + i +")>" + jsonObj.events[i].title + "</span></p>";
}
eventList.html(val);
});
//////////////////////UPCOMING EVENTS JSON SERVER END/////////////////////////////
});
function plotEvent(index)
{
$.ajax({
url: "/JsonControl/Events.json",
dataType: 'json',
async: false,
success: function (jsonObj)
{
var eventBox = window.frameElement;
alert("This alert fires in all browsers, including IE9")
eventBox.onload = function ()
{
alert("This alert doesn't fire in IE9.")
window.frameElement.onload = null; // unset it so it only fires once
eventBox = eventBox.contentDocument || eventBox.contentWindow.document;
eventBox.getElementById("title").innerHTML = (jsonObj.events[index].title);
eventBox.getElementById("content").innerHTML = (jsonObj.events[index].explanation);
eventBox.getElementById("dateHolder").innerHTML = (jsonObj.events[index].dateMonth + "-" + jsonObj.events[index].dateNumber + "-" + jsonObj.events[index].dateYear);
};
eventBox.src="/Event htms/Event.htm";
}
});
}
The page that loads this script is in the iframe itself. A very similar function called in a different external js file, from the main page outside of the iframe (for a different but similar purpose) works in all browsers just fine. The only difference is that with this code I have to target the onload of the iframe from within the iframe, instead of just grabbing the iframe by id. I then attempt to change, the onload of said iframe, for use with the next internal iframe page (which is why I need to preserve the json array index [i] when dynamically writing the first iframe page's innerHTML.
Sorry if that was a bit wordy, and/or confusing, but suffice it to say that with using the above-pasted code, I have no problems... except with IE (tried in IE9). I have tried dozens of examples and supposed solutions, but nothing has worked. Using IE9.
Here's what I mean when I say 'it doesn't work in IE9':
This part of the code within plotEvent() doesn't fire:
eventBox.onload = function ()
{
alert("This alert doesn't fire in IE9.")
window.frameElement.onload = null; // unset it so it only fires once
eventBox = eventBox.contentDocument || eventBox.contentWindow.document;
eventBox.getElementById("title").innerHTML = (jsonObj.events[index].title);
eventBox.getElementById("content").innerHTML = (jsonObj.events[index].explanation);
eventBox.getElementById("dateHolder").innerHTML = (jsonObj.events[index].dateMonth + "-" + jsonObj.events[index].dateNumber + "-" + jsonObj.events[index].dateYear);
};
Is there any solution to this problem, or is this sort of thing why iframes aren't used more often (that is, that IE doesn't fully support them)?

Try eventBox.contentWindow.onload or maybe $(eventBox).load(function)

jquery show() question

I have a script that builds a dynamic div with contents. The button that initializes the build uses an onclick command and a ajax call to retrieve the appropriate info, then builds the div. This all works great, it builds the div, and jquery shows the div and the button changes to the close button. The problem now is that the button still has the onclick command attached to it, and I was to strip this command off, and reapply it if the user wants to view the information again.
The button code on initial load:
<img class="showPixFeature hidden" id="butShowImage_<?php echo $row_rsFeatureAds['AdID']; ?>" src="../images/class_see_more.png" align="absmiddle" onclick="getRemoteInfo('PicDetailFeature_<?php echo $row_rsFeatureAds['AdID']; ?>')" style="cursor: pointer" />
Script that builds the div:
function showImage(IDS, selectedID){
var adType = new Array();
adType = IDS.split("_");
//alert(adType);
var thumbs = new Array();
thumbs = adType[1].split("~");
var adID = thumbs[0];
//alert(adType[0] + '_' + thumbs[0]);
var picImage = document.getElementById(adType[0] + '_' + thumbs[0]);
removeChildren(picImage);
var picThumbs = document.createElement('div');
arLen = thumbs.length;
//alert(arLen);
if(arLen > 2){
for ( var i=1, len=arLen; i<len; ++i ){
//alert(thumbs[i]);
var thumbNail = document.createElement('img');
thumbNail.src = "../images/listings/" + adID + "_" + thumbs[i] + "_sm.jpg";
thumbNail.className = "thumbNails";
thumbNail.id = adID + '_' + thumbs[i];
picThumbs.appendChild(thumbNail);
picImage.appendChild(picThumbs);
addHandler(adID, thumbs[i], 1);
}
}
var previewImageContainer = document.createElement('div');
var previewImage = document.createElement('img');
previewImage.id = 'full_' + adID;
previewImage.src = "../images/listings/" + adID + "_" + "1_.jpg";
previewImage.className = 'thumbNails';
previewImageContainer.style.width = "700px";
previewImageContainer.style.textAlign = 'center';
previewImageContainer.appendChild(previewImage);
picImage.appendChild(previewImageContainer);
var closeButton = document.createElement('img')
closeButton.src = '../images/close_pix.png';
closeButton.id = 'close_' + adType[0] + '_' + adID;
picImage.appendChild(closeButton);
addHandler(adID, 'close_' + adType[0], 2);
$("#" + adType[0] + '_' + adID).show('blind', {}, '1300');
$("#butShowImage_" + thumbs[0]).attr("src", "../images/close_pix.png");
$("#butShowImage_" + thumbs[0]).removeClass('hidden').addClass('shown');
}
Is there a way of stipping that onclick command off?
Thanks for you help!

I prefer to .delegate() and .undelegate() methods for binding event stuffs like that. Delegate is little bit different from the .bind() and .live() methods
Here is the great explaination about the diffrences
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/
kep it in mind :)

There are several issues I would fix with your code. First and foremost is to separate your functionality from your markup. This means removing the onclick events that you are firing through your elements. Now, this gets more complicated because you are passing PHP vars through your markup as well.
So your issue can be broken down into to sections.
Removing event handlers from your markup. This is, among other things i'm sure, a poor way to organize functionality.
A more robust means of communicating between JavaScript/PHP. In order to really take advantage of the web-based environment it will save you a lot of trouble passing variables in a more organized fashion. I would recommend looking into pairing Ajax with JSON. jQuery has some good implementations of both of these ($.Ajax() | $.parseJSON()).
The primary goal here is to clean up your markup to make it more readable, and better contain the different functions of your application - Functionality, Style, and information.
First, clean up your element a bit by removing the onclick event listener
<img src="example.jpg" id="someId_<?php echo id;?>;" class="showPixFeature" />'
Second, attach your event listener in whichever fashion you would like. Use $.delegate if you are dynamically generating the images. Use $.bind if you are not.
$('.showPixFeature').bind('click', function(){
// this function will execute everytime an element is clicked
// you have access to the element ID here via 'this' because
// the functions context is the element that fires it
alert($(this).attr('id'));
});
You can then remove the bound event with $.unbind() API. OR $.undelegate if you are using delegate. From here we can add an ajax call to
$('#my-element').unbind('click');

You could use .one(). It's the same as using .bind(), and it unbinds it after it's used once.