Detect if element is inserted and run function based on element

Question

I have a script that uploads an image to a external server using Uploadify, it then sends that data to the page I am on and inserts code into the page for the photo.

I am modifying what I originally was doing with the script. When a person uploads a photo it will insert the photo into a gallery for display. The original upload works fine, however, if there is more than one photo uploaded it creates multiple galleries.

What I am trying to do is detect if an image was already uploaded and then add the necessary <li>. When I run the code it doesn't detect the class and thus inserts another gallery. I assume I have my code wrong. Below is the code I am using:

pm.bind("message5", function(data) {
    var ext = data.split('.').pop().toLowerCase();
    myFrame = $('#editorf').contents().find('body');
    nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');    

    if (ext=='jpg' || ext=='jpeg' || ext=='bmp' || ext=='gif' || ext=='png' || ext=='tiff' || ext=='tif'){  

        //Check if the gallery is in place just insert the <li> element.
        if (nestedFrame.hasClass('glasscase')) {
            $('.glasscase').append($.parseHTML('<li><img src="http://forum.mmjkarma.com/uploads/' + data + '" /></li>'));   
            console.log('hasGlass');
        } 
        //If gallery is not inserted, insert gallery.
        else {
            nestedFrame.append($.parseHTML(' <br><br> <ul class="glasscase gc-start" ><li><img src="http://forum.mmjkarma.com/uploads/' + data + '" /></li></ul>'));
        }
    }
     //If file is not an image, handle it as a PDF OR a Link to File.
     else if (ext=='pdf') {
        nestedFrame.append($.parseHTML('  <br><br> <a target="_blank" href="http://forum.mmjkarma.com/uploads/' + data + '">View Uploaded PDF</a>'));
    } else {
        nestedFrame.append($.parseHTML('  <br><br> <a href="http://forum.mmjkarma.com/uploads/' + data + '">Download Uploaded File</a>'));
    }
    }); 
    }
});

How do I fix the code to detect if an image is uploaded thus creating the gallery (glasscase) so when a second image is uploaded it adds it to the gallery, not creating a second gallery?

It doesn't appear that nestedFrame ever has class="glasscase". The only element you add this to is the <ul> element — user3559349
– user3559349, Commented Jul 30, 2014 at 1:44

univerio · Accepted Answer · 2014-07-30 01:43:23Z

1

You're testing for .hasClass('glasscase') on <body>, not on the <ul> that it's actually on. Try

//Check if the gallery is in place just insert the <li> element.
if (nestedFrame.find("ul.glasscase").length > 0) {
    ...
}

answered Jul 30, 2014 at 1:43

univerio

20.7k3 gold badges73 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul S. · Accepted Answer · 2014-07-30 01:56:52Z

1

It looks like you're using a <ul> as your gallery, so you could do something like (vanilla)

if (document.querySelector('ul.glasscase')) // exists
else // doesn't exist

If this gallery will never be served and can only be generated, you could always simply set a flag in a higher scope

var glasscase_exists = false;
// then when created
glasscase_exists = true;

If you will want a reference to this Node, you could assume it will be there and $('ul.glasscase') then check .length to see if it wasn't there and you need to add it

Aside: You use a long Logical OR test in one if, you can simplify this down using indexOf, i.e.

if (-1 !== ['jpg', 'jpeg', 'bmp', 'gif', 'png', 'tiff', 'tif'].indexOf(ext))

Other options to simplify it include using an Object or even switch..case

edited Jul 30, 2014 at 1:56

answered Jul 30, 2014 at 1:43

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Collectives™ on Stack Overflow

Detect if element is inserted and run function based on element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related