Develop Reference

How to pass the id via jquery in ajax call to perform delete operation?

I want to delete the element of the list by clicking the delete button.
i have written the following ajax call for this:
.ajax({
type : "GET",
url : 'getVenueList',
success : function(data) {
console.log(data);
var sequenceNo = 1;
var tableData = '';
for (var i = 0; i < data.length; i++) {
tableData = "<tr><td>" + sequenceNo + "</td><td>"
+ data[i].venueName + "</td>";
tableData += ' <td><a class="no-line"> <i id="Edit" title="Edit" class="fa fa-pencil-square-o" style="font-size: 15px;" aria-hidden="true"></i></a> </td>';
tableData += ' <td><a class="no-line" onclick="deleteVenue(this);"> <span class="glyphicon glyphicon-remove" style="color: red" ></span></a></td>';
tableData += ' <td style="display: none;"> '
+ data[i].venueId + '</td></tr>';
sequenceNo = sequenceNo + 1;
$('#tbodyId').append(tableData);
}
}
});
on delete icon i have put the onclick function :
function deleteVenue(obj) {
var setValue = obj.id;
$
.ajax({
type : "GET",
async : false,
url : "deleteVenue",
data : {
venueId : setValue
},
success : function(data) {
console.log(data);
window.location.reload();
}
});
}
but the issue is i am not getting the id in obj...
what is the solution?

You should change this part.
<a class="no-line" onclick="deleteVenue(this);">
to
<a class="no-line" onclick="deleteVenue('+ data[i].venueId + ');">
function deleteVenue(id) {
$.ajax({
type : "GET",
async : false,
url : "deleteVenue",
data : {
venueId : id
},
success : function(data) {
console.log(data);
window.location.reload();
}
});
}

How to append table row inside parent table after selecting dropdown list using JavaScript and Ajax?

