CODEWITHSUNDEEP
javascriptjquery
L84
L84

Reputation: 46308

Detect if element is inserted and run function based on element

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?

Upvotes: 0

Views: 45

Answers (2)

Paul S.
Paul S.

Reputation: 66324

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

Upvotes: 1

univerio
univerio

Reputation: 20518

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) {
    ...
}

Upvotes: 1

Related Questions