We Keep Coding

Jquery append function only works on initial ajax request, requires page refresh to repopulate another div

I am making an AJAX request to get an JSON array, upon success another AJAX request is performed and the contents are populated to the div of a bootstrap modal via jquery append function. Everything works correctly for the first selection, however, once I close the modal and attempt another entry the append function no longer populates the div. I attempted to empty the contents of the div and also tried the clone function but no matter what the contents are not repopulated until a page refresh. I tried logging to the console and the data is correct and repopulated with each click. Sorry if my code is terrible, still learning. Below is the code I am using. Any help would be appreciated.
function makeModal({first_name, last_name, id}) {
return `
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">${first_name} ${last_name}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>${last_name}</p>
<p>${id}</p>
<p id="job_history"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`;
}
//onclick event
$(document).on('click', '.applicant_detail', function(e) {
var id = $(this).data('id');
//$('#job_history').empty();
$('#myModal').modal('dispose');
$.ajax({
type: "POST",
url: "/admin/get_applicant",
dataType: 'json',
data: {id:id},
success: function(data) {
var count = Object.keys(data).length;
$.each(data, function(index, element) {
var m1 = $(makeModal({last_name:element.last_name, first_name:element.first_name, id:element.id}));
document.body.insertAdjacentHTML('beforeend', m1);
m1.modal('show');
});
$.ajax({
type: "POST",
url: "/admin/get_job_history",
dataType: 'json',
data: {application_id:id},
success: function(data) {
var count = Object.keys(data).length;
$.each(data, function(index, element) {
$('#job_history').append("Job Title: " + element.job_title + '<br>').clone();
console.log('Job Title: ' + element.job_title);
});
},
});
},
});
});

I figure it out. I needed to destroy the modal created via my makeModal function. So I removed the div with each click event. Not sure if this is the best way but it works.
$('#myModal').remove(); //added this below the click event

Uncaught Reference Error: function StartOver() is not defined at HTMLButtonElement.onclick

I have using an Iframe from third party in my razor view page for payment processing, and I want to implement Start Over and Finish Up button using javascript at the bottom section of the page. The script tag to submit init form need to be as it is otherwise the Iframe will not load . All the necessary libraries are included in layout page.
View page Code -
#{
ViewData["Title"] = "Payment Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#model MyModel
<p></p>
<div class="row ">
<div class="col-md-12">
<div class="panel panel-primary panel-title">
<div class="panel-heading text-bold">Embedded UI Component</div>
<div class="panel-body">
<iframe name="client" style="width:100%;height:600px;position:center;left:0;top:0;border:thick"></iframe>
<form action="#Model.IframeUrl" id="initForm" target="client" method="POST" style="display:none">
<input name="X-BEARER-TOKEN" value="#Model.AgentAccessToken">
<input name="X-REFRESH-TOKEN" value="#Model.AgentRefreshToken">
</form>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-12">
<div class="panel panel-primary panel-title">
<div class="panel-heading text-bold">Payment Section Bottom</div>
<div class="panel-body" style="width:100%;height:150px;position:center;left:0;top:0;border:thick">
<h6 style="font-style:italic;color:red">[Populate here.]</h6>
#Html.Hidden("sessionGuid", "#Model.SessionGuid.ToString()")
<form>
<button id="start" class="btn btn-info" onclick="StartOver()">Start Over</button>
<button id="finish" class="btn btn-primary" onclick="FinishUp()">Finish Up</button>
</form>
</div>
</div>
</div>
</div>
<script>
document.getElementById("initForm").submit();
</script>
<script>
debugger;
function StartOver() {
//e.preventDefault();
/* if (confirm("Are you sure you want to start over the Payment Process?")) {
console.log("pressed yes");
}
else {
console.log("pressed no");
}*/
bootbox.confirm({
message: "Are you sure you want to start over the Payment Process?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
var email = #Model.Email;
debugger;
if (result)
{
if (result) {
var request = $.ajax({
url: 'MyController/StartOverSession',
type: 'GET',
data: { Email = email },
contentType: 'application/json; charset=utf-8'
});
}
}
}
});
}
function FinishUp() {
bootbox.confirm({
message: "Are you sure you want to finish the Payment Process?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
if (result) {
window.location.href = "/Thankyou.cshtml";
}
}
});
}
</script>
When I click on Start Over button, I get "StartOver() is not defined at HTMLButtonElement.onclick ". The scripts tags are within tags of HTML. I have checked other related question for this error, but they are not helpful as most of them are either syntax error or jsfiddle settings related. The confirm() method in the comments works.

The default type value for a <button> element is "submit", so your "Start Over" button is triggering a form submission.
The JavaScript confirm() function will generate a dialog which will block the page (and therefore the form submission) processing until it has been dismissed. Bootbox's functions can't do that - all it's really doing is generating a Bootstrap modal on the fly. Bootstrap modals are just positioned <div> elements, so there's no page blocking (nor can there be). We do cover this in the Known Limitations section of the documentation.
Two options, based on your code:
Set the type attribute on both buttons to "button".
<form>
<button type="button" id="start" class="btn btn-info" onclick="StartOver()">Start Over</button>
<button type="button" id="finish" class="btn btn-primary" onclick="FinishUp()">Finish Up</button>
</form>
Use the preventDefault() function you've currently commented out in your code. You just need to add e as an parameter for that to work.
debugger;
function StartOver(e) {
// prevent the button's default action (submit, in this case)
e.preventDefault();
bootbox.confirm({
message: "Are you sure you want to start over the Payment Process?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
var email = '#Model.Email';
debugger;
if (result) {
var request = $.ajax({
url: 'MyController/StartOverSession',
type: 'GET',
data: { Email = email },
contentType: 'application/json; charset=utf-8'
})
.done(function(response, status, jqxhr){
// do something when a successful (status code 200) response is received
})
.fail(function(jqxhr, status, error){
// do something when an error (status code other than 200, including 30x redirects) response is received
});
}
}
});
}

