Appreciate if you could help.
I had populated the data from a form into a dialog box when users click on the 'submit'. However, I would like to populate and change the default value to "NIL" for empty fields. The following is my codes for populating the data:
jQuery('#lblCustNameBs').html(jQuery('#custNameBs').val())
jQuery('#lblembossingNameBs').html(jQuery('#embossingNameBs').val())
jQuery('#lblCustMobileBs').html(jQuery('#custMobileBs').val())
The code for the table are as follow:
<tr>
<td style="width: 200px !important;">
Salutation :
</td>
<td id ='lblTitleBs' />
</tr>
<tr>
<td style="width: 200px !important;">
Customer Name :
</td>
<td id ='lblCustNameBs' />
</tr>
<tr>
<td style="width: 200px !important;">
Embossing Name :
</td>
<td id ='lblembossingNameBs' />
</tr>
Thanks in advance :)
You can use the || operator to coalesce a null/undefined value to whatever you require.
Also note tat td cells are not self closing so you should use <td></td> instead of <td />. The use of both inline styles and !important should ideally be avoided too.
jQuery(function($) {
$('#lblCustNameBs').html($('#custNameBs').val() || 'NIL');
$('#lblembossingNameBs').html($('#embossingNameBs').val() || 'NIL');
$('#lblCustMobileBs').html($('#custMobileBs').val() || 'NIL');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td style="width: 200px !important;">
Salutation :
</td>
<td id="lblTitleBs"></td>
</tr>
<tr>
<td style="width: 200px !important;">
Customer Name :
</td>
<td id="lblCustNameBs"></td>
</tr>
<tr>
<td style="width: 200px !important;">
Embossing Name :
</td>
<td id="lblembossingNameBs"></td>
</tr>
</table>
Related
How to append below code in jQuery to display dynamically.
<div id="lol">
<tr data-userid="<%=iterator3.next()%>" data-mid="<%=iterator3.next()%>" >
<td width="119">Practise Match</td>
<%-- <td width="119"><%=iterator3.next()%><td>
<td width="119"><%=iterator3.next()%> <td> --%>
<td width="119"><%=iterator3.next()%>pts<td>
<td width="119"><%=iterator3.next()%>rank<td>
</tr>
</div>
$("#lol").append("<tr data-userid="+<%=iterator3.next()%>+" data-mid="+<%=iterator3.next()%>+" >"+ "<td >"+"Practise Match"+"</td>"+"<td >"+<%=iterator3.next()%>+"pts"+"<td>"+" <td width="119">"+<%=iterator3.next()%>+"rank"+"<td>"+"</tr>");
Is this correct or not?
Change the code to
<div id="lol">
<tr data-userid="<%=iterator3.next()%>" data-mid="<%=iterator3.next()%>" >
<td width="119">Practise Match</td>
<%-- <td width="119"><%=iterator3.next()%><td>
<td width="119"><%=iterator3.next()%> <td> --%>
<td width="119"><%=iterator3.next()%>pts<td>
<td width="119"><%=iterator3.next()%>rank<td>
</tr>
</div>
$("#lol").append(`<tr data-userid="${<%=iterator3.next()%>}" data-mid="${<%=iterator3.next()%>}">
<td>Practise Match</td>
<td>${<%=iterator3.next()%>}pts</td>
<td width="119">${<%=iterator3.next()%>}rank</td>
</tr>`);
I changed the code to ES6 standard, that will give a HTML structure look.
You are missing td closing tag.
Hope this will help you.
I have list of text fields among which I want only one field to be moved to the right, i have used but it is only moving the text box to the right without label.Can we do it without the help of CSS.
<tr align="right">
<td oraLabel="mrId" class="oraLabel oraTableLabel"><label for="mrId">
</label></td><td class="oraNormal oraTableData"><input id="mrId"
class="oraInput" oraField="mrId">
</td>
</tr>
You could take a look at
direction (It does not work if set to a single row. unless display is reset)
tr[data-direction="right"] {
display:table;/* can only be set on table nowdays, not a single row ! */
direction: rtl;
}
[data-direction="right"]>* {
direction:ltr;
}
table, td {
border:solid 1px;
}
<table>
<tr data-direction="right">
<td oraLabel="mrId" class="oraLabel oraTableLabel">label<label for="mrId">
</label></td>
<td class="oraNormal oraTableData"><input id="mrId" class="oraInput" oraField="mrId">
</td>
</tr>
<tr>
<td oraLabel="mrId" class="oraLabel oraTableLabel"><label for="mrId2">label
</label></td>
<td class="oraNormal oraTableData"><input id="mrId2" class="oraInput" oraField="mrId2">
</td>
</tr>
</table>
or transform
tr[data-direction="right"] {
transform:scale(-1,1)
}
[data-direction="right"]>* {
transform:scale(-1,1)
}
<table>
<tr data-direction="right">
<td oraLabel="mrId" class="oraLabel oraTableLabel">label<label for="mrId">
</label></td>
<td class="oraNormal oraTableData"><input id="mrId" class="oraInput" oraField="mrId">
</td>
</tr>
<tr>
<td oraLabel="mrId" class="oraLabel oraTableLabel"><label for="mrId2">label
</label></td>
<td class="oraNormal oraTableData"><input id="mrId2" class="oraInput" oraField="mrId2">
</td>
</tr>
</table>
Notes:
When you do not want to use a class or any other known attributes, you can make your own valid attributes that DOM and CSS can access/filter. data-attribute
I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>
You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am assigned to get the boolean value of a checkbox.
I couldn't find a way to get the boolean value of the checkbox. e.g: true,false.
Is there a way to do this?
Link: https://jsfiddle.net/hongyang1033/ek30dgt9/5/
<body>
<div >
<table border=1px>
<thead>
<tr>
<th colspan="5">Description</th>
<th>Comment</th>
<th>User</th>
<th>Feedback</th>
<th>Status</th>
</tr>
</thead>
<tbody style="border-top : 1px solid black" id = "1">
<tr>
<td class="partition"><label class="label">Title:</label><label class="label ">A</label></td>
<td class="sip" style="border-left:none"><label class="label">Author:</label><label class="label">James</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="bookstore">BookStore</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="ebook">Ebook</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="library">Library</label></td>
<td rowspan="4"><textarea maxlength="180" class="animated" id="usercomment" name="comment" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 80px; width:280px;">The book is ..........</textarea></td>
<td rowspan="4" align="center">Adam<br><button class="label label-primary" id="submit">Submit</button></td>
<td rowspan="4" align="center">Feedback Goes Here<br></td>
<td rowspan="4" align="center"><br>No Feedback Yet</td>
</tr>
<tr>
<td colspan="2" class="def"><label class="label">Genre:</label><label class="label">Fiction</label></td>
</tr>
<tr>
<td colspan="2" class="path"><label class="label label-primary" style="margin-left:5px">BookURL</label><label class="label label-primary " style="margin-left:40px">DownloadLink</label></td>
</tr>
<tr>
<td colspan="2" class="path"><a style="display:none">www.ddd.com/bookurl</a></td>
</tr>
</tbody>
JQuery
$("#submit").click(function() {
var $row = $(this).closest("tbody");
var $text = $row.document.getElementById("#emulation").checked(); //
alert($text);
});
As id is unique, hence, you can get it directly. Use, is() function to check the property.
Update from
var $text = $row.document.getElementById("#emulation").checked();
to
var $text = $("#emulation").is(":checked");
I want to be able to click a button on a table and update the row information. I have the back-end all set up to do this. I am just having trouble being able to get at the table generated by angular. Here is my html template:
<br />
<table id="recordTable" border="1px">
<tr><td ng-repeat="column in columns"><strong>{{column.column_name}}</strong></td> </tr>
<tr ng-repeat="record in records">
<td ng-repeat="cell in record.cells"> {{cell}} </td>
<td><button ng-click="delete($index)">Delete</button></td>
<td><button ng-click="update($index)">Update</button></td>
</tr>
</table>
<br />
When I call the function update($index), I would like to be able to turn the text that is currently filled with {{column.column_name}} into a text input with the {{column.column_name}} as the default text. I could not find anything in the Docs for this. Any thoughts?
I've made a slight change to the record.cells array, now it is [{value : 'Value1'},{value : 'Value2'}]
<table id="recordTable" border="1px">
<tr>
<td ng-repeat="column in columns">
<strong>{{column.column_name}}</strong>
</td>
</tr>
<tr ng-repeat="record in records">
<td ng-repeat="cell in record.cells">
<span ng-show="mode != 'edit'">{{cell.value}}</span>
<input ng-show="mode == 'edit'" ng-model="cell.value" />
</td>
<td><button ng-click="delete($index)">Delete</button></td>
<td>
<button ng-show="mode != 'edit'" ng-click="mode = 'edit'">Update</button>
<button ng-show="mode == 'edit'" ng-click="mode = null">Save</button>
</td>
</tr>
</table>
Demo: Plunker