Weird JQuery location.reload() behaviour?

Admin 1
Viewed 83

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: image-01

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

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

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. image-04

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? image-05

html jquery javascript
2 Answers

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)

user_12508600

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 :)

Admin1
Related