We Keep Coding

Converting the text into a clickable Link

I have a web application, which displays the result parsed from an XML file in the form of table using ajax. It is working good, but the thing is, the data in the XML file is mostly URLs but I am seeing the result in the form of text. I want that text to be made/converted into a clickable link so that it would make my life easier. Is there any code which would make it possible? If yes, please let me know where should I place it. That code is in ASPX page which also has the html code which is responsible for the style of my webpage..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Scripts/jquery-3.2.1.js"></script>
<script language="javascript" type="text/javascript">
var CheckImage = "<img src='images/check.png' height='25' width='25'>";
var CrossImage = "<img src='images/cross.png' height='25' width='25'>";
var Fail = "<img src='images/fail.png' height='25' width='30'>";
setInterval(url, 100);
setInterval(redirects, 100);
function url()
{
$.ajax(
{
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
cache: false,
success: function (xml)
{
var tableContent1 = "<table border='1' cellspacing='0' cellpadding='5'>" +
"<tr>" +
"<th>SiteName</th>" +
"<th>URLType</th>" +
"<th>DNSStatus</th>" +
"<th>TargetStatus</th>" +
"<th>TTL</th>" +
"<th>SSL</th>" +
"<th>Force</th>" +
"</tr>";
$(xml).find('ProdURL').each(function ()
{
tableContent1 += "<tr>" +
"<td>" + $(this).attr('ProdHost') + "</td>" +
"<td>" + $(this).attr('URLType') + "</td>" +
"<td>" + ($(this).attr('DNSStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + ($(this).attr('TargetStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('TTL') + "</td>" +
"<td>" + ($(this).attr('SSL') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('Force') + "</td>" +
"</tr>";
});
tableContent1 += "</table>";
$("#UpdatePanel").html(tableContent1)
getdata(tableContent1);
}
});
}
function redirects()
{
//this ajax code parses the information from XML file and displays it on the table
$.ajax(
{
//If the name of the XML file is changed, make sure to update that in the url:
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
contentType:"url",
cache: false,
success: function (xml)
{
var tableContent2 = "<table border='5' cellspacing='1' cellpadding='10'>" +
"<tr>" +
"<th>URL</th>" +
"<th>Target</th>" +
"<th>Status</th>" +
"</tr>";
$(xml).find('Redirect').each(function ()
{
tableContent2 += "<tr>" +
"<td>" + $(this).attr('URL')+ "</td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + ($(this).attr('Status') == "Fail" ? Fail : CheckImage && $(this).attr('Status') == "OK" ? CheckImage : CrossImage) + "</td>" +
"</tr>";
});
tableContent2 += "</table>";
$("#UpdatePanel1").html(tableContent2)
getdata(tableContent2);
}
});
}

Here is a more complete example to show you. This is adding a anchor tag with the URL inside your table when you are creating your <td> in the loop.
let tableContent2 = "";
$("div").each(function() {
tableContent2 += "<tr>" +
"<td> <a href='" + $(this).attr('URL') + "'>" + $(this).attr('URL') + "</a></td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + $(this).attr('Status') + "</td>" +
"</tr>"
})
$("#UpdatePanel1").html(tableContent2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this div is just for this example -->
<div URL="https://example.com" Target="I am a target" Status="OK"></div>
<table>
<tbody id="UpdatePanel1">
</tbody>
</table>

Asp.net Same button to edit and Save using Jquery

I have something like that,
When I click on edit, It populate the record of that student back to Text Boxes. I want to use the same 'Save' button to save and edit. I am also saving the student through same button.
I want that when someone click the edit button Save ajax call would not call. I am stuck on that. Currently when i edit the record, same record also inserted. If anyone want to see the code I can edit the question for that .
Thanks
function UpdateStudent(id, name, fname, roll, age, phone, address) {
debugger
$(document).ready(function () {
$("#students").show();
$("#txtName").val(name);
$("#txtFatherName").val(fname);
$("#txtRollNo").val(roll);
$("#txtAge").val(age);
$("#txtPhone").val(phone);
$("#txtAddress").val(address);
if (id) {
$("#btnSave").click(function (e) {
e.preventDefault();
debugger
var Name = $("#txtName").val();
var FatherName = $("#txtFatherName").val();
var RollNo = $("#txtRollNo").val();
var Age = $("#txtAge").val();
var Phone = $("#txtPhone").val();
var Address = $("#txtAddress").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "StudentManagement.aspx/UpdateStudent",
data: "{'ID': '" + id + "','Name':'" + Name + "','FatherName':'" + FatherName + "','RollNo':'" + RollNo + "','Age':'" + Age + "','Phone':'" + Phone + "','Address':'" + Address + "'}",
dataType: "json",
success: function (data) {
debugger
$("#txtName").val("");
$("#txtFatherName").val("");
$("#txtRollNo").val("");
$("#txtAge").val("");
$("#txtPhone").val("");
$("#txtAddress").val("");
$("#students").hide();
var array = data.d;
$("#table").find("tr:gt(0)").remove();
for (var i = 0; i < array.length - 1; i++) {
var row = "<tr>"
+ "<td>" + array[i].ID + "</td>"
+ "<td>" + array[i].Name + "</td>"
+ "<td>" + array[i].FatherName + "</td>"
+ "<td>" + array[i].RollNo + "</td>"
+ "<td>" + array[i].Age + "</td>"
+ "<td>" + array[i].Phone + "</td>"
+ "<td>" + array[i].Address + "</td>"
+ "<td><a href='#' onclick='UpdateStudent(\"" + array[i].ID + "\",\"" + array[i].Name + "\",\"" + array[i].FatherName + "\",\"" + array[i].RollNo + "\",\"" + array[i].Age + "\",\"" + array[i].Phone + "\",\"" + array[i].Address + "\")'>Edit</a></td>"
+ "<td><a href='#' onclick='DeleteStudent( " + array[i].ID + " )'>Delete</a></td>"
+ "</tr>"
$("#table").append(row);
}
},
error: function (response) {
debugger
alert(response);
}
});
return false;
});
}
})
}
And Insert Student code it below, also
function InsetStudent() {
debugger
$(document).ready(function () {
var Name = $("#txtName").val();
var FatherName = $("#txtFatherName").val();
var RollNo = $("#txtRollNo").val();
var Age = $("#txtAge").val();
var Phone = $("#txtPhone").val();
var Address = $("#txtAddress").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "StudentManagement.aspx/CreateStudent",
data: "{'Name':'" + Name + "','FatherName':'" + FatherName + "','RollNo':'" + RollNo + "','Age':'" + Age + "','Phone':'" + Phone + "','Address':'" + Address + "'}",
dataType: "json",
success: function (data) {
debugger
$("#txtName").val("");
$("#txtFatherName").val("");
$("#txtRollNo").val("");
$("#txtAge").val("");
$("#txtPhone").val("");
$("#txtAddress").val("");
$("#students").hide();
var array = data.d;
$("#table").find("tr:gt(0)").remove();
for (var i = 0; i < array.length; i++) {
var row = "<tr>"
+ "<td>" + array[i].ID + "</td>"
+ "<td>" + array[i].Name + "</td>"
+ "<td>" + array[i].FatherName + "</td>"
+ "<td>" + array[i].RollNo + "</td>"
+ "<td>" + array[i].Age + "</td>"
+ "<td>" + array[i].Phone + "</td>"
+ "<td>" + array[i].Address + "</td>"
+ "<td><a href='#' onclick='UpdateStudent(\"" + array[i].ID + "\",\"" + array[i].Name + "\",\"" + array[i].FatherName + "\",\"" + array[i].RollNo + "\",\"" + array[i].Age + "\",\"" + array[i].Phone + "\",\"" + array[i].Address + "\")'>Edit</a></td>"
+ "<td><a href='#' onclick='DeleteStudent( " + array[i].ID + " )'>Delete</a></td>"
+ "</tr>"
$("#table").append(row);
}
},
error: function (response) {
debugger
alert(response);
}
});
return false;
})
}
And insertStudent call on jquery load, like
$("#btnSave").click(function (e) {
e.preventDefault();
InsetStudent();
})

