My JS Function is not working after the DIV is refreshed by JQUERY

Question

So i wanna make a search bar that searching data with jquery, then after data was found i replace into the 'div' by not refreshing a page. Then when i wipe all character in search bar it will reset the old div. After that my JS function wont work again until i reload the page.

Where is the problem i cant find it out, for the record i am using :

JQUERY 3.4.1
js.js file
search.js file

I am not mixturing js.js with the search.php because js.js containing vanilla js and search.js was jquery file.

Search Bar

<!-- The search menu -->
<form method="GET">
    <div class="input-group">
        <input type="text" name="search" id="cariProjek" class="form-control search-input" placeholder="Cari projek ...">
    </div><br>
</form>

The div

<div id="reset">
<div id="search">

<table>
<tr>
    <td>
        <label for="tempFolderPath" class="form-label"><b>Temp Folder Lokasi</b></label>
    </td>
    <td>:</td>
    <td>
        <input type="text" class="form-control" name="tempFolderPath" id="tempFolderPath" placeholder="Ini readonly!!!" readonly></label>
    </td>
</tr>   
<tr>
    <td>
        <label for="namaFileBaru" class="form-label"><b>Nama File Baru</b></label>
    </td>
    <td>:</td>
    <td>
        <input type="text" class="form-control" name="namaFileBaru" id="namaFileBaru" autocomplete="" required>
    </td>
</tr>
<tr>
    <td>
        <label for="namaFileLama" class="form-label"><b>Nama File yang akan Diubah</b></label>
    </td>
    <td>:</td>
    <td>
        <input type="file" class="form-control" id="namaFileLama" multiple onchange="showname()" required>
    </td>
</tr>
<tr>
    <td>
        <label for="tempNama" class="form-label"><b>Temp Nama File</b></label>
    </td>
    <td>:</td>
    <td>
        <input type="text" class="form-control" name="tempNama" id="tempNama" readonly>
    </td>
</tr>
</table>
<button type="button" name="submit" class="btn btn-primary" id="submitForm">Selesai</button><br><br>

<table>
    <tr>
        <td>
            <label for="folderPath" class="form-label"><b>Folder Lokasi Asal</b></label>
        </td>
        <td>:</td>
        <td>
            <input type="text" class="form-control" style="width: 300px;" name="folderPath" id="folderPath" autocomplete="" placeholder="Pertama input ini dulu baru Simpan" require>
        </td>
    </tr>
</table>

<button type="button" name="submitFolderPath" class="btn btn-success" id="submitFolderPath">Simpan</button>
<button type="button" name="resetFolderPath" class="btn btn-danger" id="resetFolderPath">Reset</button>

</div>

js.js (This code wont work, after the div was reset)

Edit : The main issue is was here.

let submitFolderPath = document.getElementById('submitFolderPath');
let resetFolderPath = document.getElementById('resetFolderPath');
let folderPath = document.getElementById('folderPath');
let tempFolderPath = document.getElementById('tempFolderPath'); 

submitFolderPath.addEventListener('click', function(){

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200) {
        let date = new Date();
        date.setDate(date.getDate() + 1);
        const expires = "expires=" + date;
        document.cookie = "path=" + folderPath.value + "; " + expires + "; path=/";
        tempFolderPath.value = folderPath.value;
    }
}

xhr.open('GET', 'index.html', true);
xhr.send();   

});  

resetFolderPath.addEventListener('click', function(){

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200) {
        let date = new Date();
        date.setDate(date.getDate() - 1);
        const expires = "expires=" + date;
        let cookie = document.cookie = "path=" + folderPath.value + "; " + expires + "; path=/";
        folderPath.value = '';
        tempFolderPath.value = folderPath.value;
    }
}

xhr.open('GET', 'index.html', true);
xhr.send();

});

search.js (Pretty sure the problem its here)

Edit : Actually the problem is not here

$(document).ready(function(){
$('#cariProjek').on('keyup', function(){
    if($('#cariProjek').val() == ''){
        $("#reset").load(location.href+" #reset>*","")        
    }else{
        $('#search').load('search.html?keyword=' + encodeURIComponent($('#cariProjek').val()));
    }
})
});

search.html (only testing)

<h1>Test</h1>

