|
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.
|
|
|
|
|
Hello everybody,
I have a Calendar in my page and I want to check if users select Saturday or Sundays, with getDay() function I can check day number, but I find out depend on operating system setting I get different number for Saturday or Sunday. So how is a proper way I can check this and be sure it is secure for every operating system settings.
Regards
Mazy
"This chancy chancy chancy world."
|
|
|
|
|
That's odd behaviour - can you post the code please, including where you Parse the date out (if applicable, including date format)? In any case it probably isn't an OS thing, but a timezone/localisation problem (which happen to be different on the two OSs you are trying).
In the mean time you can try getUTCDay(), but I doubt it'll fix your problem.
|
|
|
|
|
Thanks, Yes it can be for timezone/localisation problem too. Here is my code:
function ff_bfQuickMode7256046_validation(element, message)
{
if(element.value == '' )
return 'Please select a date for your apppointement.\n';
var myday = new Date(element.value) ;
myday.setDate(myday.getDate());
var weekday = myday.getDay();
alert(weekday);
if (weekday == 6 || weekday == 0 ) {
if (message=='') message = element.name+" faild in my test.\n"
message = 'We are close on Saturdays and Sundays.\n';
ff_validationFocus(element.name);
return message;
} // if
return '';
} // ff_bfQuickMode7256046_validation
The probelm is I get two different numbers for WEEKDAY on two different computer. So are you telling me that getDay() should return the same value globaly for all OS or setting..?
Mazy
"This chancy chancy chancy world."
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
