Hi Again! Finally i able to display data in my required autofill fill forms on the basis of dependent drop down lists. Its working very fine when I have to use IDs (which worked with static rows of the form) . Now in final part of the problem I am stuck at point where I have to generate autofill values with dynamic generated rows. on the basis of dependent list. ( autofill part of the script already handling dynamic rows as i am successfully using classes there. But with dependent list script, i have an issue, Its not working.(just able to select Type/countries, from first list, 2nd list not showing anything) Below is my code.
<table class="table table-bordered">
<thead class="table-success" style="background-color: #3fbbc0;">
<tr>
<th width="15%"><center>Type</th>
<th width="15%"><center>Service</th>
<th width="15%"><center>Machine</th>
<th width="5%"><center>Qty</th>
<th width="10%"><center>Rate</th>
<th width="5%"></th>
<button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" class="d-none">
<td><Select class="country form-control text-end" name="country[]" id = "country" >
<option value=""> Select Type</option>
<?php
include('db1.php');
$query = "select * from country";
// $query = mysqli_query($con, $qr);
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php
}
} ?> </select> </td>
<td><Select class="state form-control text-end" name="state[]" id = "state">
<option value="">select Service</option></select></td>
<td><Select class="city form-control text-end" name="city[]" id = "city" onchange="GetDetail(this.closest('tr'))">
<option value="">Select Machine</option></select></td>
</td>
<td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" onfocus="Calc(this);"></td>
<td><input type="text" class="price form-control text-end" name="price1[]" id="ddd" onfocus="Calc(this);" ></td>
<td class="NoPrint"><button type="button" class="btn btn-success" style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
</tr> </tbody> </table>~~~
Here is script part
//autofill script which work fine with dynamic rows
~~~ <script>
// onkeyup event will occur when the user
// release the key and calls the function
// assigned to this event
function GetDetail(row) {
let str = row.querySelector(".city").value;
console.log(str + ";");
if (str.length == 0) {
row.querySelector(".qty").value = "";
row.querySelector(".price").value = "";
return;
} else {
// Creates a new XMLHttpRequest object
//var xmlhttp = new XMLHttpRequest();
// xmlhttp.onreadystatechange = function () {
// Defines a function to be called when
// the readyState property changes
//if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed
// when the document is ready
var myObj = JSON.parse(fakeAjax2(str));
// Returns the response data as a
// string and store this array in
// a variable assign the value
// received to first name input field
row.querySelector(".qty").value = myObj[0];
row.querySelector(".price").value = myObj[1];
//}
//};
// xhttp.open("GET", "filename", true);
//xmlhttp.open("GET", "gfg.php?user_id=" + str, true);
// Sends the request to the server
//xmlhttp.send();
}
}
// dependent list script which is problematic part for me
/ When the user changes the value of the country select element
$(document).ready(function () {
$(".country").on("change", function() {
// Get the current row element
let row = $(this).closest("tr");
// Get the country id from the current select element
let country_id = $(this).val();
// Use AJAX to send a request to the server-side script
$.ajax({
method: "POST",
url: "response.php",
data: {
id: country_id
},
datatype: "html",
success: function(data) {
// Find the state select element in the same row and update its options
row.find(".state").html(data);
// Find the city select element in the same row and clear its options
row.find(".city").html('<option value="">Select Machine</option>');
}
});
});
// When the user changes the value of the state select element
$(".state").on("change", function() {
// Get the current row element
let row = $(this).closest("tr");
// Get the state id from the current select element
let state_id = $(this).val();
// Use AJAX to send a request to the server-side script
$.ajax({
method: "POST",
url: "response.php",
data: {
sid: state_id
},
datatype: "html",
success: function(data) {
// Find the city select element in the same row and update its options
row.find(".city").html(data);
}
});
});
Does it work in the first row?
no, not with current code
but when I use ID then its work for only first row
as you did before; when you set a value in country, does a request go to response.php in the network tab?
response.php file not displaying in network tab which is surprsing
So we start with the basics again, figure out when the problem is occuring.
$(".country").on("change", function() {
console.log("Country Changed");
these two error occured in console. But they were also occured when I was using IDs, but at that time this error did not effect script
jQuery 1.12.1 is extremely out of date. The current version of jQuery is 3.7.0.
Unexpected end of input means you’ve got an unclosed curly brace or parenthesis somewhere.
1 Like
yes true. i also search via google, but i think these two wont affect my issue. issue is some where else right ?
response.php is not displaying in network tab, i thnk code unable to access response .php which handle script for depdent list. thats why nothing is displaying in 2nd list state
when I used Id’s code in script for depdent list, response.php display soon after I select country in network tab. where as when i modified code for classes, its not displaying any where in ent work tab
Counting the curly braces in my head, the code in the first post is missing a closing curly brace, but I don’t know if that’s just been missed off the forum post.
code is still able to execute well, the issue is its working with IDs, but when I tried to add classes , then depdent list stop working as response.php not displaying in network tab
thsi is the problamtic part only . Ids need to be changed with classes so that dependent list can work with multiple rows
<tr>
<th width="15%"><center>Type</th>
<th width="15%"><center>Service</th>
<th width="10%"><center>Machine</th>
<th width="5%"></th>
<button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" class="d-none">
<td><Select name="country[]" id = "country" class="country">
<option value=""> Select Type</option>
<?php
include('db1.php');
$query = "select * from country";
// $query = mysqli_query($con, $qr);
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php
}
} ?> </select> </td>
<td><Select class="state" name="state[]" id = "state" class="state">
<option value="">select Service</option></select></td>
<td><Select class="city form-control text-end" name="city[]" id = "city" onchange="GetDetail(this.closest('tr'))">
<option value="">Select Machine</option></select></td>
<option value="">Select Consult</option>
<?php
include('db.php');
$sql = mysqli_query($con,"SELECT * FROM consultant");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['consultant_name'].'">'.$row['consultant_name'].'</option>';
} ?> </select></td>
<td class="NoPrint"><button type="button" class="btn btn-success" style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
</tr> </tbody> </table>
</body>
</html>
// script only work with first rows as IDs involved, Want this to work with multiple rows
<script>
// dependent list script which is problematic part for me
$(document).ready(function() {
$("#country").on('change', function() {
var countryid = $(this).val();
$.ajax({
method: "POST",
url: "response.php",
data: {
id: countryid
},
datatype: "html",
success: function(data) {
$("#state").html(data);
$("#city").html('<option value="">Select Machine</option');
}
});
});
$("#state").on('change', function() {
var stateid = $(this).val();
$.ajax({
method: "POST",
url: "response.php",
data: {
sid: stateid
},
datatype: "html",
success: function(data) {
$("#city").html(data);
}
});
});
});
</script>
Add Button code
<script type="text/javascript">
function GetPrint()
{
/*For Print*/
window.print();
}
function BtnAdd()
{
/*Add Button*/
var v = $("#TRow").clone().appendTo("#TBody") ;
$(v).find("input").val('');
$(v).find("input").autocomplete({
source: 'response.php'
});
$(v).removeClass("d-none");
$(v).find("th").first().html($('#TBody tr').length - 1);
}
</script>`~~~
@m-hutley
document ready” only recognizes things on the page when it is loaded to the screen. If have to add more rows with JS they will not be recognized.
I think its the part of problem due to which reponse.php not displaying in network tab
So… you remember when i gave you that link about event delegation?
You remember when you told me you had read and understood it?
… Did you read and understand it?
Yes I remeber and by using that I created classes wise script, but when I used with document.ready, its stop working from the row one. and When I delete document. ready line then its start working for first row only, and when i clicked on add item to add 2nd row, its not producing result in clone or 2nd generated row. here is script code
<script>
$(document).ready(function() {
// When the user changes the value of the country select element
$(".country").on("change", function() {
// Get the current row element
let row = $(this).closest("tr");
// Get the country id from the current select element
let country_id = $(this).val();
// Use AJAX to send a request to the server-side script
$.ajax({
method: "POST",
url: "response.php",
data: {
id: country_id
},
datatype: "html",
success: function(data) {
// Find the state select element in the same row and update its options
row.find(".state").html(data);
// Find the city select element in the same row and clear its options
row.find(".city").html('<option value="">Select Machine</option>');
}
});
});
// When the user changes the value of the state select element
$(".state").on("change", function() {
// Get the current row element
let row = $(this).closest("tr");
// Get the state id from the current select element
let state_id = $(this).val();
// Use AJAX to send a request to the server-side script
$.ajax({
method: "POST",
url: "response.php",
data: {
sid: state_id
},
datatype: "html",
success: function(data) {
// Find the city select element in the same row and update its options
row.find(".city").html(data);
}
});
});
</script>
So you read a page about event delegation, understood it, and your only takeaway was that you needed to use classes. Which you had already told me you knew and had done in the post… before I gave you the link.
I’m trying to be patient here. But if you’re not going to be honest with me, there’s not much I can do for you.
it was one page and yes I read that page, why would i say anything else, if u remember my answer, i told u last time, that i read and try to understand, and what i understood is , I tried to implement, but not to the level which I wana do. anyway I wil try to solve it by my own
So tell me, if you’ve read and understood that page:
Why does replacing IDs with classes not solve your problem?
