how to prevend loading div for 2nd time after .load()
I am using this ajax script for uploading files. All the files are outputted in the div .myFiles
When uploading a new file, i use $(".myFiles").load(" .myFiles"); in the success to see the result immediately that a new file is added. But when i look into the dom, this is what is created:
<div class="myFiles">
<div class="myFiles">
</div>
</div>
How can i prevent that the .myFiles div is created in the already existing .myFiles?
This is my ajax:
function ajax_file_upload(file_obj) {
if(file_obj != undefined) {
var form_data = new FormData();
form_data.append('file', file_obj);
$.ajax({
type: 'POST',
url: '',
contentType: false,
processData: false,
data: form_data,
beforeSend: function () {
$(".uploadspinner").show();
},
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .myFiles");
$(".uploadspinner").hide();
$(".uploadarea").hide();
}
});
}
}
javascript jquery ajax
asked Jan 1 at 11:01
Jack MaessenJack Maessen
412718
|
show 2 more comments
I am using this ajax script for uploading files. All the files are outputted in the div .myFiles
When uploading a new file, i use $(".myFiles").load(" .myFiles"); in the success to see the result immediately that a new file is added. But when i look into the dom, this is what is created:
<div class="myFiles">
<div class="myFiles">
</div>
</div>
How can i prevent that the .myFiles div is created in the already existing .myFiles?
This is my ajax:
function ajax_file_upload(file_obj) {
if(file_obj != undefined) {
var form_data = new FormData();
form_data.append('file', file_obj);
$.ajax({
type: 'POST',
url: '',
contentType: false,
processData: false,
data: form_data,
beforeSend: function () {
$(".uploadspinner").show();
},
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .myFiles");
$(".uploadspinner").hide();
$(".uploadarea").hide();
}
});
}
}
javascript jquery ajax
asked Jan 1 at 11:01
Jack MaessenJack Maessen
412718
I'm confused. You're making an Ajax call to a blank URL, and not even doing anything with theresponsein thesuccesscallback. I'm really not sure what you're trying to do here, but whatever it is it doesn't appear to require Ajax.
– Robin Zigmond
Jan 1 at 11:05
Well, the php code to handle the upload is on the same page as the js, so thats why the url is empty
– Jack Maessen
Jan 1 at 11:06
But, that just doesn't make sense. It means you're making an Ajax call to the same endpoint that produces the page the user is on, so the response will just be another copy of that HTML document. More to the point, though, in this code it doesn't make the slightest bit of difference what URL you are pointing at, because you do nothing that depends on the response.
– Robin Zigmond
Jan 1 at 11:09
ok. Can you show me the correct way to use the ajax script for this?
– Jack Maessen
Jan 1 at 11:11
@RobinZigmond there is nothing special wrong. aGETandPOSTcan return different content.
– apple apple
Jan 1 at 11:23
|
show 2 more comments
I am using this ajax script for uploading files. All the files are outputted in the div .myFiles
When uploading a new file, i use $(".myFiles").load(" .myFiles"); in the success to see the result immediately that a new file is added. But when i look into the dom, this is what is created:
<div class="myFiles">
<div class="myFiles">
</div>
</div>
How can i prevent that the .myFiles div is created in the already existing .myFiles?
This is my ajax:
function ajax_file_upload(file_obj) {
if(file_obj != undefined) {
var form_data = new FormData();
form_data.append('file', file_obj);
$.ajax({
type: 'POST',
url: '',
contentType: false,
processData: false,
data: form_data,
beforeSend: function () {
$(".uploadspinner").show();
},
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .myFiles");
$(".uploadspinner").hide();
$(".uploadarea").hide();
}
});
}
}
javascript jquery ajax
asked Jan 1 at 11:01
Jack MaessenJack Maessen
412718
I am using this ajax script for uploading files. All the files are outputted in the div .myFiles
When uploading a new file, i use $(".myFiles").load(" .myFiles"); in the success to see the result immediately that a new file is added. But when i look into the dom, this is what is created:
<div class="myFiles">
<div class="myFiles">
</div>
</div>
How can i prevent that the .myFiles div is created in the already existing .myFiles?
This is my ajax:
function ajax_file_upload(file_obj) {
if(file_obj != undefined) {
var form_data = new FormData();
form_data.append('file', file_obj);
$.ajax({
type: 'POST',
url: '',
contentType: false,
processData: false,
data: form_data,
beforeSend: function () {
$(".uploadspinner").show();
},
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .myFiles");
$(".uploadspinner").hide();
$(".uploadarea").hide();
}
});
}
}
javascript jquery ajax
javascript jquery ajax
asked Jan 1 at 11:01
Jack MaessenJack Maessen
412718
asked Jan 1 at 11:01
Jack MaessenJack Maessen
412718
asked Jan 1 at 11:01
Jack MaessenJack Maessen
412718
asked Jan 1 at 11:01
Jack MaessenJack Maessen
412718
asked Jan 1 at 11:01
Jack MaessenJack Maessen
412718
412718
I'm confused. You're making an Ajax call to a blank URL, and not even doing anything with theresponsein thesuccesscallback. I'm really not sure what you're trying to do here, but whatever it is it doesn't appear to require Ajax.
– Robin Zigmond
Jan 1 at 11:05
Well, the php code to handle the upload is on the same page as the js, so thats why the url is empty
– Jack Maessen
Jan 1 at 11:06
But, that just doesn't make sense. It means you're making an Ajax call to the same endpoint that produces the page the user is on, so the response will just be another copy of that HTML document. More to the point, though, in this code it doesn't make the slightest bit of difference what URL you are pointing at, because you do nothing that depends on the response.
– Robin Zigmond
Jan 1 at 11:09
ok. Can you show me the correct way to use the ajax script for this?
– Jack Maessen
Jan 1 at 11:11
@RobinZigmond there is nothing special wrong. aGETandPOSTcan return different content.
– apple apple
Jan 1 at 11:23
|
show 2 more comments
I'm confused. You're making an Ajax call to a blank URL, and not even doing anything with theresponsein thesuccesscallback. I'm really not sure what you're trying to do here, but whatever it is it doesn't appear to require Ajax.
– Robin Zigmond
Jan 1 at 11:05
Well, the php code to handle the upload is on the same page as the js, so thats why the url is empty
– Jack Maessen
Jan 1 at 11:06
But, that just doesn't make sense. It means you're making an Ajax call to the same endpoint that produces the page the user is on, so the response will just be another copy of that HTML document. More to the point, though, in this code it doesn't make the slightest bit of difference what URL you are pointing at, because you do nothing that depends on the response.
– Robin Zigmond
Jan 1 at 11:09
ok. Can you show me the correct way to use the ajax script for this?
– Jack Maessen
Jan 1 at 11:11
@RobinZigmond there is nothing special wrong. aGETandPOSTcan return different content.
– apple apple
Jan 1 at 11:23
I'm confused. You're making an Ajax call to a blank URL, and not even doing anything with the
response in the success callback. I'm really not sure what you're trying to do here, but whatever it is it doesn't appear to require Ajax.– Robin Zigmond
Jan 1 at 11:05
I'm confused. You're making an Ajax call to a blank URL, and not even doing anything with the
response in the success callback. I'm really not sure what you're trying to do here, but whatever it is it doesn't appear to require Ajax.– Robin Zigmond
Jan 1 at 11:05
Well, the php code to handle the upload is on the same page as the js, so thats why the url is empty
– Jack Maessen
Jan 1 at 11:06
Well, the php code to handle the upload is on the same page as the js, so thats why the url is empty
– Jack Maessen
Jan 1 at 11:06
But, that just doesn't make sense. It means you're making an Ajax call to the same endpoint that produces the page the user is on, so the response will just be another copy of that HTML document. More to the point, though, in this code it doesn't make the slightest bit of difference what URL you are pointing at, because you do nothing that depends on the response.
– Robin Zigmond
Jan 1 at 11:09
But, that just doesn't make sense. It means you're making an Ajax call to the same endpoint that produces the page the user is on, so the response will just be another copy of that HTML document. More to the point, though, in this code it doesn't make the slightest bit of difference what URL you are pointing at, because you do nothing that depends on the response.
– Robin Zigmond
Jan 1 at 11:09
ok. Can you show me the correct way to use the ajax script for this?
– Jack Maessen
Jan 1 at 11:11
ok. Can you show me the correct way to use the ajax script for this?
– Jack Maessen
Jan 1 at 11:11
@RobinZigmond there is nothing special wrong. a
GET and POST can return different content.– apple apple
Jan 1 at 11:23
@RobinZigmond there is nothing special wrong. a
GET and POST can return different content.– apple apple
Jan 1 at 11:23
|
show 2 more comments
2 Answers
2
active
oldest
votes
you can use .append() function instead of load.
instead of $(".myFiles").load(" .myFiles")
use $(".myFiles").append("");
answered Jan 1 at 11:06
MehulMehul
211
add a comment |
Its not a big issue but if you want not the same div appears twice, then i would say make this your html:
<div class="myFiles">
<div class="outputFiles">
stuff goes here
</div>
</div>
And use this in your success:
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .outputFiles");
***
}
Result: you have only 1 .myFiles div and 1 .outputFiles div
answered Jan 1 at 12:12
johnjohn
234
Awesome! Works great
– Jack Maessen
Jan 1 at 12:15
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994918%2fhow-to-prevend-loading-div-for-2nd-time-after-load%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
you can use .append() function instead of load.
instead of $(".myFiles").load(" .myFiles")
use $(".myFiles").append("");
answered Jan 1 at 11:06
MehulMehul
211
add a comment |
you can use .append() function instead of load.
instead of $(".myFiles").load(" .myFiles")
use $(".myFiles").append("");
answered Jan 1 at 11:06
MehulMehul
211
add a comment |
you can use .append() function instead of load.
instead of $(".myFiles").load(" .myFiles")
use $(".myFiles").append("");
answered Jan 1 at 11:06
MehulMehul
211
you can use .append() function instead of load.
instead of $(".myFiles").load(" .myFiles")
use $(".myFiles").append("");
answered Jan 1 at 11:06
MehulMehul
211
answered Jan 1 at 11:06
MehulMehul
211
answered Jan 1 at 11:06
MehulMehul
211
answered Jan 1 at 11:06
MehulMehul
211
211
add a comment |
add a comment |
Its not a big issue but if you want not the same div appears twice, then i would say make this your html:
<div class="myFiles">
<div class="outputFiles">
stuff goes here
</div>
</div>
And use this in your success:
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .outputFiles");
***
}
Result: you have only 1 .myFiles div and 1 .outputFiles div
answered Jan 1 at 12:12
johnjohn
234
Awesome! Works great
– Jack Maessen
Jan 1 at 12:15
add a comment |
Its not a big issue but if you want not the same div appears twice, then i would say make this your html:
<div class="myFiles">
<div class="outputFiles">
stuff goes here
</div>
</div>
And use this in your success:
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .outputFiles");
***
}
Result: you have only 1 .myFiles div and 1 .outputFiles div
answered Jan 1 at 12:12
johnjohn
234
Awesome! Works great
– Jack Maessen
Jan 1 at 12:15
add a comment |
Its not a big issue but if you want not the same div appears twice, then i would say make this your html:
<div class="myFiles">
<div class="outputFiles">
stuff goes here
</div>
</div>
And use this in your success:
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .outputFiles");
***
}
Result: you have only 1 .myFiles div and 1 .outputFiles div
answered Jan 1 at 12:12
johnjohn
234
Its not a big issue but if you want not the same div appears twice, then i would say make this your html:
<div class="myFiles">
<div class="outputFiles">
stuff goes here
</div>
</div>
And use this in your success:
success:function(response) {
//$(".echo").html(response);
$('#selectfile').val('');
$(".myFiles").load(" .outputFiles");
***
}
Result: you have only 1 .myFiles div and 1 .outputFiles div
answered Jan 1 at 12:12
johnjohn
234
answered Jan 1 at 12:12
johnjohn
234
answered Jan 1 at 12:12
johnjohn
234
answered Jan 1 at 12:12
johnjohn
234
234
Awesome! Works great
– Jack Maessen
Jan 1 at 12:15
add a comment |
Awesome! Works great
– Jack Maessen
Jan 1 at 12:15
Awesome! Works great
– Jack Maessen
Jan 1 at 12:15
Awesome! Works great
– Jack Maessen
Jan 1 at 12:15
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994918%2fhow-to-prevend-loading-div-for-2nd-time-after-load%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I'm confused. You're making an Ajax call to a blank URL, and not even doing anything with the
responsein thesuccesscallback. I'm really not sure what you're trying to do here, but whatever it is it doesn't appear to require Ajax.– Robin Zigmond
Jan 1 at 11:05
Well, the php code to handle the upload is on the same page as the js, so thats why the url is empty
– Jack Maessen
Jan 1 at 11:06
But, that just doesn't make sense. It means you're making an Ajax call to the same endpoint that produces the page the user is on, so the response will just be another copy of that HTML document. More to the point, though, in this code it doesn't make the slightest bit of difference what URL you are pointing at, because you do nothing that depends on the response.
– Robin Zigmond
Jan 1 at 11:09
ok. Can you show me the correct way to use the ajax script for this?
– Jack Maessen
Jan 1 at 11:11
@RobinZigmond there is nothing special wrong. a
GETandPOSTcan return different content.– apple apple
Jan 1 at 11:23