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.

Leave a Reply