3

I want to select an html element which will come from first ajax response to use in the second ajax request as a GET parameter. But because the second ajax request parameters are loaded when page is loaded, the second ajax request cannot get the new value which will come from the first ajax response. How can I handle this problem? Here is the my problem in terms of code:

JS:

$(document).ready(function() {
    $("#imageInput").change(function(){
        $("#addText").submit();
    });

    var optionsUpload = { 
            url: 'bilesenler/ajaxUploadImage.php',
            beforeSubmit: beforeSubmit,  // pre-submit callback 
            success: afterAdding,  // post-submit callback 
            resetForm: false        // reset the form after successful submit 
        }; 


    // $("#imgOutput .removeInlineImage") object will come from 
    // first ajax response. Because of this I cannot select this 
    // future element "now" like in the following line. Any suggestion???

    $("#imgOutput .removeInlineImage").on("click", function(){
        var optionsRemove = {
             // $("#imgOutput #imgName") object will come from 
             // first ajax response. I cannot select the future
             // element "now" like in the following.Any suggestion?

            url: 'bilesenler/ajaxRemoveImage.php=imgName=' + $("$imgOutput #imgName"),
            beforeSubmit: beforeRemoving, 
            success: afterRemoving, 
            resetForm: false        
        };
    });


     $('#addText').submit(function() { 
            if(!imgDelete)
                $(this).ajaxSubmit(optionsUpload); 
            else{
                $(this).ajaxSubmit(optionsRemove);
            }

            return false; 
        }); 
});

HTML:

<form action="../adminPaneli/yaziEkle.php" method="POST" name="addText" id="addText" enctype="multipart/form-data">

<!-- There are some codes -->

<input type="file" name="inlineImage" id="imageInput"> <!-- Look the id ! -->

<div id="imgOutput"></div> <!-- Look the id ! -->

<!-- There are some codes -->

</form>

The result which will come from first ajax response:

<?php
    echo '<div id="'.$image_name_only.'" class="previewImage">';
    echo '<img class="thumbImage" src="../kitaplik/resimler/upload/'.$new_file_name.'">';
    echo '<br/>';
    echo '<input type="text" id="imgName" class="imgName" value="'. $new_file_name . '">';

    // The important element in this file is the following line. 
    // Look the class name : removeInlineImage. It is used in jquery code above.
    echo '<span class="removeInlineImage">&nbsp;&nbsp;X</span>'; 
    echo '</div>';
?>

If you go back to the Jquery codes, my question is there. How can I select a future html element when the future element haven't come yet?

Note: I find a solution. Solution is that I use an onclick attribute in the ajax response. Thereby, when the first ajax response comes, I can trigger a function by means of onclick attribute, and I can initialize the second ajax request's url label with $("$imgOutput #imgName"). Because, when function triggers, #imgName have already come with first ajax response. But this solution is so unreadable for me. Because of this, I need a better solution. Any idea?


UPDATE: I found a new solution: ajaxSuccess(). This solution is more readable than previous one. But I am still open a new idea.

$(document).ready(function() {
    $("#imageInput").change(function(){
        $("#addText").submit();
    });

    var optionsUpload = { 
            url: 'bilesenler/ajaxUploadImage.php',
            beforeSubmit: beforeSubmit,  // pre-submit callback 
            success: afterAdding,  // post-submit callback 
            resetForm: false        // reset the form after successful submit 
        }; 




    // $("#imgOutput .removeInlineImage") object will be able to
    // be catched with ajaxSuccess event.

    $(document).ajaxSuccess( function() {

        $("#imgOutput .removeInlineImage").on("click", function(){  


            selectedImageName = $(this).prev().val();

            optionsRemove = {
                url: 'bilesenler/ajaxRemoveImage.php?imgName=' + selectedImageName,
                beforeSubmit: beforeRemoving,
                success: afterRemoving, 
                resetForm: false  
            };

            imgDelete = true;
            $("#addText").submit();
        });
    });

    $('#addText').submit(function() { 
        if(!imgDelete)
            $(this).ajaxSubmit(optionsUpload); 
        else{
            $(this).ajaxSubmit(optionsRemove);
        }

        return false; 
    }); 
});
Hasan
  • 554
  • 1
  • 7
  • 19
  • 1
    Is it always first ajax then second? If so, you can start the second in the `success: secondCall(passYourNewDataAsParam);` as a function. – DDan Jul 28 '15 at 01:03
  • 1
    I'm not totally sure I understand what you're trying to do, but I suspect you just need to use event delegation to bind to the dynamically loaded elements. See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Jul 28 '15 at 01:17
  • 1
    It is always first ajax. But then maybe first ajax, or maybe second ajax. First ajax does upload image. Second ajax does remove image. So it depends on user choice. – Hasan Jul 28 '15 at 01:18
  • 1
    Can you change `$("$imgOutput" #imgName")` to `$("#imgOutput" #imgName")`? – leonard.javiniar Jul 28 '15 at 01:26
  • 1
    What is the difference between them? They are same, and errenous. – Hasan Jul 28 '15 at 01:41

0 Answers0