How to display value from SharePoint list to web page

I have a code that take the value from SharePoint List using REST (ajax), as shown as below:
function getItems() {
$.ajax({
async: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Network Tech')/items",
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose"
},
success: function(data) {
data = data.d.results;
console.log(data);
$.each(data, function(index, value) {
var value = value.Service;
});
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
}
I also have a HTML code for the web page, as shown as below:
<body>
<div class="container">
<div class="col-sm-1">
<h3><br><br>Networking<br></h3>
<div class="panel-group wrap" id="bs-collapse">
<div class="panel">
<div class="panel-heading panel-bg-1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#" href="#0101" id="v1">Virtual Networking<br></a>
</h4>
</div>
<div id="0101" class="panel-collapse collapse">
<div class="panel-body">
Coming Soon
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Right now I want to take the value from SharePoint List and display it inside the panel-body. I know how to display it on table but I don't know how to do it on this one. Please help me on this.

You can use this Library that developed by me. Get Here
Then you need to do small callback
var appUrl = GetUrlKeyValue("SPAppWebUrl");
var hostUrl = GetUrlKeyValue("SPHostUrl");
var list = SPMagic.ListManager(appUrl, hostUrl, "Network Tech");
list.getAllListItems("Id", 100,).then(function (res) {
console.log(res.d.resutls);
}, function(err){
console.log(err);
}
Then you can use KnockoutJS to do the Bindings for the table.

Make the button do anything

I'm trying to create a random quote generator and I've linked the GET request with the button. I'm kinda clueless with API's this is my first try and I'd like for someone to point out my mistake. Here is my code:
$("#randomQuote").on('click', function() {
$.ajaxSetup({
cache: false
});
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=", function(data) {
$(".messageQuote").html(data[0].content + " - " + data[0].title)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="text-center">random quotes</h1>
<div class="container">
<div class="well col-xs align-self-center messageQuote text-center">
<button id="randomQuote" type="button">random quote</button>
</div>
</div>
https://codepen.io/grodis/pen/ZXNZvz?editors=1011

How to load a page through ajax and jquery in cold fusion?

When I run this script I am getting AjaxFunction is undefined. I have searched and know that it is not defined in proper scope but can anyone let me know what is the correct way to define it and what is the reason for the error.
<script type=”text/javascript”>
function(AjaxFunction) {
alert(“test”);
$.ajax({
type: “GET”,
url: “cfquery.cfm”,
success: function (res) {
alert(res);
document.getElementById("loadingdiv").style.display = ”block”;
document.getElementById("loadingdiv").innerHTML = res;
}
});
};
</script>
<cfform id="PageloadAjax" name="PageloadAjax">
<div id="Displayingdiv" name="displayingdiv">
<cfinput id="CFQUERYbutton" name="CFQUERYbutton" type="button" value="Displaypage" onclick="AjaxFunction">
</div>
<div id="loadingdiv" name="loadingdiv"></div>
</cfform>

Right now you are defining an anonymous function with AjaxFunction as a parameter. Step one in getting this to works is to change
function(AjaxFunction) {...}
into
function AjaxFunction() {...}
Also, in the onClick attribute, you must call the function, not just name it. So change
onclick="AjaxFunction"
into
onclick="AjaxFunction()"
I recommend looking at some basic JavaScript material to more easily understand and solve these minor issues. You could start with W3 Schools for easily understandable tutorials, or You don't know JS if you want more in-depth JavaScript knowledge.

Try this
<script type=”text/javascript”>
function AjaxFunction() {
alert(“test”);
$.ajax({
type: “GET”,
url: “cfquery.cfm”,
success: function (res) {
alert(res);
document.getElementById("loadingdiv").style.display=”block”;
document.getElementById("loadingdiv").innerHTML=res;
}
});
};
</script>
And call function in onclick = "AjaxFunction()".

the answer that perfectly worked for me is:
<script type="text/javascript">
function AjaxFunction(mode) {
var url="";
if ( mode =="contacts") url = "cfquery.cfm";
if ( mode =="tagsvsscripts") url = "cfqueryprogram.cfm";
if ( mode =="siteinfo") url = "CFtagsvsscripts.cfm";
if ( mode =="Jqueryhide") url = "dynamic.cfm";
$.ajax({
type: "GET",
url: url,
success: function (res) {
$("#results").addClass("loading");
document.getElementById("loadingdiv").style.display="block";
$("#results").html(res);
$("#results").removeClass("loading");
}
});
}
</script>
<div class="card mb-4">
<div class="card-header bg-secondary">
Ajax Page Load Example Using Bootstrap
</div>
<div class="card-block">
<div class="row">
<div class="col-lg-3 col-xl-2 col-form-label">
<input class="btn btn-primary" name="CFQUERYbutton"
type="button" value="Displaypage" onclick="AjaxFunction('Jqueryhide')">
<br><input class="btn btn-primary"
name="CFQUERYbutton" type="button" value="Displaypage"
onclick="AjaxFunction('contacts')">
<br><input class="btn btn-primary"
name="CFQUERYbutton" type="button" value="Displaypage"
onclick="AjaxFunction('tagsvsscripts')">
<br><input class="btn btn-primary"
name="CFQUERYbutton" type="button" value="Displaypage"
onclick="AjaxFunction('siteinfo')">
</div>
<div id="loadingdiv" name="loadingdiv">
</div>
<div id="results"></div>
</div>
</div>
</div>