Weird JQuery location.reload() behaviour?

Question

This is my javascript code that will be invoked when user click the Browse button in HTML:

function run(){
console.log('run();')
document.getElementById('csv_file_upload').addEventListener('change', read_csv, false);

$('#csv_file_upload').click(function() {
    location.reload();
    console.log('reload();');
});}

And this is part of my HTML code:

<div id="dvImportSegments" class="fileupload ">
    <fieldset>
        <legend>Upload your CSV File</legend>
            <input type="file" name="File Upload" id="csv_file_upload" accept=".csv" onclick="run();" />
   </fieldset>
</div>

<div id="data-display"></div>

Below is the screenshot to specify my question:

1)This is how my page looks like:

2)And when I click the Browse button, it will run the run() function in javascript.

3)After I select my data, the other part of function will do their part. So far so good.

4)And then, when I want to browse another .csv file, I click the Browse button and once I click it, JQuery reload() will be activated and the previous things inside the div will be cleared automatically while I select another csv file. The problem arise when I select another csv file. The page won't run the run() in the javascript.

5)And nothing came out from the reloaded page. Why is it like that? Is there any explanation? Can someone help me on this matter?

Point of note: `location.reload()` is nothing to do with jQuery. — Mitya, Nov 13 '18 at 11:16
try to add `return false` to your click function.. if you see a different result it is because the page is rendering by your server - which would explain the "empty" result page (https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery) — ymz, Nov 13 '18 at 12:13

score 0 · Accepted Answer · answered Nov 13 '18 at 12:05

0

It seems that you are trying to clear the previously selected file when browsing for new one.

Replace this:

location.reload();

by this:

$(this).val("");

Here is the JSFiddle demo

Clearing the value of the control would suffice instead of reloading the page(which causes the events attached initially to be lost, even though your browse window is open)

answered Nov 13 '18 at 12:05

Ahs N

8,233
1
28
33

1

Well, your answer didn't really hit what I'm asking for, but you did help me in another part and you inspired me to do it the other way round :D – Nov 13 '18 at 12:38
@J.Bond Glad I could help Mr.Bond! :D – Ahs N Nov 13 '18 at 12:49

score 0 · Answer 2 · answered Nov 13 '18 at 12:37

I've found how to do it.

$('#csv_file_upload').click(function() {
    $(this).val("");
    if($("#data-display").length > 0) {
        console.log("Delete yo");
         $("#data-display" ).remove();
    }

I first delete the specific tag and then I use the appendTo() to make a new tag in other part of the code. And then I add the data to the new tag :)

Weird JQuery location.reload() behaviour?

2 Answers2