Category Archives: Knockout

Knockout

[RESOLVED]Thoughts on Angular

I was reading up on Angular for the first time the other day and thought to myself "Unbelievable….here’s a framework that could care less about Separation of Concerns" which of course is diametric to what MVC is all about.  Any thoughts on that?  It was
just my first impression… What do you like about Angular?  And why should I consider using it?

Angular has some features which you can use, but there are other ways to achieve what you can get in angular js. If you follow angular it will be always the same format sending the JSON object from mvc controllers. asking the browser to use angular to format
json objects into required UI. It has advantages like low network consumption as json alone is sent to client, quicker response time as razor engine is hardly used you are not building the whole html at server, only the layout will be generated from mvc and
rest of the dropdowns radio buttons are generated by angular js. One thing you might have to consider is if you use any other Jquery controls like the scroller, popup, dropdowns are they compatible with angular js.

v2kea60

"Unbelievable….here’s a framework that could care less about Separation of Concerns"

AngularJS framework is built using MV* pattern (more popularly MVVM) which clearly have "separation of concerns". Similar to MVC, MVVM and Angular has Separation of concerns built in. Unfortunately most of the examples in Angular are primitive and hence
you may get the feeling like this. JavaScript as a whole suffers this separation of concerns feeling. I believe the reason is most of the current adopters of Angular and Javascript is frontend developers. But this is changing rapidly. Please take a look at
my blogs on this

Where is Model in AngularJS

Revealing Module pattern in AngularJS

Visual Studio Project Structure for Angular

Also take a look at my demo project at GitHub

https://github.com/prasannapattam/ng-demos/tree/master/ng-demos/ng-styleguide

v2kea60

What do you like about Angular?

A great framework to build single page applications. It drastically reduces your code. I also feel that Angular is going to de facto standard for Single Page Application

v2kea60

why should I consider using it?

If you are building a single page application, then I strongly recommend Angular. Otherwise look at Knockout

[RESOLVED]Dynamic Question Generation

Hi,

I am looking for a bit of additional input and best practice, to give you an overview at the moment I have an application that allows you to create a question and then assign options to that question, be that a drop down, check box, radio button or pretty
much any other standard control.

Each question can have one or more options, now all of that works perfectly. The problem arose when our requirements evolved quite severely, a new question type should now be available, a table with multiple controls per column. That too works without any
problem.

Where the major issue arose was with recalling the data of the individual you are dealing with. the moment you work with the multiple rows it did not save a row counter to the table. This was in the design, so I added the field to the table that now keeps
track of value row. The only problem I had is that now when a user removes a random line, and that line not being the last, and he add another line, the line ID gets repeated.

So my problem lies with the design. At the moment the controller generates pure HTML that allows the user to capture everything for the question. It generates a bit of jQuery which allows the ability to add or remove a line [ problematic a tad ] and then
displays it.

What will be able to do this more elegantly? Knockout? another way about using my views and models, a partial view? I am looking for ideas since I hit a brick wall.

Any advice would be appreciated.

Hi Heinz09,

I would like to know the details:

  1. What the row counter used for?
  2. What will it affect if the ID is repeated?
  3. How do you generate the ID? How about the random ID?

Please provide the detail code and snapshot of the design (view)

Best Regards

Starain

Hi,

At the moment I cannot find a place to upload the image to, with it explaining this would go much smoother. It is basically for an online intranet survey. The administrator loads his questions and what the possible options, as well as text boxes. Initially
the application only had to display one question with all the options. It then looked at the database what the administrator captured and built a HTML string which it sent to the view in a ViewBag to then be displayed in Html.Raw, this created the options
dynamically, when the user hits the post button, I capture the FormCollection of the previous view. Then I loop through all the names of the options and start reading the values. After the entire process the response is then just saved.

After a while they decided they want a dynamic table which caters for multiple columns, AND the part I am stuck with now, dynamic multiple rows. So when you click add, it would just populate a line and have all the options still editable.

Now that I started making sure all is well I realized I need a row associated to each options to link it in the answer. Otherwise with no row ID, everything is seen as in the same row, which is not the case.

So at the moment I am just looking for alternative thinking patterns or technologies that might solve this issue.

Hi Heinz09,

You’d better provide the detail code and the database schema to me.

