Adding with jQuery

Ok, this is a really long post. I have a multiple DOM tree structure that I need to go through to insert an image. For recording, the image goes into PARAM mode. I do not understand why this is not a message. So, here is the code that I am currently using.

function validateImage(event) {
    var $input = $(this);
    var width = 75;
    var height = $input.closest('.logo-block').length > 0 ? 35: 75;
    $input.animate({
        'backgroundColor': '#999'
    },
    250);
    $.get('/meta/thumbnail/' + $input.val() + '/' + height + '/' + width + '/',
    function(result) {
        $input.stop();
        if (result != 'No Image Available') {
            $input.css('background-color', '#55FF00');
            var $block = $input.closest('div.thumb-image');
            if ($block.closest('.center-callout-info').length > 0) {
                // in center column, add image.
                $input.val('');
                $('<div class="thumb">' + result + '</div>').appendTo($block.closest('.image-container').not($block.closest('.more-images .image-container'))).find('img').addClass('selected');
            $('.center-callout-info .block img.meta-thumb').click(bindImageSelection);
            }
        } else {
            $input.css('background-color', '#FF0000');
            $input.val('');
        }
        $input.animate({
            backgroundColor: '#FCFCFD'
        },
        2000);
    });
}

HTML is as follows:

<fieldset class="collapsible collapsed">
    <legend class="collapse"><a href="#">Image Management</a></legend>
    <div class="fieldset-wrapper"><input type="button" value="Save Images" id="saveForm" class="submitButton" name="save" />
        <div class="center-callout-info">
            <div class="callout-images">
                <div class="high-res block active-tab" id="46051">
                    <div class = "image-container">
                        <div class="thumb-image thumb selected" id="AVE_BOX_TOPS_EDUCATION_4C">
                        <img class="meta-thumb" height="" src="/thumbs/AVE_Box_Tops_Education_4C.png" title="AVE_BOX_TOPS_EDUCATION_4C" /></div>
                    <div class="thumb-image thumb selected" id="FEL_BANKERS_BOX_BLK">
                        <img class="meta-thumb" height="" src="/thumbs/FEL_BANKERS_BOX_BLK.png" title="FEL_BANKERS_BOX_BLK" /></div>
                    <div class="thumb-image thumb selected" id="FEL_BB_FOLDER_RAILS_BLK">
                        <img class="meta-thumb" height="" src="/thumbs/FEL_BB_Folder_Rails_BLK.png" title="FEL_BB_FOLDER_RAILS_BLK" /></div>
                    <div class="thumb-image thumb selected" id="FEL_SFI_BLK">
                        <img class="meta-thumb" height="" src="No Image Available" title="FEL_SFI_BLK" /></div>
                    <form action="/node/46051/edit"  accept-charset="UTF-8" method="post" id="skuimage-get-more-form">

                        <div><div class="form-item" id="edit-new-high-res-wrapper">
                        <label for="edit-new-high-res">New: </label>
                        <input type="text" maxlength="128" name="new_high_res" id="edit-new-high-res" size="15" value="AVE_AVERY_BLK" class="form-text new-button" />
                        </div>
                        <input type="hidden" name="form_build_id" id="form-de9c77d3f4d32257a52dc609e6697769" value="form-de9c77d3f4d32257a52dc609e6697769"  />
                        <input type="hidden" name="form_token" id="edit-skuimage-get-more-form-form-token" value="f7bb86ba8678fa2fb5b911f1df819bec"  />
                        <input type="hidden" name="form_id" id="edit-skuimage-get-more-form" value="skuimage_get_more_form"  />

                        </div></form>
                        </div></div></div></div></div></fieldset>

Now I would like to <IMG>appear with others <IMG>' s that are located inside the div with the class image-container.

I think I have everything in the message here. Any help would be great.

EDIT EDIT EDIT EDIT EDIT EDIT

Here is the answer:

Ok, here's the answer. Above you will see the following line of code:

var $block = $input.closest('div.thumb-image');

, DOM, , , . , var $block :

var $block = $input.closest('.image-container');

, .

$('<div class="thumb">' + result + '</div>').appendTo($block).find('img').addClass('selected');
+3
2

6 . LOL

, . :

var $block = $input.closest('div.thumb-image');

, DOM, , , . , var $ :

var $block = $input.closest('.image-container');

, .

$('<div class="thumb">' + result + '</div>').appendTo($block).find('img').addClass('selected');
0

. , . , , . -

ajax. , $.ajax(), $.get(), $.post() .. .

0

All Articles