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"> 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;
});
});