For the snapshot, you could upload to the OneDrive and share it with a link, then post the link here.

How about generate the ID in the hidden field for each row?

Best Regards

Starain

Hi Starain,

Thank you for the tip of using OneDrive, I uploaded the image to it, this is what it looks like at the moment http://1drv.ms/1xvggYP, at the moment I have changed it slightly, now the jQuery I generate creates
a variable linked with a row number, it always just gets increased by one after one has been removed, thus there will be no duplicates. The dynamic table build is still fine, the one thing that does happen is that text input boxes repeat the first value for
the amount of rows that is in the client side window.

So now I need to append that row counter after each item name thus being OPTION112.4 for the option with that name on line 4. Or do you have another suggestion how it would work?

PS: I also included a snapshot of what the table looks like that contains the options. http://1drv.ms/1wBQ4yM

Regards
Hein

Hi Heinz09,

Do you try to add random number behind the ID?

You may need provide the detail code.

Best Regards

Starain

Well it seems after I rewrote a bit everything is now actually working better than before and faster.

The problem was just the controls had to be grouped by line, and now finally does it. The bug that I had is that some values were repeated and others were ignored. The level of dynamic questions was just something to get used to.

Thank you for the tip though ;)

[RESOLVED]MVC4 With HTML5

Hi,

I am going to start new project in MVC. I want to know feasibility and support of HTML5 with MVC.

As far as I can understand MVC uses pure HTML controls.  How feasible and effective to use HTML5 controls? Should I use Razor view or Normal aspx views?

I was also exploring Ajax and Binding implementation with MVC.  After some research I decided to go with KnockoutJS. Let me know your inputs on this also. 

Best Regards,

Janak Darji 

Janak.Darji

MVC uses pure HTML controls.

MVC does not care about what controls do you use on HTML. MVC cares about binding

Yes, MVC have helpers –  but Html.TextBoxFor is a shortcut for <input type=’text’ value=’@Model.<prop>’

Janak.Darji

How feasible and effective to use HTML5 controls?

easy and yes.

Janak.Darji

hould I use Razor view or Normal aspx views?

Razor is simpler

Janak.Darji

I was also exploring Ajax and Binding implementation with MVC.  After some research I decided to go with KnockoutJS.

Binding on MVC have nothing to do with Knockout, that is on browser.

Thank you for reply and clarification. 

For HTML5 It would require me add additional helper or it is part of framework?

Best Regards,

Janak Darji 

Janak.Darji

it is part of framework?

as I know , it is not.

KnockoutJS with MVC grid with dropdown for quantity updation……

Hi,

Am working shopping cart project in MVC razor with knockoutJS.

 My scenario is an grid with dropdown. Each product will have different quantity dropdown.

 Example:

 Product : hammam soap

Quantity  (dropdown ctrl) : 1,2,3,4

 Product : rice

Quantity: 200,400,500,1000

 My problem is for all product shows same quantity . It takes last product quantity for all products. I need solution for this ASAP.

Mohan Subramanian

 My problem is for all product shows same quantity

Maybe there is same quantity. maybe is what you return from database. Maybe you have the wrong html code. Maybe… 

BUt it is better to show some code.

Please post the code where you are populating the quantity drop down values.

knockout js is working on main window but not working in popup window on asp.net / vb.net web application

Hello

I am developing a web application built with asp.net and vb.net

