stack stack - 1 month ago 7
jQuery Question

How to add <div></div> and name+size+delete appear in new div. javascript jquery

I have used ajaxSubmit to upload file to linux server successfully. After upload file, name+size+delete should be appear in my website.

For example, 1.jpg、2.jpg、3.jpg were uploaded to server, my submit website shoule be appeared like:

1.jpg 3k delete
2.jpg 4k delete
3.jpg 5k delete


Before upload files, My html structure is :

<td style="width:30%" id="impPic">
<div class="btn">
<span>addFile</span>
<input id="fileupload" type="file" name="mypic">
</div>
<div class="files"><b>...</b><span>...</span></div>
</td>


After uploaded three files, I wanted html like:

<td style="width:30%" id="impPic">
<div class="btn">
<span>addFile</span>
<input id="fileupload" type="file" name="mypic">
</div>
<div class="files"><b>...</b><span>...</span></div>
<div class="files"><b>...</b><span>...</span></div>
<div class="files"><b>...</b><span>...</span></div>
</td>


My files has fixed css style:

.files{height:10px; font-size:10px;line-height:22px; margin:10px 0}


Here is my ajaxSubmit code:

var divD=1;
$(function () {
var files = $(".files");
newDiv = "<div class='files'+divD+''><b class='dataname'>'+data.name+'('+data.size+'k)</b> <span class='delimg' name='+data.name+'('+data.size+'k)' rel='+data.pic+'>delete</span></div>";
$("#fileupload").change(function(){
$("#myupload").ajaxSubmit({
dataType: 'json',
beforeSend: function() {
......
},
uploadProgress: function() {
},
success: function(data) {
$(newDiv).insertAfter($('#impPic div:eq('+divD+')'));
divD = divD + 1;
$('.files').html("<b class='dataname' >"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>delete</span>");
},
error:function(xhr){
......
}
});
});
});


But unfortunately, it failed. I suppose files'+divD+'.html is wrong. Who can help me ?

Answer Source

I see two problem with your code...

First was the html string "newDiv" that you are trying to insert and the second is the invocation for jQuery .html() on an string literal object "files'+divD+'".

You are expecting the newDiv object to have a concatenated html string with the value of divD and the data came from the response but object data is undefined until the logic flows in the success callback.

and I believe the second problem would return a jquery TypeError problem, as you are trying to call the .html() function on a non DOM - jQuery object .

Update your code and try it this way:

newDiv = "";
    ...
    success: function(data) {
        newDiv = "<div class='files" + divD + "'><b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' name='" + data.name + data.size + "k' rel='" + data.pic + "'>delete</span></div>";
        $(newDiv).insertAfter($('#impPic div:eq(' + divD + ')'));
        divD = divD + 1;

        $(".files" + divD).html("<b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' rel='" + data.pic + "'>delete</span>");         
    },
   ...

EDIT:

You can update the html string and add an Id to have a unique selector on each of the element with files class and instead of the above selector, change the class selector "." to an Id selector "#".

and your code will look like these...

newDiv = "<div id='files" + divD + "'class='files'"...
...
$("#files" + divD).html("<b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' rel='" + data.pic + "'>delete</span>");

If that doesn't suit your needs you can just leave the first example above and update your css selector to:

[class^='files'] instead of `.files`.

This will select all of the element with a class that begins with "files".