Im making a website for school and I needed a dynamic dropdown. I went about making it using this tutorial tutorial.
I have finished the first 6 parts and everything worked. In the last part when the first dropdown should appear it just doesn't. If the question is hard to answer or could have more answers just tell me what comes to mind and ill check.
Ty in advance.
<html>
<head>
<title>askldfjdasklf</title>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width">
</head>
<body>
<label>Starost</label>
<select id="starost"></select><br>
<label>Praznuje</label>
<select id="praznuje"></select><br>
<script src="jquery-3.1.0.min.js"></script>
<script src="script.js"></script>
</body>
<pre>$(document).ready(function ()
{
$.getJSON("get_starost.php", success = function(data)
{
var options = "";
for (var i 0; i < data.length; i++)
{
options += "<option value='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";
}
$("#starost").append(options);
});
});
</pre>
<pre>
<?php
require "opendb.php";
$query = "SELECT starost FROM filter_starost";
$data = mysql_query($query, $conn);
$starost = array();
while ($row = mysql_fetch_array($data))
{
array_push($starost, $row["starost"]);
}
echo json_encode($starost);
require "closedb.php";
?>
</pre>
You are missing = i 0in you for loop
for (var i = 0; i < data.length; i++)
{
}
and open web browser console to check errors and for debug. This will help you a lot.
$(document).ready(function ()
{
$.getJSON("get_starost.php", function(data)
{
var options = "";
for (var i= 0; i " + data[i] + "";
}
$("#starost").append(options);
});
});
Replace <pre> with <script>
also remove success =
Related
I am creating two combo boxes the first one gets loaded initially and up on selecting the text in the combo the second combo box should get filtered. The issue is combo box is not getting loaded.
<html> <head>
<title> text conversion </title> <script type="text/javascript">
function PrepopulateProductName() { alert("Hello! I am an alert box!!");
var selectHTML = "";
var DEV = ["GTXD", "SFGD", "ITXD", "ETXD","CTXD"];
var SYS = ["GTXS", "ITXS", "ETXS", "CTXS"];
var ACC = ["GTXA", "ITXA", "ETXA", "CTXA", "SFGA"];
alert("Hello! I am an alert box!!");
if (document.getElementById("selProductName").value == "DEV") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < DEV.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + DEV[i] + "'>" + DEV[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
PrepopulateProductName();
</script> </head> <body>
Product Name: <select id="selProductName" name="selProductName"
onchange="changeProductName(this.value);"> <option>--Choose Product
Name--</option> </select>
</body> </html>
There were few issues in your code:
You didn't define the category select box
Called an undefined function changeProductName()
This is what you can do:
With the onchange attribute, call the PrepopulateProductName() function. Then, it will check for the selected option and populate the category select box with the values defined.
Example:
function PrepopulateProductName() {
//alert("Hello! I am an alert box!!");
var selectHTML = "";
var DEV = ["GTXD", "SFGD", "ITXD", "ETXD","CTXD"];
var SYS = ["GTXS", "ITXS", "ETXS", "CTXS"];
var ACC = ["GTXA", "ITXA", "ETXA", "CTXA", "SFGA"];
//alert("Hello! I am an alert box!!");
if (document.getElementById("selProductName").value == "DEV") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < DEV.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + DEV[i] + "'>" + DEV[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
}
<html> <head>
<title> text conversion </title>
</head>
<body>
Product Name: <select id="selProductName" name="selProductName"
onchange="PrepopulateProductName();"> <option>--Choose Product
Name--</option> <option value="DEV">DEV</option> </select>
<select id="category" name="category"> </select>
</body> </html>
I'm not even importing any files. All I want to do is transpose a HTML table (id = "valuation_table").
Here's the script I've used
<script>
$("#valuation_table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td, th").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
if(i == 1)
newrows[i].append("<th>" + this.innerHTML + "</th>");
else
newrows[i].append("<td>" + this.innerHTML + "</td>");
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
</script>
It works when I used this during the debugging phase. When I add it to the main project, it gives me the cross-origin frame error.
All of my files are from the same source. I am not calling it from any link. My code so far reads an excel file from the disk, stores it to a database table, displays it, the js script is called here. I'm not calling an iframe.
The html file
<head>
<title>test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php include_once 'tableSWAG.php'; ?>
<script>
$("#valuation_table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td, th").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
if(i == 1)
newrows[i].append("<th>" + this.innerHTML + "</th>");
else
newrows[i].append("<td>" + this.innerHTML + "</td>");
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
</script>
</body>
tableSwag.php
<?php
include_once 'swegAgain.php';
include_once 'db.php';
$sql = "select * from $table_name";
$result = $con->query($sql);
$nr = mysqli_num_rows($result);
$nc = mysqli_num_fields($result);
$recNew = array();
echo '<div id="peer_table">';
echo '<table id = "valuation_table" class="table table-bordered table-stripped table-condensed">' . "\n";
echo '<tr>
<th> </th>
<th>Sweg</th>
<th>Sweg1</th>
<th>Sweg2</th>
</tr>';
for($i = 1;$i <= $nr; $i++) {
echo '<tr>';
$records = mysqli_fetch_array($result);
for($j = 0; $j < $nc; $j++){
echo '<td>' . $records[$j] . '</td>';
}
echo "</tr>";
}
echo '</table>';
echo '</div>';
?>
This code works finally individually. When I integrate it the project that I'm working on, I get the cross-origin frame error.
Any help would be appreciated.
Console Log
SQL Records
I am working on a challenge by freecodecamp, Task is to show the local weather and hence I have to get the location of the user. I can get the location from here but after printing that i was trying to getElementById of a div i have printed using JS which gives null in response. I want to get the key value pair so that i can do stuff with them. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Location Trace | freecodecamp Challanges</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="GeoResults"></div>
<script>
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var table_body = "";
var count = 0;
$.each(data, function(k, v) {
//JSON.stringify(j); // '{"name":"binchen"}'
table_body += '<div id=Coun_'+count+'>'+v+'</div>';
//table_body += "<tr><td id='FC_"+count+"'>" + k + "</td><td><b id='SC_"+count+"'>" + v + "</b></td></tr>";
count++;
});
$("#GeoResults").html(table_body);
});
</script>
<script>
var x = document.getElementById('Coun_1') /*= 'Dooone!!!'*/;
console.log(x);
</script>
</body>
</html>
Thanks in Advance!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Location Trace | freecodecamp Challanges</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="GeoResults"></div>
<script>
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var table_body = "";
var count = 0;
$.each(data, function(k, v) {
//JSON.stringify(j); // '{"name":"binchen"}'
table_body += '<div id=Coun_'+count+'>'+v+'</div>';
//table_body += "<tr><td id='FC_"+count+"'>" + k + "</td><td><b id='SC_"+count+"'>" + v + "</b></td></tr>";
count++;
});
$("#GeoResults").html(table_body);
var x = document.getElementById('Coun_1').innerHTML; /*= 'Dooone!!!'*/;
console.log(x);
});
</script>
</body>
</html>
Based on an AJAX query I appended some options to a list.
for(var i = 0; i < options.length; i++) {
var data = options[i];
var option = $('<option id="mySelectElementOption_' + data['id'] + '" value="' + data['value'] + '">' + data['value'] + '</option>');
$('#mySelectElement').append(option);
}
Now when the user interacts on the page i want to select on of the just appended options and i tried the following (both possibilities don't work for me):
$('#mySelectElementOption_' + id).attr('selected', 'selected');
and
var option = document.getElementById('mySelectElementOption_' + id);
option.selected = true;
So I'm stuck, because I don't know how to select my option. Do you have any idea(s) how I can solve this?
Thanks!
P.S.: When I try second possibility in Google Chrome it works perfectly.
Greetings, Joseph
var opts = {
success: function(data)
{
//do everything here first before appending it,
//including adding event bindings
}
}
$.ajax(opts)
Use prop instead of attr:
$('#mySelectElementOption_' + id).prop('selected', true);
or
$('#mySelect').val($('#mySelectElementOption_' + id).val());
http://jsfiddle.net/uG88d/
Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<select id="mySelectElement">
<option id="oldoption" >Old option</option>
</select>
</body>
</html>
JS:
//demo data
options = [{id:0, value:"aaa"},{id:1, value:"bbb"},{id:2, value:"ccc"}];
for(var i = 0; i < options.length; i++) {
var data = options[i];
var option = $('<option id="mySelectElementOption_' + data['id'] + '" class="interactable" value="' + data['value'] + '">' + data['value'] + '</option>');
$('#mySelectElement').append(option);
}
//This is what you need:
$("#mySelectElement :not([class])").attr("disabled","disabled");
Explanation:
$("#mySelectElement :not([class=interactable])") - This tells jquery to find any option element in the #mySelectElement that does not have the 'interactable' class.
Then it disables it: .attr("disabled","disabled");
Try it out:
jsBin
Edit:
$("#mySelectElement .interactable:first").prop('selected', true);
Try it out
I have an application which returns a JSONObject. I am able to get data from JSON object using below code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style type="text/css">
table, td, th
{
border:1px collapse black;
font-family:Arial;
font-size :small;
}
th
{
background-color:green;
color:white;
}
.hideMe
{
/*display : none;*/
/*visibility: hidden;*/
}
</style>
<script type="text/javascript" language="jscript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
var host = "somehost";
var mystr = "http://"+ host +"/rest/bpm/wle/v1/exposed/process"; // use get for this
var ulink = "";
$(document).ready(function () {
$.get(mystr, function (data) {
var obj = JSON.parse(data);
var thtml = "<table id='proctable'>";
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function()' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
}
thtml = thtml + "</table>";
document.getElementById('contentdiv').innerHTML = thtml;
});
});
//javascript
my_function = null;
//jquery
$(function () {
function generateBPDInstance() {
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}
my_function = generateBPDInstance;
ulink = "";
})
`
</script>
</head>
<body>
<form name="myform">
<div id="contentdiv">
<table id="proctable">
</table>
</div>
</form>
</body>
</html>
The above html creates a table showing a list of the returned values. I also want to get rowIndex of hyperlink and pass value of column2 to function generateBPDInstance.
I am not so good at HTML and Jquery. Please suggest how can I get rowIndex for HTML table which is created through javascript.
Thanks in advance.
The simple way is :
change your table building to this
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "" + obj.data.exposedItemsList[i].display + "" + ulink + "";
function my_function(e){
//e is the row index and when you call document.getLementById("proctable").rows[e]; this will give you the complete row.
}
--this is a simple way, and if you want traverse the tree and get , you always have parentnode or you can use jquery $(object).parent() to get the parent of hyperlink and traverse.
You problem is "pass value of column2 to function generateBPDInstance". Why not pass it already while generating the table?
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function('" + ulink + "')' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
// ------------------------------------------------------^ pass the value
}
Add parameter to your function generateBPDInstance
function generateBPDInstance(ulink) {
//--------------------------^----
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}