I have a page (update_status.aspx) which is using knockout js to display a datepicker depending upon the value selected by the user on select box. the code is like below.

 <%@ Page Title="" Language="VB" MasterPageFile="E4.master" AutoEventWireup="false" CodeFile="update-status.aspx.vb" Inherits="E4_Jobs_Details_Application_update_status" %>


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">

           <div class="entry-wrapper">
                <input type="hidden" id="appId" value="<%= VacancyApplication.ID%>" />

                <div class="form-element">
                    <label>Current status</label>
                    <input type="text" readonly="readonly" value="<%= VacancyApplication.Status%>" />
                </div>

                <div class="form-element">
                    <label>New status (required)</label>
                    <select id="comNewStatus" runat="server" datavaluefield="id" datatextfield="name" class="nFee"></select>
                </div>


                <div data-bind="visible: statusId() == 12">
                    <label>
                        Start date (required, format: DD-MMM-YYYY)
                    </label>
                    <div class="input-append">
                        <span class="add-on "><span class="icon-calendar"></span></span>
                        <input class="dp" size="16" type="text" value="" runat="server" id="txtStartDate" />
                    </div>
                </div>
            </div>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ScriptContent" runat="Server">
    <script  src="~/_resx/js/jquery-1.8.3.min.js"></script>
    <script src="~/_resx/js/json2.min.js"></script>
    <script src="~/_resx/js/knockout-2.2.1.js"></script>
    <script src="~/_resx/js/knockout.mapping-latest.js"></script>

    <script type="text/javascript">

        var ViewModel = function () {
            var self = this;
            self.histories = ko.observableArray([]);
            self.statusId = ko.observable(0);
            self.feeType = ko.observable(0);
            self.agencyApp = ko.observable(false);
            self.offeredSalary = ko.observable(0);
            self.finalSalary = ko.observable(0);
            self.introductionFee = ko.observable(0);
            
        };
        var vm = new ViewModel();
        ko.applyBindings(vm);

        $(function () {
            $("select.chosen").chosen();
            dimNav('vacancy');

            var aid = $('#appId').val(), feeType = $('#feeType').val(), agencyApp = $('#agencyApp').val();
            vm.feeType(parseInt(feeType));
            vm.agencyApp(agencyApp);

            $('.nFee').change(function () {
                vm.statusId(parseInt($(this).val()));
            });
            

            //numeric only
            $('.txtOfferedSalary, .txtFinalIntroductionFee,.txtFinalSalary').keydown( function(event) {
                // Allow: backspace, delete, tab, escape, and enter
                if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                    (event.keyCode == 65 && event.ctrlKey === true) ||
                    // Allow: home, end, left, right
                    (event.keyCode >= 35 && event.keyCode <= 39)) {
                    return;
                } else {

                    if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                        event.preventDefault();
                    }
                }
            });



            $.when(
                $.ajax({
                    type: "POST",
                    url: "/_services/UtilityService.asmx/applicationstatushistories",
                    data: "{id:" + aid + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: true
                })).done(function (r) {
                    vm.histories($.parseJSON(r.d));
                    //console.log();
                    momentize();
                });
        });
    </script>
</asp:Content>

The problem is this knockoutjs doesnot work when i convert this page as popup page by changing its master page (like below). that is the calender doesnot come up when user selects the right status.

<%@ Page Title="" Language="VB" MasterPageFile="E4_Popup.master" AutoEventWireup="false" CodeFile="update-status.aspx.vb" Inherits="E4_Jobs_Details_Application_update_status" %>

Both E4.master and E4_Popup.master is using the same style and same code file .

<%@ Master Language="VB" CodeFile="E4.master.vb" Inherits="_resx_E4" %>

the only difference is they are different files and E4_Popup.master doesnot contains the extra bits of the web page (e.g; headers and footers ).

even if copy E4.master page as E4_Popup.master page and refer it to the update status page .. the calender does not come up. It just not working on the pages other than E4.master page.

I dont understand what the problem is..

What shall I do? Please help me with right advice. 

If you need more information please let me know.

Hi,

make sure the new master page file refers to the knockout.js file from its header too.

I had make sure of that… even if i just copy the E4.master page and save it as E4_Popup.master page and refere it to update_status.aspx page that doesnot work.

raju dasa

Hi,

make sure the new master page file refers to the knockout.js file from its header too.

Hi bashabi,

In your code,i didn’t see any javascipt reference code about knockout.js

please make sure that you have code like below in your page:

  <script src="../Scripts/knockout.js"></script>

Best Regards,

Kevin Shen.

the references are in master page.  i also have added the reference in main page…. but it did not work.

I have included the codes for both the master pages.

below is the code for my master page for popup . please have a look. and advice me

<%@ Master Language="VB" CodeFile="E4_Popup.master.vb" Inherits="_resx_E4_Popup" %>


<!doctype html>

