jQuery Cascading drop down issue on dynamic table row in Javascript - javascript

This is regarding an issue related to the dynamic html table row controls. I have 2 cascading dropdowns named tagId and tagName. I have successfully implemented the cascading dropdowns. But the issue is while I am adding new rows to the table dynamically, the cascading drop downs are not working any more, on child rows. But, it's working properly on the top row. Please help me to resolve this.
From PopulateTagName.jsp I am getting second dropdown values based on first dropdown value.
Code::
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<%
%>
<script>
function myFunction() {
var selected = document.getElementById("TagID").value;
if (selected != "Select Tag ID") {
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var doc = this.responseText;
var ar = doc.split(',');
var sel = document.getElementById('TagName');
document.getElementById("TagName").options.length = 1;
for( var i= 0; i< ar.length; i++){
var opt = document.createElement('option');
opt.innerHTML = ar[i];
opt.value=ar[i];
sel.appendChild(opt);
}
}
};
xmlhttp.open("POST","PopulateTagName.jsp?TagID="+selected , true);
xmlhttp.send();
}
}
$(document).ready(function(){
$('#addRow').click(function(){
var sno=$('#pTable tr').length;
trow= "<tr><td class='sNo'>"+sno+"</td>"+
"<td><select name='TagID' id ='TagID' onchange='myFunction()'><option value='Select Tag ID'>Select Tag ID</option><option value='test1'>test1</option><option value='test2'>test2</option><option value='test3'>test3</option><option value='test4'>test4</option></select></td>"+
"<td><select name='TagName'><option value ='Select Tag Name'>Select Tag Name</option></select></td>"+
"<td><input name='TagValue' type='text'></td>"+
"<td><button type='button' class='rButton'>Remove</button></td></tr>";
$('#pTable').append(trow);
});
});
$(document).on('click', 'button.rButton', function () {
$(this).closest('tr').remove();
arrangeSno();
return false;
});
function arrangeSno(){
var i=0;
$('#pTable tr').each(function() {
$(this).find(".sNo").html(i);
i++;
});
}
</script>
<table id="pTable">
<tbody>
<tr>
<td>Serial No</td>
<td>*Select Tag ID:</td>
<td>Select Tag Name:</td>
<td>Input Tag Value:</td>
<td><input id="addRow" type="button" value="Add"></td>
</tr>
</tbody>
</table>
</body>
</html>

For the pre generated DOM it works with the
$('#addRow').click(function(){
But for the newly added DOM elements it works only with the .live function rather than .on so you must write your code as
$(document).live('click', '#addRow', function () {
Note : I can't regerate your issue on my machine but although ran into the same issue a long ago. And here's the solution. :)

Related

How Add the Link in the Dropdown options?

Hi I'm working on script that I got in this forum.
Options are mentioned in the column A and Links are added in Column B, in the dropdown If I click the option 1 I want to open the respective link which is in Column B in another tab.
Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile("Index.html")
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getSelectOptions()
{
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Options');
var rg=sh.getDataRange();
var vA=rg.getValues();
var options=[];
for(var i=0;i<vA.length;i++)
{
options.push(vA[i][0]);
}
return vA;
}
function showSidebar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('Index');
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'The Drop Down with No Options now has options.');
}
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();
});
function updateSelect(vA)
{
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
console.log("My code");
</script>
</head>
<body>
<select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;">
</select>
</body>
</html>
I couldn't figure it out how to embed the link into option. should another function defined for individual column or can it be done in single function?
Note: I'm not a coder.
You can use the onChange event to open the link when a user chooses an option
For this:
Use the syntax new Option(text, value). To pass the option and the link as the text and the value, you need to access the respective nested array elements:
select.options[i] = new Option(vA[i][0],vA[i][1]);
Use the method window.open() to open the link
Build an event handler function that accesses the selected value onChange with document.getElementById("sel1").value
Sample:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();
});
function updateSelect(vA)
{
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i][0],vA[i][1]);
}
}
console.log("My code");
function myFunction(){
var value = document.getElementById("sel1").value;
window.open(value, '_blank');
}
</script>
</head>
<body>
<select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;" onchange="myFunction()">
</select>
</body>
</html>

The value of input element changes but not shown in the browser(s)?