I am creating a table using Ajax and JavaScript and using Spring Boot as a backend technology. So the scenario is:
There are two dropdowns one for selecting company name from list and with that company, corresponding truck list would be displayed. After selecting company name and truck from both the dropdowns, clicking on search button there would display a table with dynamic data of selected company and truck. So, for each created row there is select drop down in table row. So I want to display further data when selecting any of the option list from dropdown.
I want to display child row inside parent row after selecting any of the option from dropdown list using Ajax and JavaScript.
Below is my script where I am creating table with dynamic data:
function searchdata(){
var companyid = $("#searchQueryDD").val();
var truckid = $("#searchtruckdd").val();
var url = "api/gettablebycompanyandtruck";
$.post(url, {
companyid : companyid,
truckid : truckid,
limit : limit,
}, function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1) {
var list = data.response;
var row = "", tripnumber="";
var newtrip = [];
var uniquetrip = {};
var row = "";
if(list.length > 0){
for(var i = 0; i < list.length; i++){
tripnumber = list[i].tripnumber;
uniquetrip[tripnumber] = list[i];
}
for(var i in uniquetrip){
newtrip.push(uniquetrip[i]);
}
for(var i = 0; i < newtrip.length; i++){
row = row + "<tr>" +
"<td>"+newtrip[i].company.companyname+"</td>" +
"<td>"+newtrip[i].driver.username+"</td>" +
"<td>"+newtrip[i].truck.name+"</td>" +
"<td>"+newtrip[i].tripnumber+"</td>" +
"<input type='hidden' id='company_id' value='"+newtrip[i].company.companyid+"'>" +
"<input type='hidden' id='trip_number' value='"+newtrip[i].tripnumber+"'>"+
"<td><select onchange='getmorerows();' id='sub_trip'>" +
"<option selected disabled>Choose subtrip</option><option value='1'>1</option>" +
"<option value='2'>2</option><option value='3'>3</option></select></td>"+
"<td>"+newtrip[i].pickupdate+"</td>" +
"<td>"+newtrip[i].deliverydate+"</td>"+
"<td>"+newtrip[i].loadrate+"</td>" +
"<td>"+newtrip[i].dispatchfee+"</td>" +
"<td>"+newtrip[i].fuel+"</td>" +
"<td>"+newtrip[i].cardfee+"</td>" +
"<td>"+newtrip[i].onroadrepair+"</td>" +
"<td>"+newtrip[i].shoprepair+"</td>" +
"<td>"+newtrip[i].trailerrent+"</td>" +
"<td>"+newtrip[i].comcheck+"</td>" +
"<td>"+newtrip[i].advance+"</td>" +
"<td>"+newtrip[i].miscellenous+"</td>" +
"<td>"+newtrip[i].total+"</td>" +
"<td>"+newtrip[i].layover+"</td>" +
"<td>"+newtrip[i].grandtotal+"</td>" +
"<td>" +
"<a data-toggle='modal' data-target='#mode_payment' onclick=\"getpayment('"+newtrip[i].tripid+"');\">"
+"<i class='fa fa-paypal' aria-hidden='true' style='color:#3585a5'></i>" +
"</a>" +
"<a onclick=\"getTrip('"+newtrip[i].tripid+"');\">"
+"<i class='fa fa-pencil-square-o ml-3' style='color: #3384a4;'></i>" +
"</a>" +
"<a href='invoice?id="+newtrip[i].tripid+"'>"
+"<i class='fa fa-file-pdf-o ml-3' aria-hidden='true' style='color:red'></i>" +
"</a>" +
"</td>" +
"</tr>";
}
}else{
row = row + "<tr><td colspan='19' style='font-size: initial;font-family: initial;'>No Data Available.</td></tr>";
}
document.getElementById('searchresulttable').innerHTML = row;
$("#triptable").css('display','inline-block');
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
}
And below script is to handle onchange event on select options:
function getmorerows() {
var companyid = document.getElementById("company_id").value;
var tripnumber = document.getElementById("trip_number").value;
var subtrip = document.getElementById("sub_trip").value;
var url = "api/getbysubtrip";
$.post(url,{
companyid : companyid,
tripnumber : tripnumber,
subtrip : subtrip,
},function(data, status){
if (data.status == "OK") {
if (data.statusCode == 1) {
var list = data.response;
var childrow = "";
if(list.length > 0){
for(var i = 0; i < list.length; i++){
childrow = childrow + "<tr class='display-nonee'>" +
"<td>"+list[i].company.companyname+"</td>"+
"<td>"+list[i].company.companyname+"</td>"+
"<td>"+list[i].company.companyname+"</td>"+
"</tr>";
var tr = $(this).parent().parent().nextAll(':lt(2)');
if (tr.is(".display-none")) {
tr.removeClass('display-none');
} else {
tr.addClass('display-none');
}
}
}
document.getElementById('searchresulttable').innerHTML = childrow;
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
}

Change one line in getmorerows()
document.getElementById('searchresulttable').innerHTML = childrow; to $('#searchresulttable').append(childrow);

Pass JSON result from AJAX to HTML

I am querying a fuseki server using AJAX and the result that I am getting is a JSON object.
I would like to use pagination to go through the result with a limit of records per page. I have tried to send the JSON object to a div in the html file but it is not working. Is there a workaround this? Here is my code:
function myCallBack2(data) {
var all_results = '';
for (var i = 0; i < data.results.bindings.length; i++) {
var bc = '';
if (i % 2 == 0) {
bc = '#b8cddb';
} else {
bc = '#f2f5f7';
}
all_results += '<div class="all_results" style="background-color:' + bc + '">';
for (var j = 0; j < data.head.vars.length; j++) {
var text = data.results.bindings[i][data.head.vars[j]].value;
var type = data.results.bindings[i][data.head.vars[j]].type;
all_results += '<div class="result_row">';
if (type == ('literal')) {
all_results += '<p> ' + data.head.vars[j] + ": " + text + '</p>';
} else {
all_results += '<a href=' + text + " title=" + data.head.vars[j] + '>' + text + '</a>';
}
all_results += '</div>';
}
all_results += '</div>';
}
$('#result').html(all_results);
}
function doSparql() {
var myEndPoint = "http://localhost:3030/Test/query";
name = document.getElementById("search").value;
var requiredName = "?Author foaf:firstName \"" + name + "\".}";
myQuery = ["PREFIX dcterms: <http://purl.org/dc/terms/>",
"PREFIX foaf: <http://xmlns.com/foaf/0.1/>",
"PREFIX locah: <http://data.archiveshub.ac.uk/def/>",
"SELECT ?Register ?Id ?Date ?Type",
"WHERE{",
"?Register dcterms:creator ?Author.",
"?Register dcterms:identifier ?Id.",
"?Register dcterms:type ?Type.",
"?Register locah:dateCreatedAccumulatedString ?Date.",
requiredName
].join(" ");
console.log('myQuery: ' + myQuery);
window.alert(myQuery);
$.ajax({
dataType: "jsonp",
url: myEndPoint,
data: {
"query": myQuery,
"output": "json"
},
success: myCallBack2,
error: myError
});
console.log('After .ajax');
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<div id="page-selection1" "></div>
<div id="result " class="result "></div>
<div id="page-selection2 "></div>
<script>
$('#page-selection1,#page-selection2').bootpag({
total: 50,
page: 1,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: 'First',
last: 'Last',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page ", function(event, num) {
$("#result ").html("Page " + num);
});
</script>
I am expecting to show part of the results instead Page 1, Page 2... in #result according to a limit per page.

How to render a List Element using VueJs from a json data

I have a javascript code which renders <ol><li></li></ol> , Using a json from the server . The code looks something like this
function loadWorkFlowRules() {
var wf_id = <?php echo $wf->id; ?>;
$.post("/api/wfengine/get_wf_rules/", {
wf_id: wf_id
}, function(result) {
var wf_rules = JSON.parse(result).data;
if (makeView(wf_rules)) {
toastr.success('The Rules are Successfully Loaded!');
} else
toastr.info('Welcome to Work Flow Editor');
});
}
function makeView(wf_rules) {
//console.log(wf_rules);
var html_str = '',
response = false;
$.each(wf_rules, function(key, value) {
if (value.length > 0) {
$.each(value, function(key1, value1) {
var ui_l1 = '<li class="alert mar" data-id="' + value1.id + '" data-name="' + value1.name + '" style=""><div class="dd-handle state-main">' + value1.name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div><ol>';
html_str = html_str + ui_l1;
if (value1.children.length > 0) {
$.each(value1.children, function(key2, value2) {
$.each(value2, function(key3, value3) {
var ui_l2 = '<li class="alert mar" data-id="' + value3.id + '" data-name="' + value3.name + '" style=""><div class="dd-handle state-main">' + value1.name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div><ol>';
html_str = html_str + ui_l2;
if (value3.children.length > 0) {
$.each(value3.children, function(key4, value4) {
if (value4.length > 0) {
var ui_l3 = '<li class="dd-item alert mar action" data-id="' + value4[0].id + '" data-name="' + value4[0].name + '" data-api="' + value4[0].api + '" data-url="' + value4[0].url + '" data-json="' + value4[0].json + '" style=""><div class="dd-handle">' + value4[0].name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span> <span class="edit cust-close" data-toggle="modal" data-target="#editAction" ><i class="fa fa-pencil"></i></span></div></li>';
html_str = html_str + ui_l3;
}
})
}
html_str = html_str + '</ol></li>';
});
})
}
html_str = html_str + '</ol></li>';
});
$('.contract_main').html(html_str);
response = true;
} else
response = false;
});
return response;
}
HTML
<div class="dd">
<ol class="dd-list simple_with_drop vertical contract_main">
</ol>
</div>
I got into a situation where Ill have to Bind the data element of the child <li> with an HTML MODAL popup , So that if the value in Modal is updated it shoud change in the Object/Dom also .
I was recommended to use VueJs.
I have went through! the basics of the VueJs , But that didn't cover how I ccan bind complete list from a Json ,
Any help in how I can do this would be great

Currently I don't see any structure of Vue.Js in your code and you are manipulating the JSON data and constructing the HTML in the JS code itself. You can do it in vue way, where you will create an Vue instance, do loading of data in Vue methods and use Vue syntax to iterate over data and other things. One Simple example you can see in this fiddle or in below code:
new Vue({
el: '#app',
data: {
jsonData: []
},
mounted () {
this.loadJsonData();
},
methods: {
loadJsonData(){
setTimeout(()=>{
this.jsonData = ["first", "Second", "Third", "And So On"]
}, 300)
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="data in jsonData">{{data}}</li>
</ul>
</div>
You can look at vue-hackernews to understand more about structuring of code, How to fetch data from remote APIs in JSON format and display it.

Avoid looping once click the a tag

I am trying to figure out how to avoid looping in JavaScript.
I have this code:
$.ajax({
url : '<?php echo base_url()?>project/search_project_structure_stage',
type: 'POST',
data: {
project_id: $('#project_id').val()
},
success : function(stages)
{
var stages = $.parseJSON(stages);
for (var i = 0; i < stages.length; i++)
{
stageID = stages[i].ID;
stagename = stages[i].StageName;
stageorder = stages[i].ordStage;
stagetypecode = stages[i].StageCode;
projectid = stages[i].PID
var html_stage = "<div class='row col-sm-10'><ol id='"+stageID+"' class='group_stage'>" +
"<li style='list-style:none' class='container span1'>" +
"<a class='expand_batch'><i class='fa fa-folder'></i> " + stagename +
" [" + stagetypecode +
"] (" + stageorder +
")</a>" +
"<a class='icon_edit_stage' id='"+stageID+"'>" +
"<i class='fa fa-pencil fa-fw icon'></i>" +
"</a>" +
"<a class='scopy' sid='"+stageID+"' pid='"+projectid+"'>" +
"<i class='fa fa-copy fa-fw icon'></i>" +
"</a>";
$('#stage').append(html_stage);
$.ajax({
url : '<?php echo base_url()?>project/search_project_structure_batch',
type: 'POST',
data: {
'stage_id': stageID,
},
success : function(batch)
{
var batch = $.parseJSON(batch);
for (var i = 0; i < batch.length; i++)
{
batchID = batch[i].BatchID;
batchname = batch[i].BatchName;
batchorder= batch[i].ordBatch;
stageid = batch[i].StageID;
projectid = batch[i].Project_ID;
var html_batch = "<ol id='"+batchID+"' class='group_batch batch'>" +
"<li style='list-style:none' class='container span2'>" +
"<a class='expand_activity'>" +
"<i class='fa fa-list'></i> " + batchname +
" (" + batchorder +
")</a>" +
"<a class='icon_edit_batch' id='"+batchID+"'>" +
"<i class='fa fa-edit fa-fw icon'></i>" +
"</a>" +
"<a class='bcopy' bid='"+batchID+"' sid='"+stageid+"' pid='"+projectid+"' data-toggle='modal'>" +
"<i class='fa fa-copy fa-fw icon'></i>" +
"</a>";
$('#'+stageid).append(html_batch);
}
$( ".bcopy" ).click(function()
{
batch_id = $(this).attr('bid');
stage_id = $(this).attr('sid');
batch_project_id = $(this).attr('pid');
$('#batch_id').val(batch_id);
$('#batch_stage_id').val(stage_id);
$('#batch_project_id').val(batch_project_id);
$('#myModalCloneBatch').modal('show');
$( "#clone_batch" ).click(function()
{
$.ajax({
url : '<?php echo base_url('project/clone_batch')?>',
type: 'POST',
data:
{
batch_id : $('#batch_id').val(),
batch_stage_id : $('#batch_stage_id').val(),
batch_project_id : $('#batch_project_id').val(),
batch_name : $('#batch_name').val(),
batch_quantity : $('#batch_quantity').val()
},
success: function(msg)
{
}
});
});
});
}
});
}
$( ".scopy" ).click(function()
{
stage_id = $(this).attr('sid');
stage_project_id = $(this).attr('pid');
$('#stage_id').append(stage_id);
$('#stage_project_id').append(stage_project_id);
$('#myModalCloneStage').modal('show');
$( "#clone_stage" ).click(function()
{
$('#myModalCloneStage').modal('hide');
document.getElementById('toggle-div').style.display='block';
var target = document.getElementById('wrapper');
var spinner = new Spinner(opts).spin(target);
$.ajax({
url : '<?php echo base_url('project/clone_stage')?>',
type: 'POST',
data:
{
stage_id : $('#stage_id').text(),
stage_project_id : $('#stage_project_id').text(),
stage_name : $('#stage_name').val(),
stage_code : $('#stage_code').val()
},
success: function(msg)
{
document.getElementById('toggle-div').style.display='none';
spinner.stop();
var msg = $.parseJSON(msg);
jo_number = $('#jo_number').val();
$('#cloned_jo_number').append(jo_number);
$('#myModalCloneStageSuccess').modal('show');
}
});
});
});
}
});
As you will notice the $( ".bcopy" ).click(function() is inside the for loop. I just want to ask how to avoid that once I click the <a> tag with class bcopy. It will not follow the for loop?
It happens that when I click the <a> tag it loop.

Put it out side the loop as it is rendering the click event script multiple time and as element is added after DOM loaded you need to use delegated event to make it work:
$("#stage").on('click','.bcopy',function()
{
// your code goes here
});
you can read more in detail from here

Your question is not very clear, but if you want things to happen in order, you should try using the Deferred Object in jQuery.
If you want the handler for the click to only be assigned after your for loop, add a function that runs the for loop first and another that assigns the handler second, to a deferred object, before calling deferred.resolve(). There is also a lot of potential to help clean your code using the Deferred Object.