<html lang="en">
<head id="Head1" runat="server">

    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="/_resx/css/e4-popup-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/_resx/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" media="print" href="/_resx/css/e4_print_1.css" />
    <script  src="/_resx/js/jquery-1.8.3.min.js"></script>
    <script src="/_resx/js/json2.min.js"></script>
    <script src="/_resx/js/knockout-2.2.1.js"></script>
    <script src="/_resx/js/knockout.mapping-latest.js"></script>

    <script type="text/javascript">if ($.browser.msie && parseInt($.browser.version) < 8) { window.location = '/badbrowser.aspx'; }</script>
    <script>
        $(function () {
            if ($.browser.msie && parseInt($.browser.version, 10) === 6) {
                $('.row div[class^="span"]:last-child').addClass("last-child"); $('[class*="span"]').addClass("margin-left-20"); $(':button[class="btn"], :reset[class="btn"], :submit[class="btn"], input[type="button"]').addClass("button-reset"); $(":checkbox").addClass("input-checkbox"); $('[class^="icon-"], [class*=" icon-"]').addClass("icon-sprite");
                $(".pagination li:first-child a").addClass("pagination-first-child");
            }
        })
    </script>

     
</head>
<body>
    <form id="form1" runat="server">
      <asp:ScriptManager runat="server" ID="ScriptManager" />
        <div class="loading"></div>
        <div class="popup-wrapper">

            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </div>
    </form>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="/_resx/js/respond.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUCn2Ql9C5kHJbIxYgghwA3Q5zmoTahIk&sensor=true"></script>
    <script src="/_resx/js/json2.min.js"></script>
    <script src="/_resx/js/knockout-2.2.1.js"></script>
    <script src="/_resx/js/knockout.mapping-latest.js"></script>
    <script src="/_resx/js/bootstrap.min.js"></script>
    <script src="/_resx/js/bootbox.min.js"></script>
    <script src="/_resx/js/typeahead.min.js"></script>
    <script src="/_resx/js/trunk8.js"></script>
    <script src="/_resx/js/moment.js"></script>
    <script src="/_resx/js/chosen.jquery.min.js"></script>
    <script src="/_resx/js/jquery.cookie.js"></script>
    <script src="/_resx/js/date.format.js"></script>
    <script src="/_resx/js/jquery-datepicker.min.js"></script>
    <script src="/_resx/js/highcharts.js"></script>
    <script src="/_resx/js/spinners.min.js"></script>
    <script src="/_resx/js/tipped.js"></script>
    <script src="/_resx/js/datepicker.js"></script>
    <script src="/_resx/js/jquery.autosize-min.js"></script>
    <script src="/_resx/js/jquery.tinysort.min.js"></script>
    <script src="/_resx/js/jquery.mousewheel.js"></script>
    <script src="/_resx/js/jquery.jscrollpane.js"></script>
    <script src="/_resx/js/jquery.gmap.js"></script>
    <script src="/_resx/js/jquery.signalR-1.0.1.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="/_resx/js/e5-min.js"></script>


    <asp:ContentPlaceHolder runat="server" ID="ScriptContent" />
    <script type="text/javascript">
                function setSize() {
                        window.resizeTo(300, 300);
                }

                function SetWindow() {
                            var height = 400                      //Set height
                            var width = 400                        //Set width
                            var name = "winname"             //Set window name
                            var top = 20                             //Set distance from top
                            var left = 20                             //Set distance from bottom
                            url = window.location.href;
                            window.document.statusbar.enable = false;

                            if (document.location.search == '') {
                                newwin = window.open(url, name, "fullscreen=no,toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,directories=no,location=no,width=" + width + ",height=" + height + ",left=" + left + ",top=" + top);

                            }
                }


                var reseizeParentColorBox = function () {
                    parent.$.colorbox.resize({
                        innerHeight: $('body').height() + 100
                    });

                    $('input[type="text"]:first').focus();
                };

                //momentise times

                var momentize = function () {
                    $('.moment').each(function () {
                        var m = moment($(this).attr('data-time'));
                        var $time = m.valueOf();
                        if (m.diff(moment(), 'days') < 0) {
                            $(this).removeAttr('rel').html(moment($time).format('MMMM Do, YYYY'));
                        } else {
                            $(this).html(moment($time).fromNow()).attr({
                                'title': moment($time).format('MMMM Do, YYYY h:mm a')
                            });
                        }
                    });
                };

                function loaderStart() {
                    $('.loading').show();
                }

                function loaderStop() {
                    $('.loading').fadeOut();
                }



        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-31876528-1']);
        _gaq.push(['_trackPageview']);



        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
