|
So I have this row that's a cart item. And inside the row are column divs with spans for values.
I manage to isolate the div row, and I'm trying to find the the spans and change the values.
I tried each, but it seems to grab all the elements, and not step through each one.
I'm stumped on this.
So my HTML looks like this, and I want to change the value of span data-qty attr and the inner html inside the span tag.
<div class="cartRecord" onclick="service_selectItem(17);" data-serviceid="1" data-cartid="17">
<div class="cartQty">
<span data-qty="7">7</span>
</div>
<div class="cartSKU" id="1000">
<span>1000</span> </div>
<div class="cartDescription">
<span>Diagnose and repair hardware or software</span>
</div>
<div class="cartPrice">
<span>95.00</span>
</div>
<div class="cartTotal">
<span data-total="665">665.00</span>
</div>
</div>
This is what I have going, if my thoughts are way off track I'm open to suggestions.
success: function (data) {
if (data !== null) {
var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
if (dRecord !== null) {
dRecord.each(function(index, element) {
alert($(this).html());
if ($(this).is('span')) {
alert($(this).html());
if ($(this).attr('data-qty')) {
alert($(this).html());
$(this).data('data-qty', data.Qty).html(data.Qty);
}
}
if ($(this).is('span')) {
alert($(this).html());
if ($(this).attr('data-total')) {
alert($(this).html());
$(this).data('data-total', data.Total).html(data.Total);
}
}
});
}
}
|
|
|
|
|
The each function iterates through all of the elements matched by the selector - ie: the div elements with the specified data attribute. It doesn't iterate over the descendants of the matched items, which is what you're trying to do.
You don't actually need to iterate over the descendants. You can just find the relevant span elements and update them directly:
var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
dRecord.find("span[data-qty]").html(data.Qty).data("qty", data.Qty);
dRecord.find("span[data-total]").html(data.Total).data("total", data.Total);
Also worth noting that the return from the $ function will never be null. If there are no matching elements, you'll still get a jQuery object back, with a length of zero.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I feel stupid now. That's sort of how I found the the data I needed in another function.
very simple and elegant.
I didn't think of or forget about find.
I added the dRecord Check as length instead of null or undefined. Maybe I don't need it.
The data-qty and data-total didn't change, but I can figure that out.
success: function(data) {
if (data !== null) {
var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
if (dRecord.length > 0) {
dRecord.find("span[data-qty]").html(data.Qty).data("data-qty", data.Qty);
dRecord.find("span[data-total]").html(data.Total.formatMoney(2, '.', ',')).data("data-total", data.Total);
}
} else {
$("#serviceUpdate").removeClass('btn btn-default').addClass('btn btn-danger');
}
}
Oh this MVC and the Twitter Bootstrap CSS is hard to implement, but getting better at it. And faster.
Thanks Richard, I was completely off the rails on this. 
|
|
|
|
|
Just to throw on the pile a little more, have you considered using a data-binding framework like Knockout, Backbone, or Angular? They do have the benefit of working on data as if it's at the base data level, rather than having to reverse-engineer the data from a rendered view.
|
|
|
|
|
No I haven't considered it. I heard of Angular but have no clue what it is.
Nathan Minier wrote: rather than having to reverse-engineer the data from a rendered view.
But I rendered the content in the view with JQuery after the GET call.
I mean I used jQuery to download the cart items and construct the HTML for it.
Then wrote this post to update the item qty and total price.
Feel free to elaborate ...
|
|
|
|
|
Well, general JavaScript and jQuery do not support any sort of data binding, so when data is modified for any reason you may miss it, or use JavaScript to walk the DOM until you locate the appropriate element.
Data binding frameworks eliminate this necessity. You can use them to bind a JavaScript variable to an element on the DOM. This means that when a value is updated either from an AJAX call or from user interaction, the change reflects in both the script and on the DOM.
For instance, I could rewrite your sample as:
<html ng-app="myApp">
...
<div ng-controller="myCartController">
<div class="cartRecord" ng-click="doSomething()">
<div class="cartQty">
<input type="text" ng-model="model.quantity" />
</div>
<div class="cartSKU">
<span>{{model.SKU}}</span> </div>
<div class="cartDescription">
<span>{{model.Description}}</span>
</div>
<div class="cartPrice">
<span>{{model.price | currency : '$' : 2}}</span>
</div>
<div class="cartTotal">
<span>{{model.total}}</span>
</div>
</div>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myCartController',['$scope',function($scope){
$scope.model = MethodToGetModelFromAJAX();
$scope.model.total = $scope.model.price * $scope.model.quantity;
$scope.doSomething = function(){
}
}
</script>
</html>
Never mind the Angular-specific syntax, that code will allow you to populate the HTML via AJAX, update the quantity and recalculate the total, format the currency, and will even "do something!" on click.
|
|
|
|
|
That sounds and looks cool!
That may reduce my development time, after the learning curve.
So this is what most folks are using today? and is well accepted?
I'm pretty far behind on MVC, and need to catch up.
|
|
|
|
|
It seems to go one of two ways (in the ASP.NET world).
The first is .NET MVC where the majority of the work is done server-side, so data-binding in JavaScript isn't terribly important. The problem is that it relies on postbacks and viewstate. In those formats state is tracked on the server so JavaScript needs are generally fairly minimal.
The other common pattern is the Single-Page Application using WebAPI and a data-binding framework (mine's Angular, hence the example). You use flat HTML as templates and only serve data from your controllers. This approach getting more common, because it can do a very solid job of acting like a native application. State resides on the client in this format, and the ASP.NET modules just provide data.
Hybrid approaches like the one you describe, where you use MVC with AJAX, do happen, but by and large people lean one way or the other due to the complexity of managing state on both server and client side.
|
|
|
|
|
Nathan Minier wrote: .NET MVC ... it relies on postbacks and viewstate.
I think you're getting confused between WebForms and MVC. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Meh, ViewData.
Session cookie is still sort of the same thing though. Ish.
I won't debate it, though, or you'll start quoting GUIDs at me from memory.
|
|
|
|
|
This particular view I'm working on is a single form, Order Form, which collects the
Customer
Billing and Shipping Address
Cart Items
Sub totals
Shipping and etc
all on 1 form or view.
I respect your knowledge, and rather than take days to study it and research, I'll just ask
Should I adopt Angular for this view?
|
|
|
|
|
<button type="button" class="btn btn-primary" id="create">create</button>
<div id="createDoctor" style="width:99%;"></div>
and is:
<pre lang="Javascript">$('#create').click(function(){
$('#createDoctor').jtable('showCreateForm');
}); </script></pre>
its not opening the JTable add new Record form. this is in content page
in footer page i was add
<pre lang="Javascript"><script src="${baseURL}/lte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script></pre>
Am struggling a lot any help plz......
|
|
|
|
|
<div id='create'/>
and how to write the code to open new Record form in button click
|
|
|
|
|
If you want help, you'll need to be more specific - asking a question on an Internet forum (such as CodeProject) is a skill, and one that needs to be learned. The first thing to think about is the person reading your question and run through a mental check-list:
- Have I stated what I tried and why/how it failed? This avoids dead-end solutions where people suggest the same thing. It also shows you, as a questioner, have tried something. People on this forum are answering for free, and don't waste time helping people who are too lazy to do their own work, they do want to help those who have tried an got stuck
- Have I provided enough information for people in the forum to be able to answer the question - this is where your question really falls down. Remember we don't know what you are doing and,as mind-reading isn't feasible, you need to provide the information we need -"how to write the code to open new Record" immediately begs several questions: what do you mean by open - from a DB, as show the form to create a record?; What is a record? By open do you mean open or create?
As you haven't supplied any code - we can't even give you a help to start. At this point break down the problem - for example "How do I react to a button click in JS" - then google it (plenty of resources on that) if you can't do it yourself, then ask again here. By using these smaller steps you'll be able to build up a bigger system.
|
|
|
|
|
hi,
am having
<div id="create"/>
then in script
$('create').jtable('showCreateForm');
its not opening the jtable add new record form.
how to solve it
thanks in advance..
modified 10-Feb-16 3:47am.
|
|
|
|
|
$('#create').jtable('showCreateForm');
|
|
|
|
|
yes...tried with that but error in console is:
$(..).jtable is not a function
|
|
|
|
|
|
in the below code iframe is using to upload file to server. see the code and tell me when iframe load event is fired ?
<script type="text/javascript">
$(document).ready(function () {
$("#formsubmit").click(function () {
var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none"></iframe>');
$("body").append(iframe);
var form = $('#theuploadform');
form.attr("action", "/upload.aspx");
form.attr("method", "post");
form.attr("encoding", "multipart/form-data");
form.attr("enctype", "multipart/form-data");
form.attr("target", "postiframe");
form.attr("file", $('#userfile').val());
form.submit();
$("#postiframe").load(function () {
iframeContents = this.contentWindow.document.body.innerHTML;
$("#textarea").html(iframeContents);
});
return false;
});
});
</script>
code taken from here http://stackoverflow.com/questions/7909161/jquery-iframe-file-upload
the above code dynamically creating iframe and append to body and submitting the form. how the above code file is uploading to server by iframe not clear?
what is relation between file upload and iframe in above code ?
when iframe load will call ?
$("#postiframe").load(function () {
iframeContents = this.contentWindow.document.body.innerHTML;
$("#textarea").html(iframeContents);
});
help me in details.
thanks
tbhattacharjee
|
|
|
|
|
The form on the page is having it's action set to be the iframe which means when the form is submitted it doesn't load in the browser, but instead the form is submitted to, and ergo upload.aspx is loaded, in the iframe. This lets the page remain without being refreshed.
|
|
|
|
|
just do not understand the objective behind it. can u explain with easy sample code. thanks
tbhattacharjee
|
|
|
|
|
It's a way of uploading a file without leaving the page. If you had an form like this
<form action = "upload.aspx" method="post">
</form>
and you submit that form you get a page refresh. If you do
<iframe name="myiframe"></iframe>
<form action = "upload.aspx" method="post" target="myiframe">
</form>
when you submit the form the browser keeps on the current page but the form is submitted to the iframe. If the iframe is hidden then the user doesn't see anything, the file is uploaded silently.
|
|
|
|
|
thanks a lot 
tbhattacharjee
|
|
|
|
|
Hi am kind of New to using Javascript, please can i get help on a javascript function that will pick the value in textbox2 and get 70% of it and drop it into textbox4 at the same time disable textbox3,my codes are below.Thank you
<asp:gridview id="Gridview1" runat="server" showfooter="true" autogeneratecolumns="false"
="" font-size="X-Small">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="S/N" />
<asp:TemplateField HeaderText="NAME">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ASSESSMENT1">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Width="40px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ASSESSMENT2">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Width="80px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LEVEL">
<ItemTemplate>
<asp:DropDownList ID="dropdownlist1" runat="server" Width="100px">
<asp:ListItem Value="-1">Select</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="SESSION">
<ItemTemplate>
<asp:DropDownList ID="dropdownlist2" runat="server" Width="150px">
<asp:ListItem Value="-1">Select</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="TOTAL">
<ItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Width="80px"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click"
Width="80px" Font-Size="X-Small" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
|
|
|
|
|
First up - it is a very good idea to rename TextBox1 to something like descriptive like TextBoxName etc. I used to teach development and it never ceased to amaze me how many students wouldn't descriptive naming because using the default is "quicker". They would, however, happily deal with mental effort required to remember TextBox14 was the Address City and were seemingly even more happy to spend time in a practical exam debugging the fact they'd mis-typed TextBox11 where they needed TextBox1.
Anyway, rant over . To start you off on your actual question: You can use JavaScripts getElementById()[^] to do what you want, but the problem is .net will replace the ASP.net the ID you specified with a one generated from the ID you supplied plus the IDs of its parent controls (something like Form1_GridView1_TextBoxAssessment1 I forget the exact format ). This is done to try to ensure ID uniqueness in the HTML. To compensate, you embed you JS inside ASP:
<script type="text/javascript">
document.getElementById("<%= TextBoxAssessment1.ClientID %>")
.onchange=function(){
};
</script>
Assuming you've re-named your textBox2 to TextBoxAssessment1. getElementById() does what it says on the tin, getting the element by its ID, onchange() detects changes to the value.The <%= TextBoxAssessment1.ClientID %> does the magic of working out the ID of your control as rendered on the browser.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
