I'm creating online cart. In that i'm getting values through jquery/json GET from my spring/hibernate and it is running with no problems. I've some bugs in adding them in js class now I just want to read each row's textbox's value by it's name.
for Eg:
var product = $('[name="product"]').val();
var vendor = $('[name="vendor"]').val();
<table style="width: 90%; margin: 15px;">
<thead>
<tr style="border-bottom: 2px solid gray;">
<th style="float: left; text-align: left !important" width="50%">Product
Details</th>
<th style="float: left; text-align: left !important" width="25%">Vendor</th>
<th style="float: left; text-align: left !important" width="20%">Quantity</th>
<th style="float: left; text-align: left !important" width="5%"></th>
</tr>
</thead>
<tbody id="tbdyProducts"
style="min-height: 300px; max-height: 300px; overflow: auto; display: block;">
<tr>
<td style="padding-top: 15px; float: left; width: 350px"><span
id="product1" name="product">Xperia M Dual</span></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname1" name="seller" style="height: 20px">sample
vendorname</span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" id="proqty1" name="proqty" size="5"
style="height: 20px; text-align: center" value=""></td>
<td align="right" valign="bottom" style="width: 55px"><span
id="deleteRow" onclick="ProductRemove(1)" class="deleteRow"
style="cursor: pointer; cursor: hand">X</span><input type="hidden"
id="hsrate1" name="hsrate" value="250.50"></td>
</tr>
<tr>
<td style="padding-top: 15px; float: left; width: 350px"><span
id="product2" name="product">Mouse</span></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname2" name="seller" style="height: 20px">a valid
company or vendor name</span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" id="proqty2" name="proqty" size="5"
style="height: 20px; text-align: center" value=""></td>
<td align="right" valign="bottom" style="width: 55px"><span
id="deleteRow" onclick="ProductRemove(2)" class="deleteRow"
style="cursor: pointer; cursor: hand">X</span><input type="hidden"
id="hsrate2" name="hsrate" value="3.00"></td>
</tr>
<tr id="productSearch" style="display: none;">
<td style="padding-top: 15px; float: left; width: 350px"><span
role="status" aria-live="polite" class="ui-helper-hidden-accessible">1
result is available, use up and down arrow keys to navigate.</span><input
type="text" id="productfinder" size="40" style="height: 20px"
autocomplete="off" placeholder="Product Name or Code"
class="ui-autocomplete-input"></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname" style="height: 20px"> </span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" size="5" id="productnos"
style="height: 20px; text-align: center"></td>
<td align="right" valign="bottom" style="width: 55px"><span>X</span></td>
</tr>
</tbody>
</table>
I tried like this but it didn't work:
for(i=0; i< $('[name="product"]').length; i++){
var product = $(this).find('[name="product"]').val();
alert(product);
}
Note that your HTML is invalid (in various ways): Table cell elements don't have name or value attributes. If you want to put arbitrary information in attributes, use data-* attributes instead. (You're also using the same id on more than one element; id values must be unique on the page.)
So two issues:
You're using find to look within the elements, but in fact you want the information from the element you're already looking at
You're using val, but the elements in question aren't form fields. It might work, but if so, it's undocumented.
The simple, reliable thing is to use each and attr:
$('[name="product"]').each(function() {
alert($(this).attr("value"));
});
If instead of alerting you want an array of the values, map and get:
var values = $('[name="product"]').map(function() {
return $(this).attr("value");
}).get();
But again, if you want to put arbitrary attrs on, you'll want to use data-name and data-value instead.
You can use eq method for this:
var product = $('[name="product"]').eq(i).val();
alert(product);
but I would suggest you to use each method
$( '[name="product"]' ).each( function() {
var product = $( this ).val();
console.log( product );
});
Update:
If you want to read there vendor also, you can modify each to accept index:
$( '[name="product"]' ).each( function( index ) {
var product = $( this ).val();
var vendor = $( '[name="product"]' ).eq( index ).val();
console.log( product );
console.log( vendor );
});
Related
I am writing a piece of code to implement an "Add New Deadlines" functionality.
I have 5 "Add" buttons:
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(1)" id="button_1">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(2)" id="button_2">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(3)" id="button_3">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(4)" id="button_4">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(5)" id="button_5">Add Deadline</td>
I want to implement a javascript addDeadline(num) that can insert the below td after the clicked button.
<td>Deadline 1</td>
<td>Deadline 2</td>
<td>Deadline 3</td>
<td>Deadline 4</td>
<td>Deadline 5</td>
"Deadline 1" should be inserted after the button_1 if it is clicked.
Thanks for your help.
You can fix your code to this to make it work (no jquery just pure js):
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function addDeadline(num, caller) {
var el = document.createElement("td");
el.innerHTML = "Deadline" + num;
insertAfter(caller, el);
}
<table>
<tr>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="javascript:addDeadline(1,this)" id="button_1">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(2,this)" id="button_2">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(3,this)" id="button_3">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(4,this)" id="button_4">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(5,this)" id="button_5">Add Deadline</td>
</tr>
</table>
To insert new element after clicked element. Refer this
removeAttribute will remove click handler. If you do not want to stop adding tds then remove this line..
event.target will return clicked element
function addDeadline(num) {
var newElem = document.createElement('td');
newElem.innerText = 'Deadline ' + num;
event.target.parentNode.insertBefore(newElem, event.target.nextSibling);
event.target.removeAttribute('onclick')
}
<table>
<tr>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(1)" id="button_1">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(2)" id="button_2">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(3)" id="button_3">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(4)" id="button_4">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(5)" id="button_5">Add Deadline</td>
</tr>
</table>
Fiddle here
http://www.w3schools.com/js/js_htmldom_nodes.asp
You can use that as an example, of course modifying it according to your table. You can point to the table with the id, and the add the elements you want.
Or:
document.getElementById('TABLE_ID').innerHTML += '<td> Deadline X </td>';
X can be stored in a variable.
Hope that helps!
You can write insertAfter() function like this:
function addDeadline(num) {
$( "<td>Deadline "+num+"</td>" ).insertAfter( "#button_"+num );
}
I am trying to get a popup window which should be controlled by a jQuery function that will show/hide on the button click. My button is an asp.net control but I can't figure out how to "call" the jQuery function when the button is clicked
I have tried to add a function name to my asp.net control's onClientClick that should at least just show the popup div but that is not working. I am new to using jQuery and I believe I have everything set up correctly but I am not positive. I am also not certain whether or not I am trying to "call" the jquery function correctly.
Here is the jQuery code..
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(documnet).ready(function () {
$("#AddToCartBtn").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
$("#AddToCartBtn").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e) {
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog() {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
Heres the css..
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
and lastly the asp button control and the <div>'s
<asp:ImageButton ID="AddToCartBtn" runat="server" RowIndex='<%# Container.DisplayIndex %>'
ImageUrl="~/Pictures/ShoppingCart.png" onClientClick="ShowDialog()"
/>
<div id="output"></div>
<div id="overlay" runat="server" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Online Survey</td>
<td class="web_dialog_title align_right">
Close
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Choose your favorite mobile brand? </b>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
<input id="brand2" name="brand" type="radio" value="Sony" /> Sony
<input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
So recap, I am having trouble calling my jQuery function when my asp.net button is clicked. I don't think the function is ever getting called at all because when i set breakpoints at the function it never jumps to them when testing. Any help would be greatly appreciated
ASP.NET Buttons have a dynamic generated ID, depending on its parent controls. So your Button ID isn't #AddToCardBtn. Check the generated HTML for that. As a workaround you can call out the generated ID by: <%=AddToCardBtn.ClientID%> into your jquery code to get the generated client ID of your button.
Example:
$("#<%=AddToCardBtn.ClientID%>").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
Thats the cause why your window isn't showed. The function isn't bound to your button.
Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.
You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});
I'm developing an app using JavaScript and want to use SemanticZoom.
We use only one list view but I have multiple list views in my page.
This is my sample code which I'm using right now:
<section>
<table><tr><td style="width: auto; height: 100%; display: none;" id="myDealsSection">
<table style="height: 100%; margin-left: 80px; margin-bottom:
50px;">
<thead>
<tr>
<td ><span id="MyDealsHead" style="font-size: 20pt; font-family: 'Segoe UI
Light'; padding-left: 5px;">My Deals</span><span id="myDealsHdrArrw"style="font-
size:20pt;"> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: auto; height: 100%; vertical-align: top;">
<div id="homePageDealsList" aria-label="List of this group's items"style="height:
100%; width: auto;" data-win-control="WinJS.UI.ListView" data-win-options="{
selectionMode: 'none',layout: {type:WinJS.UI.GridLayout} }"></div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 100%; height: 100%; display: none;" id="pinnedDealsSection">
<table style="height: 100%; margin-left: 80px;">
<thead style="width: 100%;">
<tr>
<td><span id="pinnedDeals" style="padding-left:
5px; font-size: 20pt; font-family: 'Segoe UI Light';">Pinned Deals</span><span
id="pinnedDealsHdrArrw" style="font-size:20pt;"> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: auto; height: 100%; vertical-
align: top;">
<div id="pinnedDealsList"
class="pinnedDealsItemsList" aria-label="List of this group's items" style="height:
100%; width: auto; margin-bottom: 50px;" data-win-control="WinJS.UI.ListView" data-
win-options="{ selectionMode: 'none', layout: {type:WinJS.UI.GridLayout} }"></div>
</td>
</tr>
</tbody>
</table>
</td></tr></table>
</section>
How can I add two list views to zoomed in view?
I am not able to understand how to do that.
For the SemanticZoom sample visit: http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx
I have two tables in a page like this:
<table style="width:800px">
<tr>
<td style="width:400px;">
<table id="currencies"
style="border-spacing: 5px; padding: 3px; margin: 2px" />
</td>
<td style="width:400px;">
<table id="changers"
style="border-spacing: 5px; padding: 3px; margin: 2px" />
</td>
</tr>
</table>
I use jqgrid to extend these. One is the master table while the other is the detail. The problem however is the second table (id = "changers") is not being displayed in the page. I inspected the javascript from the browser and it has only one <td> element within the table row. This problem goes away if I put them in separate tables like so:
<table id="currencies"
style="border-spacing: 5px; padding: 3px; margin: 2px" />
<table id="changers"
style="border-spacing: 5px; padding: 3px; margin: 2px" />
I'm totally stuck on this. Any help is appreciated.
Your two nested table tags aren't closed. The <tag/> form is not a shorthand form of <tag></tag>, it's purely for void elements like <br/> that don't ever have markup content (and also for foreign elements, details in the spec), and you only need the solidus (/) in XHTML (which I recommend avoiding unless you have a very specific need to use it, XHTML is fraught with peril and misconception).
Explicitly close the tables with <table ...></table> rather than <table .../>:
<table style="width:800px">
<tr>
<td style="width:400px;">
<table id="currencies"
style="border-spacing: 5px; padding: 3px; margin: 2px"></table>
</td>
<td style="width:400px;">
<table id="changers"
style="border-spacing: 5px; padding: 3px; margin: 2px"></table>
</td>
</tr>
</table>
You should add closing tags to your tables. Instead of this
<table />
do this
<table> </table>
The whole code:
<table style="width:800px">
<tr>
<td style="width:400px;">
<table id="currencies"
style="border-spacing: 5px; padding: 3px; margin: 2px" ></table>
</td>
<td style="width:400px;">
<table id="changers"
style="border-spacing: 5px; padding: 3px; margin: 2px" ></table>
</td>
</tr>
</table>