I wrote a live search field for a part of my form, when the suggestions come and user clicks on one of them, a js function (selectedService) is being called to get the innerHTML of the li which the user clicked on!
everything works perfectly when you look at the code in 'Inspect Element' of the browser, but not on the web page!
after the user clicks on the on the suggestion the value property of input element changes in the code but on the browser. the content of input field is still what the user is typing in it.
here's the code :
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
</head>
<body>
<input value="" id="services" placeholder="click or type plz..."/>
<ul id="suggestions">
</ul>
<style>
/* some styles */
</style>
<script>
var input = document.getElementById("services");
var suggestions = document.getElementById("suggestions");
input.oninput = function() {
var q = input.value;
if (q.length < 2) {
suggestions.setAttribute("style","display: none");
return;
}
var xhr2 = new XMLHttpRequest;
xhr2.open("GET", "theURL/service-request-handler.php?q="+q, true);
xhr2.onreadystatechange = function() {
if (xhr2.readyState == 4 && xhr2.status == 200)
{
var result = xhr2.responseText;
console.log("server response = "+result);
var json = JSON.parse(result);
showSuggestions(json);
}
};
xhr2.send();
};
function showSuggestions(json) {
suggestions.setAttribute("style","display: block");
var li_list = '';
var i = 0;
for (i=0; i<json.length; i++)
li_list += '<li id="'+i+'" onclick="selectedService('+i+')">'+json[i]+'</li>';
suggestions.innerHTML = li_list;
}
function selectedService(i) {
li_target = document.getElementById(i);
console.log(li_target.innerHTML);
// input.innerHTML = li_target.innerHTML;
input.setAttribute("value",li_target.innerHTML);
suggestions.setAttribute("style","display: none");
}
</script>
</body>
</html>
the result in the Inspect Element :
I'd appreciate any help or suggestions :)
input.value = li_target.innerHTML
You can set value property directly:
input.value=li_target.innerHTML;
Probably you are using firefox browser, you should use this to work in both, chrome and firefox.
input.value = li_target.innerHTML;
This happens because property and attributes are different.
Attributes are defined on the HTML markup but properties are defined on the DOM.
You can use jQuery UI for autocomplete search.

Javascript/AJAX Error 404 Not found or Undefined

I have a page which loops down the first column and copies the value to a text box, and then it is supposed to query data.asp, but I keep getting an error of either
GET http://192.168.1.12/pb_search/v2/demo/data.asp?h_prodref=undefined 404 (Not Found)
or
XHR finished loading: GET "http://192.168.1.12/pb_search/v2/demo/data.asp?h_prodref=undefined". Errors from Google Chrome Developer Tools.
Both my scripts work independently, but when I piece them together, I get these erorors. I am probably missing something really simple, but I very much learning this on the fly, so any help would be appreciated.
Full Code
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="50%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="16%" class="prodref">84PS01</td>
<td width="51%"><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
<td width="33%" id="demo"> </td>
</tr>
<tr>
<td class="prodref">92K002</td>
<td><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
<td id="demo"> </td>
</tr>
<tr>
<td class="prodref">68F017</td>
<td><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
<td id="demo"> </td>
</tr>
</table>
<script>
var prodref = document.getElementsByClassName("prodref");
var h_prodref = document.getElementsByClassName("h_prodref");
var i = 0;
for (i; i < prodref.length; i++) {
h_prodref[i].value = prodref[i].innerHTML;
function loadDoc() {
var x = document.getElementsByClassName("h_prodref");
x[i] = document.getElementsByClassName("h_prodref").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "data.asp?h_prodref="+x[i].value, true);
xhttp.send();
}
}
</script>
So What's the Problem?
The value undefined is getting added into AJAX call that is made instead of the expected value of x[i].value. I'm making an assumption here though and that is that
http://192.168.1.12/pb_search/v2/demo/data.asp
exists and the HTTP 404 Not Found is being forced by the data.asp script as a scripted response and not because the server can't find the data.asp page.
Restructuring the JavaScript
When calling a function you don't need the entire definition at the point where you want to call it, if this was the case you would have the same function being duplicated throughout the code where it is called breaking fundamental principles in programming like DRY.
Here is a quick example of restructuring the JavaScript code:
var prodref = document.getElementsByClassName("prodref");
var h_prodref = document.getElementsByClassName("h_prodref");
var i = 0;
for (i; i < prodref.length; i++) {
h_prodref[i].value = prodref[i].innerHTML;
// Call function inside the loop
loadDoc();
}
// Definition should be defined once
function loadDoc() {
var x = document.getElementsByClassName("h_prodref");
x[i] = document.getElementsByClassName("h_prodref").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "data.asp?h_prodref="+x[i].value, true);
xhttp.send();
}

How to detect negative values in a <td> of table in html?