</body>
</html>

below is my code for master page for main screen

<%@ Master Language="VB" CodeFile="E4.master.vb" Inherits="_resx_E4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head runat="server">
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="/_resx/css/e5-min.css" />

    <link rel="stylesheet" type="text/css" media="print" href="/_resx/css/e4_print_1.css" />
    <script src="/_resx/js/jquery-1.8.3.min.js"></script>
  
    <script type="text/javascript">if ($.browser.msie && parseInt($.browser.version) < 8) { window.location = '/badbrowser.aspx'; }</script>
    <script>
        $(function () {
            if ($.browser.msie && parseInt($.browser.version, 10) === 6) {
                $('.row div[class^="span"]:last-child').addClass("last-child"); $('[class*="span"]').addClass("margin-left-20"); $(':button[class="btn"], :reset[class="btn"], :submit[class="btn"], input[type="button"]').addClass("button-reset"); $(":checkbox").addClass("input-checkbox"); $('[class^="icon-"], [class*=" icon-"]').addClass("icon-sprite");
                $(".pagination li:first-child a").addClass("pagination-first-child");
            }
        })
    </script>

</head>
<body>
    <form id="form1" runat="server" style="height: 100%;">
        <asp:ScriptManager runat="server" ID="ScriptManager" />
        <div class="loading"></div>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="navbar-search pull-left q-search">
                    <input type="text" id="qSearch" placeholder="type job title or candidate name..." />
                    <input type="hidden" value="" id="qSearchU" />
                </div>
                <ul class="nav pull-right account">
                    <li class="user  dropdown">
                            <div class="user">
                                <%= LocalHelper.CurrentUserName()%> <b class="caret"></b>
                            </div>

                    </li>
                </ul>

                               <a class="pull-right logout" href="/logout.aspx">Log out</a>
            </div>
        </div>

        <div class="help">
            <div class="help-inner">
                <iframe id="helpframe" src="/E4/help/index.html" scrolling="no" frameborder="0" height="auto" width="100%">Sorry, iframes are not supported.</iframe>
            </div>
        </div>

         <div class="g-wrapper">
                            <a href="#menu" id="menuLink" class="pure-menu-link">
                                        <img src="/_resx/images/navicon-png2x.png" width="20" alt="Menu toggle">
                            </a>
                            <div class="fix-nav-bg scroller">
                                        <div class="fix-nav">
                                                    <a class="nav-link " href="/E4/Default.aspx">
                                                        <i class="dashboard"></i>
                                                        <span>Dashboard</span>
                                                    </a>
                                                    <a class="nav-link " href="/E4/Jobs/Open.aspx">
                                                        <i class="vacancy"></i>
                                                        <span>Jobs</span>
                                                    </a>
                                        </div>
                            </div>
                            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </div>
        <a href="http://mypeoplebiz.com" class="copy">&copy; mypeoplebiz</a>
    </form>

    <script src="/_resx/js/respond.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUCn2Ql9C5kHJbIxYgghwA3Q5zmoTahIk&sensor=true"></script>


    <script src="/_resx/js/json2.min.js"></script>
    <script src="/_resx/js/knockout-2.2.1.js"></script>
    <script src="/_resx/js/knockout.mapping-latest.js"></script>
    <script src="/_resx/js/bootstrap.min.js"></script>
    <script src="/_resx/js/bootbox.min.js"></script>
    <script src="/_resx/js/typeahead.min.js"></script>
    <script src="/_resx/js/trunk8.js"></script>
    <script src="/_resx/js/moment.js"></script>
    <script src="/_resx/js/chosen.jquery.min.js"></script>
    <script src="/_resx/js/jquery.cookie.js"></script>
    <script src="/_resx/js/date.format.js"></script>
    <script src="/_resx/js/jquery-datepicker.min.js"></script>
    <script src="/_resx/js/highcharts.js"></script>
    <script src="/_resx/js/spinners.min.js"></script>
    <script src="/_resx/js/tipped.js"></script>
    <script src="/_resx/js/datepicker.js"></script>
    <script src="/_resx/js/jquery.autosize-min.js"></script>
    <script src="/_resx/js/jquery.tinysort.min.js"></script>
    <script src="/_resx/js/jquery.mousewheel.js"></script>
    <script src="/_resx/js/jquery.jscrollpane.js"></script>
    <script src="/_resx/js/jquery.gmap.js"></script>
    <script src="/_resx/js/jquery.signalR-1.0.1.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="/_resx/js/e5-min.js"></script>
    <asp:ContentPlaceHolder runat="server" ID="ScriptContent" />
    <script type="text/javascript">

        function openSupport() {

            var URL = '/E4/help/index.html';
            window.open(URL, '', 'toolbar=0,scrollbars=0,location=no,statusbar=0,menubar=0,resizable=1,width=900,height=700,left = 560,top = 130');

        }



        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-31876528-1']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