You can do this like:
STEP1:
If you have any required field in your form then use this
$("#btnSave").click(function (e) {
e.preventDefault();
if(Check value of required field not null or empty)
{
UpdateStudent(id, name, fname, roll, age, phone, address);
}
else
{
InsetStudent();
}
});
STEP2:
If you are not using any required field in your form then use hidden field. default value of this Hidden field will be false. When user will click on edit first assign true to hidden field.
$("#btnSave").click(function (e) {
e.preventDefault();
if(Check value of Hidden field true)
{
UpdateStudent(id, name, fname, roll, age, phone, address);
//Here update hidden field value to false after completing the operation
}
else
{
InsetStudent();
}
});
hope this logic will help you.

Remove only btnSave click event
$("#btnSave").click(function (e) {
});
from your function UpdateStudent and call the
function UpdateStudent directly on edit button click event

jQuery will not bind on click handler to image

I have created a table using an array of JSON Objects that are returned by my servlet. I am trying to make it so that when I click on the image I add before each row it will call a function. The code below should work but it does not and I think I'm missing something simple.
$(document).ready(function(){
loadData();
$("#item").bind("click", function() { alert("test"); });
});
function loadData(){
$.ajax({
type: "POST",
url: "http://myservlet.com/orders",
data: { }
}).done(function( msg ) {
response = $.parseJSON(msg);
$.each(response, function(key,value) {
alert(value.order_id);
var item = 0;
$("#ordersTable tbody").append(
"<tr>"+
"<td><img src=http://examplewebsiteurl.com/plus.png id='item'></img></td>"+
"<td>"+value.order_id+"</td>"+
"<td>"+value.sku+"</td>"+
"<td>"+value.quantity_purchased+"</td>"+
"<td>"+value.product_name+"</td>"+
"<td>"+value.buyer_name+"</td>"+
"<td>"+value.buyer_phone_number+"</td>"+
"</tr>"
);
});
});
}

