当用户单击所选按钮时显示详细信息

Question

i want to show the bill number when user click it from list,

i have already fetch the data as well but i dont know how can i add this url /api/sales_bill_info/{$bill_number} to show that bill number details.

 $.each(resultData, function(index, row) { // var editUrl = url+'/'+row.id+"/edit"; bodyData += "<tr style='font-size: 0.78em;'>" bodyData += "<td>" + i++ + "</td>" + "<td><a href=" { { url('/api/sales_bill_info/'. + row.bill_number + ) } } " class='btn btn-success btn-sm printbill' value='" + row.bill_number + "' style='margin-left:20px;'>PRINT</a></td>" + "<td><button class='btn btn-sm btn-danger cancelbill' id='cancelbill' value='" + row.SID + "' style='margin-left:20px;'>CANCEL BILL" + row.SID + "</button></td>" + "<td>" + row.bill_number + "</td>" + "<td>" + row.compy_name + "</td>" + "<td>" + row.truck_number + "/" + row.trailer_number + "</td>" + "<td>" + row.Devicenumber + "</td>" + "<td>" + row.slavename + "</td>" + "<td>" + row.name + "</td>" + "<td>" + row.tag_area + "</td>" + "<td>" + row.Lname + "</td>" + "<td>" + row.bill_number + "</td>" + "<td>" + row.driverPhone + "</td>" + "<td>" + row.created_at_sale + "</td>" + "<td><button class='btn btn-danger delete' value='" + row.id + "' style='margin-left:20px;'>Delete</button></td>"; bodyData += "</tr>"; }) $("#bodyData").append(bodyData); } });

i tried to add this "<td><a href="{{url('/api/sales_bill_info/'.+row.bill_number+)}}" class='btn btn-success btn-sm printbill' value='"+row.bill_number+"' style='margin-left:20px;'>PRINT</a></td>"

but does not works.

someone can help me on this

Answer 1

Maybe it could be useful to consider template strings in JavaScript. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

They can really simplify your code and avoid some problems like the ones with quotes or double quotes.

I hope this could help you! Happy coding 😀

 const resultData = [{ bill_number: 1, SID: 2, compy_name: 'xxx', truck_number: '54125', Devicenumber: '123456', slavename: 'fff', trailer_number: 'yyy', name: 'pluto', tag_area: 'A51', Lname: 'xxx', bill_number: '1234', driverPhone: '+0236851545', created_at_sale: '2020-01-01', }]; function url(path) { return 'http://...' } $.each(resultData, function(i, row) { $(`#bodyData`).append( `<tr style='font-size: 0.78em;'> <td>${i++}</td> <td> <a href="${url('/api/sales_bill_info/'+row.bill_number)}}" class='btn btn-success btn-sm printbill' value='${row.bill_number}' style='margin-left:20px;'> PRINT </a> </td> <td> <button class='btn btn-sm btn-danger cancelbill' id='cancelbill' value='${row.SID}' style='margin-left:20px;'> CANCEL BILL ${row.SID} </button> </td> <td>${row.bill_number}</td> <td>${row.compy_name}</td> <td>${row.truck_number} ${row.trailer_number}</td> <td>${row.Devicenumber}</td> <td>${row.slavename}</td> <td>${row.name}</td> <td>${row.tag_area}</td> <td>${row.Lname}</td> <td>${row.bill_number}</td> <td>${row.driverPhone}</td> <td>${row.created_at_sale}</td> <td> <button class='btn btn-danger delete' value='${row.id}' style='margin-left:20px;'> Delete </button> </td> </tr>`); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id='bodyData'></table>

Answer 2

You can try assigning the value of edit url to a variable and then use the same.

 $.each(resultData, function(index, row) { let editUrl = `/api/sales_bill_info/${row.bill_number}`; // var editUrl = url+'/'+row.id+"/edit"; bodyData += "<tr style='font-size: 0.78em;'>" bodyData += "<td>" + i++ + "</td>" + "<td><a href=" + editUrl + "class='btn btn-success btn-sm printbill' value='" + row.bill_number + "' style='margin-left:20px;'>PRINT</a></td>" + "<td><button class='btn btn-sm btn-danger cancelbill' id='cancelbill' value='" + row.SID + "' style='margin-left:20px;'>CANCEL BILL" + row.SID + "</button></td>" + "<td>" + row.bill_number + "</td>" + "<td>" + row.compy_name + "</td>" + "<td>" + row.truck_number + "/" + row.trailer_number + "</td>" + "<td>" + row.Devicenumber + "</td>" + "<td>" + row.slavename + "</td>" + "<td>" + row.name + "</td>" + "<td>" + row.tag_area + "</td>" + "<td>" + row.Lname + "</td>" + "<td>" + row.bill_number + "</td>" + "<td>" + row.driverPhone + "</td>" + "<td>" + row.created_at_sale + "</td>" + "<td><button class='btn btn-danger delete' value='" + row.id + "' style='margin-left:20px;'>Delete</button></td>"; bodyData += "</tr>"; }); $("#bodyData").append(bodyData);