</body>
</html>

Hi bashabi,

I suggest that you can use F12 to debug your page ,see if it has any error message.

If does,please post here.

Best Regards,

Kevin Shen.

There are 2 error message which I have found in the popup page but not in main page while debugging. I have provided them including the code (where it indicated the error) below. 

these codes are written in both of the two master page. 

I have tried disabling these lines of code and run… but its the same result.

please have a look and advice

SCRIPT5007: Unable to get property ‘msie’ of undefined or null reference
update-status_popup.aspx, line 17 character 13

    <script>
        $(function () {
            if ($.browser.msie && parseInt($.browser.version, 10) === 6) {
                $('.row div[class^="span"]:last-child').addClass("last-child"); $('[class*="span"]').addClass("margin-left-20"); $(':button[class="btn"], :reset[class="btn"], :submit[class="btn"], input[type="button"]').addClass("button-reset"); $(":checkbox").addClass("input-checkbox"); $('[class^="icon-"], [class*=" icon-"]').addClass("icon-sprite");
                $(".pagination li:first-child a").addClass("pagination-first-child");
            }
        })
    </script>

SCRIPT5007: Unable to get property ‘resize’ of undefined or null reference
update-status_popup.aspx, line 304 character 21

                var reseizeParentColorBox = function () {
                    parent.$.colorbox.resize({
                        innerHeight: $('body').height() + 100
                    });

                    $('input[type="text"]:first').focus();
                };

When I run the application … for the E4.master page,E4_popup.master page and update_status_popup.aspx page the following type of warning comes up

Namespace or type specified in the Imports ‘Telerik.WebControls’ doesn’t contain any public member or cannot be found. Make sure the namespace or the type is defined and contains at least one public member. Make sure the imported element name doesn’t
use any aliases.

[RESOLVED]How to save a view automatically in MVC on the Server side.

We have some views for an mvc application.we want to give save functionality on a particular view which will capture everything from that view and save it in a folder on server either in pdf or html file type. 

The target of my functionality is, we have an external portal which was built on MVC which uses CRM as backend. We will be having some views in Portal which needs to be send to the Microsoft HealthVault as a PDF or an Html file. We achieved creating
a HTML file for the view. now our intention is to send the saved file to healthvault from portal. We are using Knockout for binding the data

Save functionality should be called when user clicks on button on view.How can we achieve this. 

[RESOLVED]JQuery missing (not loading) error on IE 11 on MVC 5 after publish

Hi,

I have developed one asp.net application with MVC 5 and I used couple of javascript framework like

  • JQuery 2.1.1 
  • Knockout.js 3.2.0
  • Bootstrap.js 
  • Bootstrap.datepicker,js 

Application is running fine when I run from VS2013 on IE & Chrome.

But After I publish my application on web server and if I try to access my application from different computer or client I am facing below errors on Internet Explorer 11 only. I am not facing any error on Chrome of any versions. 

  • Object doesn’t support property or method ‘addEventListener’
  • Bootstrap requires jQuery
  •  ‘jQuery’ is undefined
  • The value of the property ‘$’ is null or undefined, not a Function object

But if I try to access my published application from server itself with http://localhost:<port>/ then everything works fine but if I try to access withhttp://<computername>:<port> problem
will continue. 

Note: I have updated my IE with latest version. 

Verify that your jQuery link has a relative URL and not an absolute one.

Hi,

As Careed said that the path should be a relative URL.

If you are reference these files in the view directly, please use
Url.Content
to generate the URL.

