To show error message on ajax error : function() - javascript

I want to show error message in directed page if error part is fire in my ajax.but when it goes to this directed page it not show error message if i refresh this page it shows error message.below is my code.
index.html
<form method="post" name="myForm" action="tracking.php">
<input type="text" name="number" id="number" placeholder="Enter LR Number" required>
<input type="submit" name="submit" value="Go">
</form>
tracking.php
<script>
$(document).ready(function () {
var from = "";
$('#loadings').show();
$.ajax({
type: "GET",
url: 'http://apis.abc.abc/api/Get_Loadsheet_Details/<?php echo $number; ?>',
dataType: 'json',
success: function (response) {
$('#loadings').hide();
console.log(response);
document.getElementById('lrid').innerHTML = "LR NO: " + response[0].LRSUFIX + response[0].LR_NO;
document.getElementById('consign').innerHTML = response[0].COMPANY_NAME;
document.getElementById('from').innerHTML = response[0].LOADFROMMST;
document.getElementById('dest').innerHTML = response[0].DESTINATION;
document.getElementById('case').innerHTML = response[0].NO_OF_PKT;
document.getElementById('lrsta').innerHTML = response[0].LR_STATUS;
document.getElementById('lr').innerHTML = response[0].lrLoadStatus;
document.getElementById('vecno').innerHTML = response[0].VEHICLE_NO;
document.getElementById('lrstatus').innerHTML = response[0].LOADIG_STATUS;
document.getElementById('ldate').innerHTML = response[0].DATE;
}, error: function (errors) {
console.log(errors);//alert('hi');
$('#loadings').hide();
$('#error').html("<h2><span style='color:red;'>No data found on this LR No.</span></h2>");
}
});
});
</script>
<section>
<div id="error"></div>
<div class="loader-div" style="position:relative;" ><img id="loadings" src="images/loading2.gif" style=" left: 40%;
position: absolute;
top:250px;
z-index:1111;"></div>
<div class="container" >
<div class="body_left" id="container">
<h1 class="heading_3">Tracking Details</h1>
<table width="100%" class="track">
<tr>
<th >Order Information</th>
<th id="lrid"></th>
</tr>
<tr>
<td>Consignee</td>
<td id="consign"> </td>
</tr>
<tr>
<td>From</td>
<td id="from"></td>
</tr>
<tr>
<td>Destination</td>
<td id="dest"> </td>
</tr>
<tr>
<td>Cases</td>
<td id="case"> </td>
</tr>
<tr>
<td>LR Status</td>
<td id="lrsta"></td>
</tr>
<tr>
<td>LR</td>
<td id="lr"></td>
</tr>
</table>
<br>
<br>
<table width="100%" class="track">
<tr>
<th colspan="2">Load Information</th>
</tr>
<tr>
<td>VEHICLE NUMBER: </td>
<td id="vecno"></td>
</tr>
<tr>
<td>LOAD STATUS </td>
<td id="lrstatus"> </td>
</tr>
<tr>
<td>LOAD DATE:</td>
<td id="ldate"> </td>
</tr>
</table>
</div>
</div>
</section>

Try to put your Script code underneath HTML codes. Because Jquery can't find the selector "#error" before html get loaded.
Just make a try.

Related

HTML/JS My "Name:" field will not submit to output form onclick=

