When I try to load the first .load it passes 1 variable without any problem, I receive this variable from a _GET method to store it in a data-id button attribute to pass it back to another .load, in this second file I receive the variable again in a _GET method and the code does its thing, but when doing the process again from the beginning, in the second .load the variable is duplicated and the alert() script shows 2 times, as well as the process of this same file too.
I have tried with .empty() and .remove() functions, likewise I have tried to load from the last .load the first file that filters the main file, but the problem still occurs.
(The main to send variable to first file in .load)
<p>Select a category</p>
<select name="category" id="category" class="form-control" required>
<option disabled selected value>category</option>
<option value="1">all cat</option>
</select>
<div id="table-category" name="table-category"></div>
$("#consult").click(function(e){
e.preventDefault();
idCategory = $('#category').val();
$('#table-category').load('../public/tabla-proyectos.php?v1='+idCategory );
});
The second .load in that id="table-category"
$category = $_GET['v1'];
<script>
alert(<?php echo $category;?>); <!-- In this part dont have problems with the variable because return only one result -->
</script>
<button id="admin" name="admin" data-id="<?php echo $category;?>">Show</button>
<div id="map"></div>
<script>
$(document).on("click", "#admin", function () { <!-- I think there's the problem -->
category = $(this).data('id');
$('#map').load('../public/mapa.php?val1='+category);
});
</script>
Final .load file
$categoy_id = $_GET['val1'];
<script>
alert(<?php echo $category_id;?>); <!-- The first time OK, but trying again from the beginning repeat the process 2 times -->
</script>
I have solved it in the following way:
I have taken the script of the second file and I have put it in the main file, adding to it an .empty() function so that it cleans all its values before returning to show a new result inside this div, I have also added a new script inside the last .load file being the following:
Main file now see like:
$("#consult").click(function(e){
e.preventDefault();
idCategory = $('#category').val();
$('#table-category').load('../public/tabla-proyectos.php?v1='+idCategory );
});
$(document).on("click", "#admin", function () {
$('#map').empty();
category = $(this).data('id');
$('#map').load('../public/mapa.php?val1='+category);
});
The second file .load don't have script because now is on the main
The last file script now see like:
idCategory = $('#category').val();
$('#table-category').empty();
$('#table-category').load('../public/tabla-proyectos.php?
v1='+idCategory );