If you are register them to Bundles, the path should be like this:

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

Best Regards

Starain

Hi All,
Found the solution.
my IE 11 default Compatibility View is checked "Display internet sites in Compatibility View"

add below line to within Head tag
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
It will resolve your issue.

[RESOLVED]How to check length of DateTime.getFullYear() in Javascript when Day,Month,Year is coming from Model.

I have a 3 textboxes for Day, Month, Year & a corresponding property in my model which gets passed to the getAge() JS function through knockout using the below:

self.Age = ko.computed(function () {
                return getAge(new Date(this.DateOfBirthYear() + '/' + this.DateOfBirthMonth() + '/' + this.DateOfBirthDay()));
            }, this);

I had used the below to calculate age.

// Calculates the age based on the submitted DoB
        function getAge(dateOfBirth) {
            var today = new Date();
            var age = 0;
                      
            if (dateOfBirth.getFullYear().toString().length > 3) {
                age = today.getFullYear() - dateOfBirth.getFullYear();
            }
            var m = today.getMonth() - dateOfBirth.getMonth();

            if (m < 0 || (m === 0 && today.getDate() < dateOfBirth.getDate())) {
                age--;
            }

            return age;
        }

And based on the age i have to toggle a div if age > 50.

Now the problem is in IE & firefox, as soon as i enter 1 in the year box, the div shows up. while in chrome its fine.

Early finding say that in IE & Firebox the year is going as 1900 while in chrome its 2000, even if i am using getFullYear().

So not able to make it work, any suggestions.

Hi,

Don’t call the getAge() function until the
this.DateOfBirthYear() returns a string which is of length > 3.

Tried this, not working

self.Age = ko.computed(function () {
                if (this.DateOfBirthYear().length > 3) {
                    return getAge(new Date(this.DateOfBirthYear() + '/' + this.DateOfBirthMonth() + '/' + this.DateOfBirthDay()));
                }
            }, this);

My bad, working fine with the below code:

self.Age = ko.computed(function () {
                // call the getAge() function only when this.DateOfBirthYear() returns a string which is of length > 3.
                if (this.DateOfBirthYear() != null && this.DateOfBirthYear().toString().length > 3) {
                    return getAge(new Date(this.DateOfBirthYear() + '/' + this.DateOfBirthMonth() + '/' + this.DateOfBirthDay()), this.DateOfBirthYear());
                }
            }, this);

[RESOLVED]Angular vs. Knockout

I was just wondering if any Subject Matter Experts know the differences and or similarities of each of these frameworks.  

When would someone use one over the other?  

Which one would you focus on first?

Scott Hansleman had a recent podcast about choosing a javascript framework to use with Craig McKeachie. http://hanselminutes.com/441/choosing-a-javascript-framework-with-craig-mckeachie

Hopefully it may give some insight. His book is at: http://www.funnyant.com/javascript-framework-guide/

v2kea60

When would someone use one over the other?  

Which one would you focus on first?

It’s a tough one. It seems like AngularJS is more popular than Knockout these days due to the capabilities AngularJS have over Knockout. You can’t do DOM manipulation sort of stuff with Knockout. If you use Knockout, then you have to use jQuery or pure javascripts
(which is old school way) to do the DOM manipulation. But AngularJS have inbuilt DOM manipulation so no need of using jQuery (Please note that there are some times that you have to use jQuery as AngularJS is not capable of doing all the jQuery stuffs)

[RESOLVED]Html element having both text and value properties

 Is there any element that has both text and value properties??

 I want to bind Different values for text and value properties using knockout . 

The requirement is to show the different text and save the different value as we do with the the dropdown options..

Hi Chinna,

As an work around, you can use some delimiter (separator) to store the value in single attribute.

In the example below, I have used ^^ as the delimeter (separator). You can then split the value with this special character(s) and use it as two different values.

You may use single character or multiple characters depending on your data.

value=’asdfasdf^^asdfadsf’

However, html elements also support custom attributes, i.e., you can write your own attributes (which are not defined by browser), but that could trouble the html validation tools. But, with HTML5, you have data- attributes. See this reference:

http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag

Hi Siva,

   Thanks for the reply.

   

Hi Chinna,

You’re welcome.. Have a nice day!

Regards

Siva