My "sign out" Name: form will not populate/output to the "Name" column in the chart under my forms. My time, drop down boxes and sign in/sign out buttons all work but even if I change the "id" to something like "tname" it still won't populate. I'm interested in ideas for a workaround if nothing else can be done to solve this. I will list my code below. Please advise.
<form name="SIGN IN" id="form1" value="1" border="5" align="center">
<h4><br></strong>
<table align="center" border="5">
<tr>
<td><label for="Name">Name:</label></tr< /td>
<input list="Names" name="Name" id="fname">
<tr>
<td><input type="button" value="SIGN IN" onclick="display()" /></td>
</tr>
<form name="SIGN OUT" id="form2" value="1" border="5">
<tr>
<td>Name:<input id="fname2"> <br></td>
</tr>
</form>
<tr>
<td><input type="button" value="SIGN OUT" onclick="display()" /></td>
</tr>
<table width="400px" align="center" colspan="40" table border="5">
<thead>
<tr style="background-color:#8FBC8F;" id='header'>
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center" class="wide"><b>Time In</b></td>
<td align="center" class="wide"><b>Time Out</b></td>
<td align="center" class="wide"><b>Description of Work</b></td>
</tr>
</thead>
<tbody>
<template id="row">
<tr style="background-color:#8F8FBC;" class="data">
<td align="center">
<div class="displayarea"></div>
</td>
<td align="center">
<div class="displayarea1"></div>
</td>
<td align="center">
<div class="displayarea2"></div>
</td>
<td align="center">
<div class="displayarea3"></div>
</td>
<td align="center">
<div class="displayarea4"></div>
</td>
</tr>
</template>
</tbody>
</table>
function alternateGetValue() {
const Items = [...document.querySelectorAll('.data')]
.map(row => [...row.querySelectorAll('td>div')]
.map(d => d.textContent).join(',')
).join('\n');
console.log(Items);
return Items;
}
function display() {
const template = document.getElementById("row");
const clone = template.content.cloneNode(true);
const additem = (dest, src) => {
const s = document.querySelector(src);
clone.querySelector(dest).innerHTML = s.value;
s.value = "";
};
additem(".displayarea", "#fname");
additem(".displayarea1", "#lname");
additem(".displayarea2", "#sname");
additem(".displayarea3", "#pname");
additem(".displayarea4", "#jname");
template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
Considering the code provided, you need to get value from input with id #fname2 in case of SIGN OUT. You can either call separate functions on SIGN IN and SIGN OUT, or you can pass a value to display() function, based on which you can determine which input id to get value from. Below is the implementation of the second approach.
function alternateGetValue() {
const Items = [...document.querySelectorAll('.data')]
.map(row => [...row.querySelectorAll('td>div')]
.map(d => d.textContent).join(',')
).join('\n');
console.log(Items);
return Items;
}
function display(isSignOut) {
const template = document.getElementById("row");
const clone = template.content.cloneNode(true);
const additem = (dest, src) => {
const s = document.querySelector(src);
clone.querySelector(dest).innerHTML = s.value;
s.value = "";
};
additem(".displayarea", isSignOut ? "#fname2" : "#fname");
template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
<table align="center" border="5">
<form name="SIGN IN" id="form1" value="1" border="5" align="center">
<tr>
<td>
<label for="Name">Name:</label>
<input list="Names" name="Name" id="fname">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="SIGN IN" onclick="display(false)" />
</td>
</tr>
</form>
<form name="SIGN OUT" id="form2" value="1" border="5" align="center">
<tr>
<td>Name:<input id="fname2"> <br></td>
</tr>
</form>
<tr>
<td align="center">
<input type="button" value="SIGN OUT" onclick="display(true)" />
</td>
</tr>
</table>
<table width="400px" align="center" colspan="40" table border="5">
<thead>
<tr style="background-color:#8FBC8F;" id='header'>
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center" class="wide"><b>Time In</b></td>
<td align="center" class="wide"><b>Time Out</b></td>
<td align="center" class="wide"><b>Description of Work</b></td>
</tr>
</thead>
<tbody>
<template id="row">
<tr style="background-color:#8F8FBC;" class="data">
<td align="center">
<div class="displayarea"></div>
</td>
<td align="center">
<div class="displayarea1"></div>
</td>
<td align="center">
<div class="displayarea2"></div>
</td>
<td align="center">
<div class="displayarea3"></div>
</td>
<td align="center">
<div class="displayarea4"></div>
</td>
</tr>
</template>
</tbody>
</table>

Jquery How to select ul inside td of selected row

How to select <ul> inside <td> of selected row.
here is my html and jquery code.
Help me to resolve this issue.
I am trying to select <ul> tag inside <td> to insert fetched data by ajax.
this is jquery code.
$('.result').click(function () {
var tpid = $(this).parents('tr').find('.tpId').val();
$.ajax({
type: "POST",
url: "/Reception/PatientTests/getHelpValue",
data: { 'tpid': tpid },
success: function (data) {
str = "";
for (var i = 0; i < data.length; i++) {
str +="<li>"+data[i] + "</li>";
}
$(this).find('td ul').html(str);
},
error: function (e) {
alert('Error' + JSON.stringify(e));
}
});
});
this is my html code.
<table class="table table-bordered table-sm" style="height:auto">
<tbody><tr class="blue-gradient-rgba text-white">
<th>Test Name</th>
<th>Value</th>
<th>Unit</th>
<th>Normal</th>
<th>Minimum</th>
<th>Maximum</th>
</tr>
<tr>
<input type="hidden" class="tid" value="2">
<th colspan="2">COMPLETE BLOOD COUNT</th>
</tr>
<tr>
<td>Haemoglobin</td>
<td>
<input type="hidden" class="tpId" value="9">
<input type="text" class="result" value="45">
<ul class="helpValues"></ul>
</td>
<td>gm %</td>
<td>m-14.0 to 18.0 Gms. %
F- 12.5 to 16.0 Gms. %</td>
<td></td>
<td></td>
</tr>
<tr>
<td>MCV</td>
<td>
<input type="hidden" class="tpId" value="12">
<input type="text" class="result" value="75">
<ul class="helpValues"></ul>
</td>
<td>fl</td>
<td>76- 96</td>
<td></td>
<td></td>
</tr>
<tr>
<input type="hidden" class="tid" value="3">
<th colspan="2">DENGUE IgG /IgM</th>
</tr>
<tr>
<td>Dengue IgG</td>
<td>
<input type="hidden" class="tpId" value="13">
<input type="text" class="result" value="53">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td>1 mL serum</td>
<td></td>
</tr>
<tr>
<td>Dengue IgM</td>
<td>
<input type="hidden" class="tpId" value="14">
<input type="text" class="result">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Dengue NS1</td>
<td>
<input type="hidden" class="tpId" value="15">
<input type="text" class="result">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
I tried this $(this).find('td ul').html(str); but it's not working.
here I want to add data into ul of the particular row.
.tpId is just previous and ul is just next to the .result. So, you can use prev and next:
var tpid = $(this).parents('tr').find('.tpId').val();
// Alternative:
var tpid = $(this).prev().val(); // I love this approach
// This is wrong
$(this).find('td ul').html(str);
// You're finding from `.result`
// So, use:
$(this).parents('tr').find('ul').html(str);
// But, you can do just
$(this).next().html(str); // I love this approach
As far as my understanding, you try to access 'ul', inside of your 'td'. Here is the block of code which includes ul inside of td.
<tr>
<td>MCV</td>
<td>
<input type="hidden" class="tpId" value="12">
<input type="text" class="result" value="75">
<ul class="helpValues"></ul>
</td>
<td>fl</td>
<td>76- 96</td>
<td></td>
<td></td>
</tr>
Jquery code
$(".result").on("click",function()
{
let ul=$(this).parent().find("ul");
let ulValues=$(ul).val();
console.log(ulValues);
})

Table not displaying all of data entered

so I have this table form that when you hit submit, it should display the information entered. but it only displays the first input entered. I have another table just like this one that works fine, so it must be a small thing that I'm just not seeing.
The table where you enter data:
<form id="symptomstable" name="symptomstable">
<table class="symptoms" width="700px" bgcolor="#BDDBCC" border="3" align="center">
<th><b>Symptoms</b></th>
<tr>
<td><input type="text" name="sym1" size="100" id="sym1"></td>
</tr>
<tr>
<td><input type="text" name="sym2" size="100" id="sym2"></td>
</tr>
<tr>
<td><input type="text" name="sym3" size="100" id="sym3"></td>
</tr>
<tr>
<td><input type="text" name="sym4" size="100" id="sym4"></td>
</tr>
<tr>
<td><input type="text" name="sym5" size="100" id="sym5"></td>
</tr>
<tr>
<td><input type="text" name="sym6" size="100" id="sym6"></td>
</tr>
<tr>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display1()"/></td>
</tr>
</table>
Where it outputs to:
<table width="900px" align="center" border=1>
<tr style="background-color:#BDDBCC;"></br>
<th align="center"><b>Symptoms Log</b></th>
</tr>
<tr>
<td align="center"><div id="symarea1"></div></td>
</tr>
<tr>
<td align="center"><div id="symyarea2"></div></td>
</tr>
<tr>
<td align="center"><div id="symarea3"></div></td>
</tr>
<tr>
<td align="center"><div id="symarea4"></div></td>
</tr>
<tr>
<td align="center"><div id="symarea5"></div></td>
</tr>
<tr>
<td align="center"><div id="symarea6"></div></td>
</tr>
</table>
The javascript:
function display1()
{
document.getElementById("symarea1").innerHTML = document.getElementById("sym1").value;
document.getElementById("sym1").value = "";
document.getElementById("symarea2").innerHTML = document.getElementById("sym2").value;
document.getElementById("sym2").value = "";
document.getElementById("symarea3").innerHTML = document.getElementById("sym3").value;
document.getElementById("sym3").value = "";
document.getElementById("symarea4").innerHTML = document.getElementById("sym4").value;
document.getElementById("sym4").value = "";
document.getElementById("symarea5").innerHTML = document.getElementById("sym5").value;
document.getElementById("sym5").value = "";
document.getElementById("symarea6").innerHTML = document.getElementById("sym6").value;
document.getElementById("sym6").value = "";
}
You just have a typo. If you open up your console after trying to submit the form, you will see that you have an error that says Cannot set property 'innerHTML' of null. If you look at the line it refers to, you will see that it references document.getElementById("symarea2").innerHTML = document.getElementById("sym2").value;
In your HTML, the ID of this element is currently symyarea2. See: <td align="center"><div id="symyarea2"></div></td>.
Check out how to use the console in Firefox and Chrome

Scroll to the top of a scrollable pop div atomaticaly using jquery

First thing first, I am having a popup div, which contains a form
Here's is my div
<div class="addnewrule" id="add_message_0">
<form method="post" action="" id="frmadd">
<input type="hidden" name="filter" value="1">
<input name="rule_id" type="hidden" value="0">
<table class="table-responsive" width="100%" border="0" cellspacing="0" cellpadding="10" id="" style="text-align:center; margin-top:0px;">
<tr>
<td colspan="2" align="left"><div id="display_msg_0"></div></td>
</tr>
<tr>
<td width="40%" align="left">Name:</td>
<td width="60%" align="left"><input class="input_field" name="rule_name" type="text"></td>
</tr>
<tr>
<td align="left">Type:</td>
<td align="center">
<input type="radio" name="rule_type" value="0" style="display:none;" />
<input type="radio" name="rule_type" value="1" checked="checked" style="display:none;" />
<div class="btn-group equal_btn">
<button id="block_click" class="btn btn-default" type="button" onclick="setRules(0);">Block Clicks</button>
<button id="filter_click" class="btn btn-default active" type="button" onclick="setRules(1);">Filter Clicks</button>
</div></td>
</tr>
<tr>
<td align="left">Rule Active:</td>
<td align="center">
<input type="radio" id="active_0" name="active" value="1" checked="checked" style="display:none;" />
<input type="radio" id="inactive_0" name="active" value="0" style="display:none;" />
<div class="btn-group">
<button type="button" id="status_enb_0" class="btn btn-default active_btn active" onclick="setruleStatus(0,1);">Enable</button>
<button type="button" id="status_dis_0" class="btn btn-default inactive_btn" onclick="setruleStatus(0,0);">Disable</button>
</div></td>
</tr>
<tr>
<td align="left">Campaign ID:</td>
<td align="left"><input class="input_field" name="camp_id" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRange">Filter IP Ranges:</td>
<td align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:0;" width="45%"><input class="input_field" name="start_ip" type="text" /></td>
<td width="10%" align="center">To</td>
<td style="padding:0;" width="45%" align="right"><input class="input_field" name="end_ip" type="text" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" id="rUAs">Filter users agents that contains:</td>
<td align="left"><input class="input_field" name="user_agent" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRefs">Filter referers that contains:</td>
<td align="left"><input class="input_field" name="referer" type="text" /></td>
</tr>
<tr id="rUrl" style="display:none;">
<td align="left">Send Blocked Clicks to:</td>
<td align="left"><input class="input_field" type="text" id="rule_url" name="rule_url" value="" /></td>
</tr>
<tr>
<td align="left" colspan="2"><table class="copypaste" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Apply <a href="javascript:void(0)" class="btn orange_button tab2" onclick="cancel_popup('add_new_rule')" >Cancel</a></td>
</tr>
</table></td>
</tr>
</table>
</form>
</div>
Now, here is the jquery ajax function given below.. It checks for the validation and displays the validation message in a message div...
function submitRule(frmId,rule_id)
{
var data=$('#'+frmId).serializeArray();
$.ajax({
type:'POST',
url:'ajax/rule_update_process.php',
data: data,
dataType:'json',
success:function(jData)
{
if(jData.status==1)
{
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
}
else
{
window.location.href='settings_rules.php';
}
}
});
}
Since the popup is a scrollable div, i want to scroll(only within the popup div) to the top so that i can show the message div with the error message..
here'sw how i am getting the screens,.
I used this piece if code to scroll to the top of the popup div to show the error message div,
but this piece of code doesn't seem to work..
What am i doing wrong??
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
replace ur last line of code with this
parent_div.scrollTop(0,0);
I will suggest a very simple apprach:
$("#apply_button").click(function () {
var error_message = $("#your_error_message").css("display");
if (error_message != "none") {
$("#add_message_0").scrollTop(0);
};
});
Code speaks for itself.
BR
You can use css only brother. Example this is your form.
<div>
<form class="has-error">
<p>error</p>
<input name="" value="">
</form>
<div>
you can use the class .has-error to set a css codes. your css codes will only use if the error message is displayed.
div{ overflow-y: scroll; }
div .has-error{ height: 400px; }
height will defend your current section height with errors message.
Something like this on fiddle demo
if the message is not visible on button click, add this to your click function code
$( '#add_message_1' ).delay( 200 ).animate({scrollTop: 0 }, 300);}

Getting text of html elements via Jquery

I am trying to get the dynamically generated text from a list and show it tin alert dialog in jquery mobile app but its not working
Here is what i have tried
HTML
<center>
<div class="preview ui-shadow swatch cus-bg-bdy" style="max-width:50em;text-align:left;">
<div style="border-color: #DDDDDD !important;text-align:left;" class="ui-bar ui-bar-a">
<h3>Customers</h3>
</div>
<div style="padding:1em;">
<table>
<tr>
<td>Name :</td>
<td>Dummy Name</td>
</tr>
<tr>
<td>Address :</td>
<td>Dummy Address</td>
</tr>
</table>
<fieldset id="download_c_list" data-role="controlgroup" data-iconpos="left" data-filter="true" data-filter-placeholder="Search here..." data-count-theme="a">
<label>
<input type="radio" name="customer">
<table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td><font class="customer-name">Company-1</font>
</td>
</tr>
<tr>
<td><font class="customer-adress">Stradbroke Island.</font>
</td>
</tr>
</tbody>
</table>
</label>
<label>
<input type="radio" name="customer">
<table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td><font class="customer-name">Shope-1</font>
</td>
</tr>
<tr>
<td><font class="customer-adress">address-1.</font>
</td>
</tr>
</tbody>
</table>
</label>
<label>
<input type="radio" name="customer">
<table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td><font class="customer-name">customer-1</font>
</td>
</tr>
<tr>
<td><font class="customer-adress">Address-2.</font>
</td>
</tr>
</tbody>
</table>
</label>
</fieldset>
</div>
</div>
</center>
Jquery
$("input[name=customer]:radio").change(function () {
alert($($($(this).siblings('label')).children("[name='custerm-name']")).html());
});
I want to show customer name and address of clicked item in alert box , here is the Fiddle http://jsfiddle.net/SzaBw/
Try the following
$("input[name=customer]:radio").change(function () {
var parent = $(this).parent();
alert(parent.find(".customer-name").text());
alert(parent.find(".customer-adress").text());
});
Note: you have typo in customer-address class
You need to update you alert code to this
alert($(this).closest(".ui-radio").find(".customer-name").text())
alert($(this).closest(".ui-radio").find(".customer-address").text())
here is the Fiddle for above code
Try this:
$("#download_c_list input:radio").change(function () {
var label = $(this).prev();
var customerName = label.find('.customer-name').first();
var customerAdress = label.find('.customer-adress').first();
alert(customerName.html() + ' - ' + customerAdress.html());
});

Categories