Try like
$(document).on('click', '#item', function() {
alert("test");
});

Loading data is asynchronous operation that's why you can't bind anything before DOM is populated. You can provide a callback function to be called once data has come and available. Or you can use the fact that $.ajax is Promise object. For example:
function loadData() {
return $.ajax({
type: "POST",
url: "http://myservlet.com/orders",
data: {}
}).done(function (msg) {
$.each(response, function (key, value) {
var item = 0;
$("#ordersTable tbody").append(
"<tr>" +
"<td><img src=http://examplewebsiteurl.com/plus.png class='item'/></td>" +
"<td>" + value.order_id + "</td>" +
"<td>" + value.sku + "</td>" +
"<td>" + value.quantity_purchased + "</td>" +
"<td>" + value.product_name + "</td>" +
"<td>" + value.buyer_name + "</td>" +
"<td>" + value.buyer_phone_number + "</td>" +
"</tr>");
});
});
}
loadData().done(function() {
$(".item").bind("click", function() { alert("test"); });
});

Why are functions executed in this order?

Code:
function fillChooseCompInAddDeviceDiv(){
$.ajax({
url: "${pageContext.request.contextPath}/StoreServlet",
type: "get",
data: {ajaxId: "2"},
dataType: "json",
success: function(data) {
$("table#choseComponentAddDeviceDiv").find("td").remove();
for(var i = 0; i<data.length; i++) {
$("table#choseComponentAddDeviceDiv").append("<tr>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].price + "</td>" + "<td>" + data[i].amount + "</td>" + "<td>" + data[i].description + "</td>" + "<td>" + data[i].categoryName + "</td>" + "<td>" + "<a href='" + data[i].link + "'>" + data[i].link + "</a>" + "</td>" + "<td>" + "<img src = '" + data[i].imagePath + "' />" + "</td>" + "<td>" + "<input type='checkbox' class='checkBoxCol' value='" + data[i].name + "'>" + "</td>" + "</tr>");
}
alert("ALERT 1");
},
error: function(status) {
//Do something
}
});
}
//any edit clicked in eny table
function anyEditOnCLick(buttonId, buttonVal){
window.editIsClicked = true;
$("input.nameInput").attr("readonly", true);
if (buttonId === "device"){
$("#addDeviceDiv").css("visibility", "visible");
window.location.hash = "#addDeviceDiv";
fillChooseCompInAddDeviceDiv();
$.ajax({
url: "${pageContext.request.contextPath}/StoreServlet",
type: "get",
data: {ajaxId: "11", toEdit: buttonVal},
dataType: "json",
success: function(data) {
// puni text area
$("#addDeviceFieldName").val(data.name);
$("#addDeviceFieldDescription").val(data.description);
// cekira odgovarajuce komponente, jedan samo data se ocekuje, ne data[]
//fillChooseCompInAddDeviceDiv();
for (var i = 0; i<data.components.length; i++){
$("table#choseComponentAddDeviceDiv td input").filter(function(){return this.value == data.components[i].name}).attr("checked", true);
}
alert("ALERT 2");
},
error: function(status) {
//Do something
}
});
//name is unique - cannot be changed
$("#addDeviceDiv input#addDeviceFieldName").attr("readonly", true);
} else if (buttonId === "component"){
$("#addComponentDiv").css("visibility", "visible");
window.location.hash = "#addComponentDiv";
fillCategorySelection();
$.ajax({
url: "${pageContext.request.contextPath}/StoreServlet",
type: "get",
data: {ajaxId: "21", toEdit: buttonVal},
dataType: "json",
success: function(data) {
$("#addComponentFieldName").val(data.name);
$("#addComponentFieldPrice").val(data.price);
$("#addComponentFieldAmount").val(data.amount);
$("#addComponentFieldDescription").val(data.description);
$("#addComponentFieldLink").val(data.link);
$("#form#uploadForm #imageFile").attr("value", data.imagePath);
//fillCategorySelection();
$("#addComponentDiv select.categorySelect option").filter(function(){return this.value == data.categoryName}).attr("selected", "selected");
},
error: function(status) {
//Do something
}
});
//name is unique - cannot be changed
$("#addComponentDiv input#addComponentFieldName").attr("readonly", true);
} else if (buttonId === "category"){
$("#addCategoryDiv").css("visibility", "visible");
window.location.hash = "#addCategoryDiv";
fillChoseSubCategoriesinAddCategoriesDiv();
$.ajax({
url: "${pageContext.request.contextPath}/StoreServlet",
type: "get",
data: {ajaxId: "31", toEdit: buttonVal},
dataType: "json",
success: function(data) {
$("#addCategoryFieldName").val(data.name);
$("#addCategoryFieldDescription").val(data.description);
//fillChoseSubCategoriesinAddCategoriesDiv();
for (var i = 0; i<data.subCategories.length; i++){
$("table#choseSubCategoriesinAddCategoriesDiv td input").filter(function(){return this.value == data.subCategories[i].name}).attr("checked", true);
}
},
error: function(status) {
//Do something
}
});
//name is unique - cannot be changed
$("#addCategoryDiv input#addCategoryFieldName").attr("readonly", true);
}
}
Function anyEditOnCLick(arg1, arg2) is event function and is placed in onClick tag of a button.
When I click on this button browser always first shows ALERT 2 message and after that go execute fillChooseCompInAddDeviceDiv() and shows ALERT 1. Can someone explain what is really happend here and how can I "persuade" javascript first execute fillChooseCompInAddDeviceDiv()? Before this, i thought function call provides executing whole function body before resuming execution of outer code.

Ajax cannot get success or error

I'm trying to show search results via AJAX to the view. The action gets JSON and sends it, but the AJAX seems to not be receiving the data.
$(function () {
$("#btnSearchForUser").click(function () {
var searchUserResult = $("#UserName").val();
var jsonResult = {
UserName: searchUserResult
};
$.ajax({
type: "POST",
async: false,
dataType: "json",
url: "/Car/ReturnCars",
data: jsonResult,
success: function (jsonResults) {
var table = $("#tblCarResults");
table.empty();
for (var i = 0; i < jsonResults.length; i++) {
var btnBill = "<td><input type='button' value='Get bill'/> <td>";
var btnReturn = "<td><input type='button' value='Return car'/></td>";
var tdUserName = "<td>" + jsonResults[i].UserName + "</td>";
var tdManufacture = "<td>" + jsonResults[i].Manufacturer + "</td>";
var tdModel = "<td>" + jsonResults[i].Model + "</td>";
var tdFee = "<td>" + jsonResults[i].Fee + "</td>";
var tr = tdManufacture + tdModel + tdFee + btnBill + btnReturn;
$(tr).appendTo(table);
};
},
error: function (error) {
alert("Error: " + error.status);
}
});
});
})
Edit: the success was not a mistype and has been corrected.

Since you have not answered my question in the comments. I am guessing btnSearchForUser is a submit button and you are not cancelling its click action.
$("#btnSearchForUser").click(function (event) {
event.preventDefault();