How can I read the checked state of a checkbox within the cell of a dynamically created HTML table - javascript

I am using JS to determine the checked state of checkboxes which are contained within cells of a table which has been loaded dynamically into a web page.
The page comprises 2 fieldsets:-
+-SelectFieldset-----------------------------+
| <param1> <param2> { Load button } |
| {Update button} |
+--------------------------------------------+
+-ResultFieldset id=resultFS-----------------+
| Ref_ID Description Ready |
| +-resultTable id=outTable----------------+ |
| | 123 chair [ ] | |
| | 167 dresser [ ] | |
| | 231 sofa [ ] | |
| | ... etc... | |
| +----------------------------------------+ |
+--------------------------------------------+
Notes "[ ]" above depicts a table cell containing an input with type = checkbox;
param1, param2 are dropdown selectors
Initially the ResultFieldset is empty; and is loaded when the "Load" button is clicked (using a JQuery post statement) after the select parameters have been specified.
$.post("../listProducts.php", {
AccName: account,
From: startDate}, function(data){
$("#resultFS").after(data);
});
Once the resultTable is displayed, the user checks the checkboxes as relevant in the table rows.
Subsequently, when the "Update" button is clicked I need to loop through each table row, read that row's Ref_ID value and then, depending on the checked status of the associated checkbox, post an Update to the specified row of a MySQL table.
The code to loop through the table is:-
$("#btnUpdate").on('click', function() {
for (var i=0, row; row = outTable.rows[i]; i++) {
var rowRef = row.cells[1].textContent;
console.log( "Ref_ID = " + rowRef);
var isChecked = 0;
if (row.cells[2].firstChild.checked = true){
isChecked = 1;
// update MySQL table using rowRef;
};
console.log( "Ref_ID = " + rowRef + " Ready = " + isChecked);
};
};
This code logs the Ref_ID values as expected but I'm unable to determine the checkbox state in any row. (The checkboxes are behaving as expected on the webpage - clicking sets & unsets them.)
Please advise on how I should code for this (using either JS or JQuery). Thanks..

Related

Update Salesforce Object from Marketing Cloud Automation Studio Using Script

I would like to update a record in the Sales Cloud object using Script in Automation Studio in Marketing Cloud.
I found the code: https://gist.github.com/katydorjee/818912244f95c49c0bf52c175d00cfe8. I've tried to apply it to my case, but it errors "ERROR: A runtime error occurred while the SSJS Activity executed the SSJS script. Please review the SSJS activity to ensure that errors are handled properly."
<script runat="server">
Platform.Load("core","1.1.1");
var sfUpdateString;
var targetDE = DataExtension.Init('xxx').Rows.Retrieve();
for (var i = 0; i < targetDE.length; i++)
{
var Field1 = targetDE[i].AccountID;
var Field2 = targetDE[i].Gender;
sfUpdateString = '';
sfUpdateString = '%'+'%[SET #uso = UpdateSingleSalesforceObject("Account","'+Field1+'"';
sfUpdateString += ',"Gender__c","'+Field2+'")]%'+'%';
Platform.Function.TreatAsContent(sfUpdateString);
Write(Platform.Variable.GetValue("#uso"));
}
</script>
Data Extension:
|AccountID | Gender |
| ------------------ | -------------- |
| 0015g00000FwcXXXXX | Female |
Account (Salesforce Object):
Id = 0015g00000FwcXXXXX
Name = Mr. A
Gender__c(picklist field) = ' ' (I would like to update this field to be "Female")
I change "Platform.Load("core","1.1.1");" to "Platform.Load("core","1");" and it works well now.

Display option selected with codeigniter

I want to ask for my code option selected with 2 tabel in page register
table prodi
+-------------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+-------------+-------------+------+-----+---------+-------+
| id_prodi | varchar(3) | NO | PRI | NULL | |
| nama_prodi | varchar(30) | NO | | NULL | |
| id_fakultas | varchar(3) | NO | MUL | NULL | |
| id | int(2) | NO | MUL | NULL | |
+-------------+-------------+------+-----+---------+-------+
and
table jurusan
+---------------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------------+-------------+------+-----+---------+-------+
| id_fakultas | varchar(3) | NO | PRI | NULL | |
| nama_fakultas | varchar(40) | NO | | NULL | |
+---------------+-------------+------+-----+---------+-------+
here's view :
<label for="fakultas">Fakultas : </label>
<select id="fakultas" name="fakultas_user" onChange="fakultas">
<?php
foreach ($qfakultas as $fakultas) {
echo "<option value=".$fakultas->kd_fakultas.">".$fakultas->nama_fakultas."</option>";
}
?>
</select>
<hr>
<label for="jurusan">Jurusan : </label>
<select id="jurusan" name="jurusan_user" onChange="jurusan">
<?php
foreach ($qprodi as $prodi) {
echo "<option value=".$prodi->kd_prodi.">".$prodi->nama_prodi."</option>";
}
?>
</select>
but I will display 'nama_prodi' based on 'id_fakultas"
register with option value
How to display when I click 'nama_fakultas' then display 'nama_prodi' based on 'id_fakultas' ?
Thanks
Here is the Ajax code that I can help, only to get nama_prodi based on id_falkutas.
You can use this code for your project, there is something you need to do. Not just copy the code. Just a few step (ID Lang : Jangan dicopy mentah2, hanya beberapa langkah saja untuk edit).
Change YOUR_URL_HERE into your base_url() or create var for it.
Change nama_controller into your controller name in CI_Controller
Change nama_fungsi into your function to get the data from your model (database). Example : ambil_data_jurusan.
Remove your foreach - echo <option> and onchange from your view.
Add the script into your view files or create a new .js file.
Please help me to mark as correct answer if this code helped you. ( tolong dibantu gan )
See Code Example :
<script>
$("#falkutas").on('change', function() {
$.ajax({
type:"POST",
url:'YOUR_URL_HERE/nama_controller/nama_fungsi',
data:{"falkutas_user":falkutas_user,"csrf_token":$("input[name=csrf_token]").val()},
dataType:'json',
success: function(result) {
for(var i=0; i<result.length; i++) {
res += '<option value="'+result[i]['id_prodi']+'">'+result[i]['nama_prodi']+'</option>';
}
$(document).ready(function() {
$("#prodi").html(res);
});
},
error: function(result) {
$(document).ready(function() {
$("#prodi").html(''); //empty select value
});
}
});
}
</script>
Then, in your function code :
// Inside function ambil_data_jurusan(), harusnya sudah jalan kalau gini
$return = $this->model->get_jurusan($this->input->post('falkutas',TRUE));
if(count($return)>0) {
echo json_encode($return);
}
In your view, just let select empty like this.
<select id="jurusan" name="jurusan_user">
</select>

Sort Columns on Angularjs DataTable

I want to sort my table columns by angular-dataTables. However, it sort the productCurrency because of 'ng-if' first then only to sort the productType. Any suitable function of dataTable can sort the table correctly? Check my output:
My Output:
|Product |
|CHN Product1|
|USD Product1|
|ABC |
|BBC |
|BBC |
|ZBC |
Expected Output:
|Product |
|ABC |
|BBC |
|BBC |
|CHN Product1|
|USD Product1|
|ZBC |
You can see it was supposed to sort product by alphabet, but it sort by currency 1st then the product type.
(Edited) PS: USD & CHN is productCurrency; Product1, ABC, BBC, ZBC is productType.
Here are my code:
ViewUserType.html
<td>
<span ng-if="ctrl.productType='ABC'" translate="ctrl.productCurrency.translateKey"> {{ctrl.productCurrency}}</span>
<span translate="ctrl.product.type.translateKey">{{ctrl.productType}}</span>
</td>
Controller.js
ctrl.dtOptions = DTOptionsBuilder.newOptions().withOption('aaSorting', [[2, 'desc'], [1, 'desc']]).withOption('pageLength', 25);

Select the opposite of the union data

I had product, vendor, vendor's available day and booking tables. Currently, my search function only can search through vendor available day, but not search through booking table. I used left joins between vendor and vendor available day and compare with the selected day, time and hour. The search result works. How do I search through booking table?
Product Table
id | vendor_id | title | description
Vendor Table
id | name
Vendor Available Table
id | vendor_id | d_day | d_start_hour | d_start_minute | d_end_hour | d_end_minute
Booking Table
id | vendor_id | d_date | d_day | d_start_hour | _start_minute
Below is how I select product based on the selected day, start_hour and start_minute:
SELECT * FROM product
LEFT JOIN ( SELECT * FROM vendor GROUP BY id ) vendor
ON vendor.id = product.vendor_id
LEFT JOIN ( SELECT * FROM vendor_available GROUP BY id) vendor_available
ON vendor_available.vendor_id = product.vendor_id
WHERE ( d_day = '4'
AND (CONCAT(d_start_hour, '.' , d_start_minute) + 0.0) <= '12.15'
AND (CONCAT(d_end_hour, '.', d_end_minute) + 0.0) >= '12.15')
4 is the selected day and 12.15 is the selected hour and selected minute on the client side.
When the user selects 12.15 which is 12.15pm, the query will check which product is available between the vendor available time.
How do I use opposite union with booking table, so that the product which already booked doesn't display to users?
When using LEFT JOIN tbl, it is normal to add this to the WHERE clause (not the ON clause)
AND tbl.id IS NULL
This says that you want to return results only when the is no row in tbl.

table setAttribute not working properly in IE

I am trying to build an application that generates a custom list item which will be displayed on the screen dynamicly(like contact list update), and have the following code which works pretty well on both IE and Firefox.
<html>
<head>
<style type="text/css">
.divCss table{
width:100%;
height:130px;
}
.divCss {
width:100%;
height:100%;
border:solid 1px #c0c0c0;
background-color:#999000;
font-size:11px;
font-family:verdana;
color:#000;
}
.divCss table:hover{
background-color :#FF9900;
}
</style>
<script type="text/javascript" language="javascript">
var elementCounts = 0;
function myItemClicked(item)
{
alert("item clicked:"+item.id);
}
function createItem()
{
var pTag = document.createElement("p");
var tableTag = document.createElement("table");
tableTag.id = "" + (elementCounts++);
tableTag.setAttribute("border","1");
tableTag.setAttribute("cellpadding","5");
tableTag.setAttribute("width","100%");
tableTag.setAttribute("height","130px");
tableTag.onclick = function() {myItemClicked(this);};
var tBody = document.createElement("tbody");
var tr1Tag = document.createElement("tr");
var tdImageTag = document.createElement("td");
tdImageTag .setAttribute("width","100px");
tdImageTag .setAttribute("rowspan","2");
var imgTag = document.createElement("img");
imgTag.setAttribute("width","100px");
imgTag.setAttribute("height","100px");
imgTag.id = "avatar";
tdImageTag .appendChild(imgTag);
var tdTextTag= document.createElement("td");
tdTextTag.setAttribute("height","30%");
tdTextTag.setAttribute("nowrap","1");
tdTextTag.setAttribute("style","font-weight: bold; font-size: 20px;");
tdTextTag.id = "text";
tdTextTag.innerHTML = "text";
tr1Tag.appendChild(tdImageTag);
tr1Tag.appendChild(tdTextTag);
var tr2Tag = document.createElement("tr");
var tdAnotherTextTag = document.createElement("td");
tdAnotherTextTag.setAttribute("valign","top");
tdAnotherTextTag.id = "anotherText";
tdAnotherTextTag.innerHTML = "Another Text";
tr2Tag.appendChild(tdAnotherTextTag );
tBody.appendChild(tr1Tag);
tBody.appendChild(tr2Tag);
tableTag.appendChild(tBody);
tableTag.className ="divCss";
pTag.appendChild(tableTag);
document.getElementById("list").appendChild(pTag);
}
function clearList()
{
document.getElementById("list").innerHTML = "";
elementCounts = 0;
}
</script>
</head>
<body>
<input id="btn1" type="button" value="create item" onclick="createItem();" />
<input id="btn2" type="button" value="clear list" onclick="clearList();" />
<div id="list" class="divCss" style="overflow: scroll;"></div>
</body>
</html>
This code generates a new table element on click of "create item" button and adds it inside a div element on the main page.
The table element is supposed to be like the following
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
The above code does showup properly on firefox, however on IE, the rowspan is kinda ignored and the output looks like
+---------------+--------------------+
| Image with | Text |
|rowspan ignored| |
|---------------+--------------------|
| Another Text | |
| | |
+---------------+--------------------+
Can anyone help me why this must be happening? I also checked writing direct tags ( instead of using createElement and appendChild), and that works, but the dynamic generation seems to be problamatic. Am I doing anything worng here?
Also, after adding the generated table elements in the div element ( "list" ), there seems to be some gap between consecutive table elements and am not able to remove it even if i specify margin and padding as 0 in div tag.
Any help would be much appreciated.
Thanks.
EDIT: About the gap between table elements inside div.
Here is the output as expected: ( This works in jsfiddle as suggessted by Shadow Wizard ).
+------------------------------------+
| List Element 1 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
| List Element 2 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
| List Element 3 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Here is the output that i get on chrome, ie, firefox..
+------------------------------------+
| List Element 1 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Gap
+------------------------------------+
| List Element 2 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Gap
+------------------------------------+
| List Element 3 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Sorry for explaining things like this. I was not able to upload my snapshots. However, you can see the difference between jsfiddle and other browser effects by opening the page as html file in any browser.
EDIT (Shadow_Wizard) - here is the screenshot:
In IE, the attributes are pretty limited and better be set "directly" and not via setAttribute.
Try this instead:
tdImageTag.rowSpan = 2;
Same for width and height: those better be set as part of the style:
imgTag.style.width = "100px";
imgTag.style.height = "100px";
Edit: by gaps do you mean the parts marked with red circles?
Edit II: if you see difference between jsFiddle and your own file it might mean you're missing DOCTYPE declaration. Try adding this line on top of your code, above the <html> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jsFiddle is adding such line by itself, you can View Source to see it.
Also, I saw you're running the file locally... that's also not good you better run it as part of website to simulate "real" web page.
Try tdImageTag.setAttribute("rowSpan","2"); - it needs to be the upper case S
The gaps between the table elements may happen because the default cellspacing try this code: tableTag.cellSpacing=0;
Also if you are using the strict mode you can set the cellspacing in the css:
table.divCss {border-spacing:0;}

Categories