I have a simple table that is populated using an array:
for (var i = 0; i < results.length; i++) {
var object = results[i];
(function($) {
$('#results-table').append('<tbody><tr><td>' + object.get('Name') + '</td><td>' + object.get('Description') + '</td><td><button class="button" onclick="goToClass()">View Class</></tr></tbody>');
})(jQuery);
Ideally I would like the goToClass() function to give me the object.ID for that individual row that was selected.
So for example, if I select the button on the first row in the table it would give me the object.ID for that class.
How would I do this?
Try this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<table id="results-table">
</table>
</body>
<script>
results = [
{Name:1,Description:"one",ID:1111},
{Name:2,Description:"two",ID:2222},
{Name:3,Description:"Three",ID:3333}
]
for (var i = 0; i < results.length; i++) {
var object = results[i];
(function($) {
$('#results-table').append('<tbody><tr><td>' + object['Name'] + '</td><td>' + object['Description'] + '</td><td><button class="button" onclick="goToClass('+object['ID'].toString()+')">View Class</></tr></tbody>');
})(jQuery);
}
function goToClass(id) {
console.log(id)
}
</script>
</html>
When I click the buttons, the console gives me the correct id in each case.
Related
I have unordered list defined in html file
<ul id="listbox-groups"></ul>
and i dynamically create li elements
function AddGroups(){
for (var i = 0; i < len; i++)
{
var id = groups[i].split("-")[0];
var name = groups[i].split("-")[1];
$('#listbox-groups').append('<li id="' + id + '" class="listbox-li">' + name + '</li>');
}
};
Now i am trying to catch click event on created li element.
<script type="text/javascript">
$("#listbox-groups li").on("click", function(event) {
//some code
});
</script>
I also tried
<script type="text/javascript">
$(document).on("click", "#listbox-groups li", function(event) {
//some code
});
</script>
and few other things i found here but nothing worked for me.
Anyone can help?
Just put your code inside ready function and it will work with your second attempt that using event delegation on(), check snippet bellow.
Hope this helps.
Snippet
$(function(){
var groups = ['test-1','test-2','test-3'];
var len = groups.length;
for (var i = 0; i < len; i++)
{
var id = groups[i].split("-")[0];
var name = groups[i].split("-")[1];
$('#listbox-groups').append('<li id="' + id + '" class="listbox-li">' + name + '</li>');
}
$(document).on("click", "#listbox-groups li", function(event) {
alert($(this).text()+" clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="listbox-groups"></ul>
check the fiddle. seems you need to avoid default action of aHref. https://jsfiddle.net/vh08vw84/
function AddGroups(){
for (var i = 0; i < 10; i++)
{
var id = i;
var name = i;
$('#listbox-groups').append('<li id="' + id + '" class="listbox-li">' + name + '</li>');
}
};
AddGroups();
$("#listbox-groups li").on("click", function(event) {
alert($(this).attr("id"));
return false;
});
Im working on search mechanism in html, it is working when i search the data at first time. if i search for next data, it wont search as expected. If i search with empty data, it wont display actual table(which displayed at initial time).
JsFiddle : http://jsfiddle.net/DHJ79/
Even any better pointer is also welcome, if my below code is not good.
My code:
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style> td{border: thin solid;} </style>
<script type="text/javascript">
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
function addList(){
var table = "";
table += "<table class='table'>";
table += "<tr>";
table += "<td>S.no</td>";
table += "<td>Name</td>";
table += "<td>Gender</td>";
table += "</tr>";
for(i=0; i<10; i++) {
table += "<tr>";
table += "<td>"+i+"</td>";
table += "<td>Name"+i+"</td>";
table += "<td>"+( i > 5 ? "Male" : "Female")+"</td>";
table += "</tr>";
}
table += "</table>";
var body = document.getElementById("ListContainer");
body.innerHTML = table;
}
</script>
</head>
<body onload="addList();">
<input id="Button1" type="button" value="button" onclick="searchTable();" />
<input id="searchdata" type="text" />
<div id="ListContainer" > </div>
</body>
</html>
Advance thanks...
Maybe something like this.
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
if (inputVal == "") {
$('.hideThis').removeClass('hideThis');
} else {
$('tr').addClass('hideThis');
$('tr:has(td:contains(' + inputVal + '))').removeClass('hideThis');
}
}
modify your search function as follows:
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
if(inputVal){ //check for valid searches
//addList();
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
else{
addList(); // if you don't want to reinitialize table on empty searches skip this
}
}
I'm trying to figure out a way to retrieve and display the value of a div tag that is created with a 2D array using JavaScript. I figured either onclick or onmouseover would work but neither would in this approach. I would like to avoid creating 49 functions that does the same thing (just displaying the 'cell' the mouse is over).
<style type="text/css">
.float {float: left;}
.clear {clear:both;}
div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
<div id="grid"></div>
<div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;
for (var i = 0; i < axisY; i++) {
for (var j = 0; j < axisZ; j++) {
document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(cellId)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
}
document.getElementById('grid').innerHTML += "<br class='clear' />";
}
function displayMe(cellId) {
// ???
}
function displayNone() {
document.getElementById('bucket').innerHTML = "";
}
</script>
Thanks!
You can simply get the cell id by passing this.id into the function.
Try this:
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;
for (var i = 0; i < axisY; i++) {
for (var j = 0; j < axisZ; j++) {
document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
}
document.getElementById('grid').innerHTML += "<br class='clear' />";
}
function displayMe(cellId) {
console.log(cellId);
}
function displayNone() {
document.getElementById('bucket').innerHTML = "";
}
</script>
Right now you have set up each cell element to call the function displayMe whenever the mouseover event occurs. When you call that function, you are passing the variable cellId as an argument. The problem is when that function is called, cellId is not defined. You can see this error pop up in your browser's developer console ("Uncaught ReferenceError: cellId is not defined").
You probably want to pass the cell element's id property, which you define dynamically here: id='area" + i + j + "'. You can use the id property of an element to look up the element (as you have done already), and get the text it contains via textContent.
To pass the cell element's id property, you need to use the this variable, like so: this.id. this will refer to the element that is triggering the event. So, if you change your onmouseover value of your div element to this: onmouseover='displayMe(this.id)', it will pass the appropriate value to your displayMe function, allowing you to do something like this:
function displayMe(cellId) {
document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent;
}
With these adjustments, your code will look like this in its entirety:
<style type="text/css">
.float {float: left;}
.clear {clear:both;}
div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
<div id="grid"></div>
<div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;
for (var i = 0; i < axisY; i++) {
for (var j = 0; j < axisZ; j++) {
document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
}
document.getElementById('grid').innerHTML += "<br class='clear' />";
}
function displayMe(cellId) {
document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent;
}
function displayNone() {
document.getElementById('bucket').innerHTML = "";
}
</script>
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);
});
}