I have a table in html, I am using Tangle framework to make the values look dynamic of that table.
What I want is to place a check on a specific <td> if its numeric value ever gets negative, the entire <tr> of that particular <td> should change its background color to Red.
Can this be done using java script or some simple lines of code may solve this problem?
Please help me doing this.
<html>
<head>
<style type="text/css">
td.negative { color : red; }
</style>
<script language="JavaScript" type="text/javascript">
<!--
function MakeNegative() {
TDs = document.getElementsByTagName('td');
for (var i=0; i<TDs.length; i++) {
var temp = TDs[i];
if (temp.firstChild.nodeValue.indexOf('-') == 0) temp.className = "negative";
}
}
//-->
</script>
</head>
<body>
<table id="mytable">
<caption>Some Financial Stuff</caption>
<thead>
<tr><th scope="col">Date</th><th scope="col">Money is good</th></tr>
</thead>
<tbody>
<tr><td>2006-05-01</td><td>19.95</td></tr>
<tr><td>2006-05-02</td><td>-54.54</td></tr>
<tr><td>2006-05-03</td><td>34.45</td></tr>
<tr><td>2006-05-04</td><td>88.00</td></tr>
<tr><td>2006-05-05</td><td>22.43</td></tr>
</tbody>
</table>
<script language="JavaScript" type="text/javascript">
<!--
MakeNegative();
//-->
</script>
</body>
I'd suggest:
var table = document.getElementsByTagName('table')[0],
cells = table.getElementsByTagName('td'),
hasNegative = 'hasNegative',
text = 'textContent' in document ? 'textContent' : 'innerText', num = 0;
for (var i = 0, len = cells.length; i < len; i++) {
num = parseFloat(cells[i][text]);
if (Math.abs(num) !== num) {
cells[i].parentNode.className += ' hasNegative';
}
}
JS Fiddle demo.
The rather bizarre means to determine negativity was a result of my previous, perhaps naive, check failing to differentiate between 0 and -0 (though I'm not quite sure whether negative-zero would pass, or fail, your criteria).

Javascript parser wont work anymore. Nothing happens when the submit button is clicked

I recently found this piece of javascript for a game that I play which basically makes my life easier in the game by doing some parsing. The script was working great when I first used it but then I stopped using it for a few weeks as I had less time to play the game and therefore use the script. I started again yesterday and suddenly, the script no longer worked and I couldnt parse the info that I needed. It no longer works when I click the submit button after the info is put into the text box.
Could anyone help me in finding out what is wrong and why it wont work anymore?
Here is the script and here it is on a website (incase what I posted below got messed up or whatever: www.cnparser.webs.com
<html>
<head>
<title>Recruitment Parser</title>
<script type="text/javascript">
window.onload = function()
{
var pageSource = document.getElementById('pgsource');
var submitButton = document.getElementById('submit');
var bbcodeBox = document.getElementById('nobb');
var outputArea = document.getElementById('output');
submitButton.onclick = function()
{
var cyberMessageLink = "http:\/\/www.cybernations.net/send_message.asp?Nation_ID=";
var cleanUp = pageSource.value.replace(/[^A-Za-z0-9 >]/g, "");
var rulerNames = cleanUp.match(/titleRuler[A-Za-z0-9_ ]{3,}(?=>)/gi);
var nationID = cleanUp.match(/ageaspNationID[0-9]{3,}/g);
if(bbcodeBox.checked)
{
for(var i=0; i<rulerNames.length; i++)
{
if(i%25==0)
{
outputArea.innerHTML+="[url="+cyberMessageLink+nationID[i].substring(14)+"]"+rulerNames[i].substring(11)+"[/url]" + "<br>";
continue;
}
outputArea.innerHTML+=rulerNames[i].substring(11) + "<br>";
if(i%24==0)outputArea.innerHTML+="<br>";
}
} else {
for(var i=0; i<rulerNames.length; i++)
{
if(i%25==0)outputArea.innerHTML+="<br>";
outputArea.innerHTML+=rulerNames[i].substring(11) + "<br>";
}
}
}
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>
<textarea id="pgsource" cols="80" rows="20"></textarea><br/>
</td>
<td>
<b>Style</b><br>
<input id="nobb" type="checkbox">BBcode</input><br>
</td>
</tr>
</table>
<button id="submit">Submit</button><br><br>
<span id="output"></span>
<!-- --><script type="text/javascript" src="http://static.websimages.com/static/global/js/webs/usersites/escort.js"></script> <script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305- 2";_udn="none";_uff=false;urchinTracker();}</script></body>
</html>
From the linked site:
If this stops working email: gnomy#hushmail.com
Did you email Gnomy?

Categories

Resources