With `$("#reset").load()` you are completely replacing the content of that element. Even if you have elements with the same IDs etc. in there afterwards - those won't be the _same_ elements, they are newly created once. And therefor, your event handlers that were bound to the _old_ elements, are now gone as well. You would either need to assign them again now, to those new elements - or use a method called _event delegation_. — CBroe, Oct 19 '21 at 11:21
Btw., this mixture of vanilla JS and jQuery is ugly to say the least. What is stopping you from using jQuery methods for adding event handlers and making AJAX requests in your own script ...? — CBroe, Oct 19 '21 at 11:23
Well before i am using jquery i am development my code with vanilla JS first, then i am trying to use jquery for the search bar menu instead. — AnonymousUID, Oct 19 '21 at 11:26
_"then how can i assign them again?"_ - same way as before - find the elements via their ID, and call addEventListener ... Of course this would have to happen after you replaced the content using `.load()`. But using jQuery would really make things a lot easier here, especially because it has event delegation already build-in (and event delegation can eliminate the need to re-assign event handlers here completely.) — CBroe, Oct 19 '21 at 11:32
Use event delegation in all cases where you're (re-)creating elements, then you don't need to reassign them. — freedomn-m, Oct 19 '21 at 11:40
Specifically: `$('#cariProjek').on('keyup',` will only bind to the cariProjek that exists at the time the code runs. While `$(document).on("keyup", "#cariProjek",` will work after you replace that initial element. — freedomn-m, Oct 19 '21 at 11:41
"Does this answer your question?" yes maybe, but i dont know how to use it. I'm very new to using jquery. @freedomn-m — AnonymousUID, Oct 19 '21 at 12:03
No worries - that's why I provided a specific example for you. — freedomn-m, Oct 19 '21 at 12:06

score 0 · Accepted Answer · answered Oct 20 '21 at 07:37

So after a few hours after i edited my code and also saw what the delegation event means. That bro @CBroe and @freedomn-m mention it. I finally change all of my JS vanilla script into jquery sript so the code doesn't look ugly. The resolve in my problem is i am changin my

submitFolderPath.addEventListener('click', function(){

into JQUERY code like this

$(document).on('click',' #submitFolderPath', function(){

So the JQUERY can search all of my script even after my old div was refreshed by the search.js Very thankfull to @CBroe and @freedomn-m to solve my problem. The final code of my JS is like this.

$(document).ready(function(){

$(document).on('click',' #submitFolderPath', function(){
    
    let folderPath = document.getElementById('folderPath');
    let tempFolderPath = document.getElementById('tempFolderPath');
    let date = new Date();
    date.setDate(date.getDate() + 1);
    const expires = "expires=" + date;
    document.cookie = "path=" + folderPath.value + "; " + expires + "; path=/";
    tempFolderPath.value = folderPath.value;        
});

$(document).on('click', '#resetFolderPath', function(){

    let date = new Date();
    let folderPath = document.getElementById('folderPath');
    let tempFolderPath = document.getElementById('tempFolderPath');
    date.setDate(date.getDate() - 1);
    const expires = "expires=" + date;
    let cookie = document.cookie = "path=" + folderPath.value + "; " + expires + "; path=/";
    folderPath.value = '';
    tempFolderPath.value = folderPath.value;
});

$(document).on('click', '#submitForm', function(){

    let namaFileBaruFormData = document.getElementById('namaFileBaru').value;
    let namaFileLamaFormData = document.getElementById('namaFileLama').value;
    let tempFolderPathFormData = document.getElementById('tempFolderPath').value;
    let tempNamaFormData = document.getElementById('tempNama').value;

    let postData = 'namaFileBaru='+namaFileBaruFormData+'&namaFileLama='+namaFileLamaFormData+'&tempFolderPath='+tempFolderPathFormData+'&tempNama='+tempNamaFormData;
    let xhr = new XMLHttpRequest();

    xhr.open('POST', 'function.php', true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200) {
            let alert = document.getElementById('alert');
            alert.innerHTML = "<center class='m-3'><h4><i class='bi bi-gear-fill'></i> Processing...</h4></center>";
            $("#alert").load(window.location.href + " #alert");            
        }
    }
    xhr.send(postData);
});

$(document).on('change', '#namaFileLama', function(){
    
    var name = document.getElementById('namaFileLama');
    var nameFiles = name.files.item(0).name;
    var nameBaru = document.getElementById('tempNama');
    nameBaru.value = nameFiles;
});

});

My JS Function is not working after the DIV is refreshed by JQUERY

1 Answers1