Category Archives: ScriptManager

ScriptManager

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]Clientside event for Dropdownlist

Hi Friends,

I have 2 drop down lists ddl1 and ddl2. After selecting an item from the list for ddl1,i select an item from the list ddl2. If the item selected for ddl2 is not the same as the item selected for ddl1,an OK/CANCEL alert box should appear showing "Location
Name and Charged To Location are not the same. Do you want to proceed?".If clicked OK then nothing happens and return to the same page. If clicked CANCEL, ddl2 is cleared and return to the same page with focus on ddl2. Is there any clientside event to do this?
I tried writing it in the SelectionChangedEvent of ddl2 in the server side, but the alert box does’nt appear in the same page and it appears in another blank page.Below is the code.

Protected Sub ddl2_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddl2.SelectedIndexChanged
If ddl2.Text <> ddl1.SelectedItem.Text Then
Dim CSM As ClientScriptManager = Page.ClientScript
If Not ReturnValue() Then
Dim strconfirm As String = "<script>if(!window.confirm(‘Location Name and Charged To Location are not the same. Do you want to proceed?’)){window.location.href=’Presences.aspx’}</script>"
CSM.RegisterClientScriptBlock(Me.[GetType](), "Confirm", strconfirm, False)
ddlLocName.Focus()
End If
End If

Private Function ReturnValue() As Boolean
Return False
End Function

Can someone help me with a client side event for dropdownlist.

Thanks.

You can achive it using simple js like below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Uploader Demo</title>
    <script language="javascript" type="text/javascript">
        function OnChange(dropdown) {
            var myindex = dropdown.selectedIndex;
            var SelValue = dropdown.options[myindex].value;
            var objFirstDDL = document.getElementById('<%= DropDownList1.ClientID %>');
            var oldidx = objFirstDDL.selectedIndex;
            var FirstValue = objFirstDDL.options[oldidx].value;
            if (SelValue != FirstValue) {
                var blnResult = confirm("Location Name and Charged To Location are not the same. Do you want to proceed?");
                if (blnResult) {
                    return false;
                }
                else {
                    dropdown.selectedIndex = 4;
                    return false;
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList runat="server" ID="DropDownList1" AutoPostBack="false">
            <asp:ListItem Text="Text1" Value="Value1"></asp:ListItem>
            <asp:ListItem Text="Text2" Value="Value2"></asp:ListItem>
            <asp:ListItem Text="Text3" Value="Value3"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="DropDownList2" AutoPostBack="false" onchange='return OnChange(this);'>
            <asp:ListItem Text="Text1" Value="Value1"></asp:ListItem>
            <asp:ListItem Text="Text2" Value="Value2"></asp:ListItem>
            <asp:ListItem Text="Text3" Value="Value3"></asp:ListItem>
            <asp:ListItem Text="" Value=""></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="DropDownList3">
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="DropDownList4">
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

Thanks Friend..It worked perfectly.

I need 1 more similar help from you. I have 2 textboxes to enter the dates and a checkbox next to it. Dates are entered through calender control in JS.If the entered dates are greater than the present date,the checkbox should be disabled else the checkbox
should be enabled. Should I use javascript for this purpose? Through which event can I do this. Below are my code for textboxes.

<asp:TextBox ID="txtFromDate" runat="server" CssClass="txtbox" Width="80px"
onfocus="showCalendarControl(this)" AutoPostBack="True"></asp:TextBox>

<asp:TextBox ID="txtToDate" runat="server" CssClass="txtbox" Width="80px"
onfocus="showCalendarControl(this)" AutoPostBack="True"></asp:TextBox>

I Tried to write a server side code like this, but didnt work.

If CDate(txtFromDate.Text) > Date.Now.Date Or CDate(txtToDate.Text) > Date.Now.Date Then
chkCon.Enabled = False
Else
chkCon.Enabled = True
End If

Hope you can help me.

Thanks.

[RESOLVED]Javascript to disable the check box

I have 2 Textboxes to enter the dates and a Checkbox next to it. Dates are entered through calender control in JS. If the entered dates are greater than the present date,the checkbox should be disabled else the checkbox should be enabled. Should I use javascript
for this purpose? Through which event can I do this. Below are my code for textboxes.

<asp:TextBox ID="txtFromDate" runat="server" CssClass="txtbox" Width="80px" 
onfocus="showCalendarControl(this)" AutoPostBack="True"></asp:TextBox>

<asp:TextBox ID="txtToDate" runat="server" CssClass="txtbox" Width="80px" 
onfocus="showCalendarControl(this)" AutoPostBack="True"></asp:TextBox>

I Tried to write a server side code like this, but didnt work.

If CDate(txtFromDate.Text) > Date.Now.Date Or CDate(txtToDate.Text) > Date.Now.Date Then
chkCon.Enabled = False
Else
chkCon.Enabled = True
End If

i need the event to happen just after the dates are entered in the 2 Textboxes. Someone please help me.

Thanks.

Hi sinjumujeeb,

Please try the following code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Input Dates </title>
    <script type="text/javascript">

        function disableCheckBox()
        {
            
            var dateToday = new Date();
            var txtFromDate =new Date( document.getElementById('TextBox1').value);
            if (dateToday.getTime() <txtFromDate.getTime()) {
                document.getElementById('CheckBox1').disabled = true;
            }
            else {
                alert('please enter a former date');
            }

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:toolkitscriptmanager ID="Toolkitscriptmanager1" runat="server"></asp:toolkitscriptmanager>
    <div>
        From date:<asp:TextBox ID="TextBox1" ReadOnly="true" runat="server" onchange="disableCheckBox()"></asp:TextBox><asp:Label ID="lbl_Click" runat="server" Text="CLICK ME"></asp:Label> <asp:CalendarExtender ID="CalendarExtender1" TargetControlID="TextBox1" PopupButtonID="lbl_Click" PopupPosition="TopRight" runat="server"></asp:CalendarExtender>
        To date:<asp:TextBox ID="TextBox2" runat="server" onchange="disableCheckBox()"></asp:TextBox> <asp:CalendarExtender ID="CalendarExtender2" TargetControlID="TextBox2" runat="server"></asp:CalendarExtender>
        <asp:Label ID="Label1" runat="server" Text="Calculate" onclick="showDateDifference()"></asp:Label>
        <%--<input type="checkbox" id="CheckBox1" />--%>
        <asp:CheckBox ID="CheckBox1" runat="server" />
    </div>
    </form>
</body>
</html>

and revert for more details.

I think there are following options

1) you change showCalendarControl() so that it not only sets a value but also disable required controls.
2) you do not change showCalendarControl() but create a javascript which will check in a loop (e.g. every second, using setTimeout() function) for a value of the control and disable required controls.
3) you use another calendar which will let you do what you want – example: http://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-help 

P.S.

You cannot use AutoPostBack="True" because there is no postback event fired. So the code which you have in the code-behind will not fire on the change in calendar but only if you click on submit button or any other server control on the form.

Hi sinjumujeeb

From my point of view, I suggest you use the TextBox onchange event. Please try to use the following code:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

    <script type="text/javascript">
        function ValidateDate() {
            var dateToday = new Date();
            var txtFromDate = new Date(document.getElementById('TextBox1').value);
            if (dateToday.getTime() < txtFromDate.getTime()) {
                document.getElementById('CheckBox1').disabled = true;
                alert('please enter a former date');
            }
            else {
                document.getElementById('CheckBox1').disabled = false;
            }

        }
    </script>

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div>
            Date:
            <asp:TextBox ID="TextBox1" runat="server" onchange="ValidateDate();" ></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="TextBox1" PopupButtonID="TextBox1" runat="server"></asp:CalendarExtender> <br /> <asp:CheckBox ID="CheckBox1" runat="server" /> </div>

If you have any other questions about my reply, please let me know freely.

Best Regards,
Dillion

[RESOLVED]How can i format a number in javascript according to cultureInfo ?

Hi,

I have a number lets say   123456789.123 and i would like to use the locale on the browser to display the number . The culture is Hindi and it would display it as 

12,34,56,789.123 . 

It takes into account Nunbergroupsize and separator. How can i do this , keeping in mind that it needs to work with other cultures aswell.

thanks

I know that you can use the available
Number.toLocaleString()
and
Number.localeFormat()
functions in Javascript to handle performing conversions like this :

<!-- A ScriptManager instance which can help with locale related issues -->
<asp:ScriptManager ID="YourScriptManager" runat="server" EnableScriptGlobalization="true"></asp:ScriptManager>

<!-- Example script demonstrating formatting -->
<script type="text/javascript">
            // Grab a number
            var x = 123456789.123;

            // Format using Hindi
            var formatted = x.toLocaleString("hi");

            // Alert the new number
            alert(formatted); // outputs "12,34,56,789.123"
</script>

As you can see above, this works for explicitly setting a culture, however if you wanted to use the one locally available in the browser, you could try using the navigator.language property as seen below :

var formatted = x.toLocaleString(navigator.language);

This will attempt to pull the current language from the browser and format appropriately. If you are in need of more information, I would recommend checking out the
available ASP.NET Globalization and Localization documentation found here.

Hi,

thanks for the reply, but i find that using   toLocaleString can be undreliable in chrome , firefox and even IE at times, It seems to render the value incorrectly.

I managed to pass in the Number of digits in each group. In Hindi its 3 , 2   so for a number like 

123456789.123 i would get 12,34,56,789.123.

How can i do this in javascript ?

I tried 

for (var
i=0;
i < myArray.length;
i++)

{

//apply the 3, to get 123456,789

//then apply the 2 on the remainder to get the rest,  12,34,56,789.123

 }

thanks

Hi,

Try calling this js function:

function toIndianNumber(val){
  var val1 = val.split('.');
  return toIndianNumberRecursive(val1[0]) + (val1.length>1 ? '.'+val1[1] : '');
}
function toIndianNumberRecursive(val){
  if(val.length<4)
      return val;
  else
  {
      if(val.length>=8)
      {
        var limit=val.length-7;
        var crore = val.substring(limit);
        return val.substr(0,limit)+','+ toIndianNumberRecursive(crore);
      }
      else if(val.length>=6)
      {
        var limit=val.length-5;
        var lakh= val.substring(limit);
        return val.substr(0,limit)+','+ toIndianNumberRecursive(lakh);
      }
      else if(val.length>=4)
      {
        var limit=val.length-3;
        var thous= val.substring(limit);
        return val.substr(0,limit)+','+ toIndianNumberRecursive(thous);
      }
      else return val;
  }
}

//alert(toIndianNumber('123456789.123')); //call

If the toLocaleString() and localeFormat() functions don’t work, you might try considering a plug-in like
globalize.js, which is designed to handle implementing globalization features like you are referring to. 

I would highly recommend using a library for something like this, as it will likely be more well-tested and reliable than an attempt and manually splitting your values for every culture that you need to target.

[RESOLVED]To display an alert box to confirm according to the Check box True/False condition.

Hi Friends,

I have a gridview and the data entered into the gridview is through textboxes at the top.After entering all the data,before clicking the insert button,a check box is to be checked if the entry is confirmed and if the checkbox is not checked,the entry is
provisional. When clicking on the INSERT button, i need a confirm alert box to appear asking whether " Do u need to continue? Its a confirmed Entry !" if the checkbox is checked. if not checked, Alert box should appear as " Do u need to continue? Its a provisional
Entry !". If the user clicks cancel,the control should remain there. If the user clicks OK, the insert operation should take place. 

Below is the code for Insert button and checkbox. The form name is Presences.aspx.

<asp:CheckBox ID="chkCon" runat="server" onfocus="Checkbox()" AutoPostBack="True" />

<asp:Button ID="btnInsert" runat="server" Text="INSERT"/>

Protected Sub btnInsert_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnInsert.Click

‘Code to diplay alert box.

Dim CSM As ClientScriptManager = Page.ClientScript
If chkCon.Checked = False Then
Dim strconfirm As String = "<script>if(!window.confirm(‘Are you sure this is a provional presences?’)){window.location.href=’Presences.aspx’;}</script>"
CSM.RegisterClientScriptBlock(Me.[GetType](), "Confirm", strconfirm, False)
ElseIf chkCon.Checked = True Then
Dim strconfirm As String = "<script>if(!window.confirm(‘Are you sure this is a confirmed presences?’)){window.location.href=’Presences.aspx’;}</script>"
CSM.RegisterClientScriptBlock(Me.[GetType](), "Confirm", strconfirm, False)
End If

cmd.CommandText = "Insert into TBL_PRESENCES values (" & txtEmpID.Text & ",’" & txtEmpName.Text.ToString & "’," & Session("LocID1") & ",’" & ddlLocName.Text.ToString & "’," & Session("JobCode1") & ",@FromDate,@ToDate," & txtNoDays.Text & ",’" & ddlStatus.Text.ToString
& "’," & Session("LocID2") & ",’" & ddlChargedTo.SelectedItem.Text.ToString & "’,’" & Session("JobCode2") & "’,’" & Session("BU").ToString & "’,@CreatedDate,’" & Session("PRname") & "’,’" & ddlManager.Text.ToString & "’," & Actual.ToString & "," & Provisional.ToString
& ")"
cmd.Parameters.Add(New OleDbParameter("@FromDate", txtFromDate.Text.ToString))
cmd.Parameters.Add(New OleDbParameter("@ToDate", txtToDate.Text.ToString))
cmd.Parameters.Add(New OleDbParameter("@CreatedDate", Date.Now.Date))
cmd.ExecuteNonQuery()
cmd.Parameters.Clear()
lblMsg.Text = "Record Inserted"
bindPresences()
GvPresences1.Visible = True

End sub.

In my code to display alert box, if i click OK or Cancel, the values get inserted to the Grid.Some one please help me with a client side script to solve this issue.

Thanks.

Hi sinjumujeeb,

Thanks for your post.

sinjumujeeb

When clicking on the INSERT button, i need a confirm alert box to appear asking whether " Do u need to continue? Its a confirmed Entry !" if the checkbox is checked. if not checked, Alert box should appear as " Do u need to continue? Its a provisional Entry
!". If the user clicks cancel,the control should remain there. If the user clicks OK, the insert operation should take place. 

According to your description, you could try the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#btnInsert").click(function () {
                var ischecked = $("#chkCon").is(":checked");
                //alert(ischecked);
                if (ischecked) {
                    return confirm('Do u need to continue? Its a confirmed Entry !');
                }
                else {
                    return confirm('Do u need to continue? Its a provisional Entry  !');
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:CheckBox ID="chkCon" runat="server" onfocus="Checkbox()" />
            <asp:Button ID="btnInsert" runat="server" Text="INSERT" />
        </div>
    </form>
</body>
</html> 
Protected Sub btnInsert_Click(sender As Object, e As EventArgs) Handles btnInsert.Click
        'insert data into your database
End Sub

If you have any question about my reply, please let me know freely.

Best Regards,

Fei Han

Fei Han – MSFT

<script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#btnInsert").click(function () {
                var ischecked = $("#chkCon").is(":checked");
                //alert(ischecked);
                if (ischecked) {
                    return confirm('Do u need to continue? Its a confirmed Entry !');
                }
                else {
                    return confirm('Do u need to continue? Its a provisional Entry  !');
                }
            })
        })
    </script>

Dear Friend,

Thank you so much for your reply. Can u please send me the Jquery source code. I downloaded a code but when i tested its not working and alert box does’nt appear.

I also tried by converting your jquery code into javascript like below.

<script language="javascript" type="text/javascript">
function InsertCheck() {
var ischecked = document.getElementById(‘<%=chkCon.ClientID%>’).checked;
alert(ischecked);
if (ischecked) {

return confirm(‘Do u need to continue? Its a confirmed Entry !’);
}
else {
return confirm(‘Do u need to continue? Its a provisional Entry !’);
}

}

</script>

<asp:Button ID="btnInsert" runat="server" Text="INSERT" onclientclick="InsertCheck()" />

Here confirm alert box is appearing.If i click ok or cancel, Insert Operation is working. When i click cancel, i need to stay in the same page without insertion to happen. What should i do for that? please help.

sinjumujeeb

Can u please send me the Jquery source code. I downloaded a code but when i tested its not working and alert box does’nt appear.

Just add this

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

sinjumujeeb

<asp:Button ID="btnInsert" runat="server" Text="INSERT" onclientclick="InsertCheck()" />

You should return the value OnClientClick. Like below

<asp:Button ID="btnInsert" runat="server" Text="INSERT" onclientclick="return InsertCheck()" />

Thanks Friend. Now everything is working fine. Below is the javascript code and corrected textbox HTML.

<script language="javascript" type="text/javascript">
function InsertCheck() {
var ischecked = document.getElementById(‘<%=chkCon.ClientID%>’).checked;
if (ischecked) {
return confirm(‘Do u need to continue? Its a confirmed Entry !’);
}
else {
return confirm(‘Do u need to continue? Its a provisional Entry !’);
}
}
</script>

<asp:Button ID="btnInsert" runat="server" Text="INSERT" onclientclick="return InsertCheck()"/>

[RESOLVED]Nested error messages

Hello

I am following an interesting VB.NET tutorial on uploading files. In the tutorial, there are only three files, aspx.vb, Web.config, and the aspx file which looks like this:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<body>
 <form id="form1" runat="server">     
   <div>
    <asp:FileUpload ID="FileUpload1" runat="server" /><br />
         <asp:Label ID="Label1" runat="server"></asp:Label><br />
         <asp:Button ID="Button1" runat="server" Text="Upload" />
     </div>
     </form>
 </body>

There is no reference to Site.Master along the top because there isn’t a Site.master file in the tutorial.

However, I know that if I use the above script in my own upload project, I am going to get an error about HTML nested forms because my project does have a Site.master file. So, my question is how do I use a form, as in the script above, while avoiding those
nested error messages?

Thank you.

Your project should have at-least one form tag.If its there then no need of another form tag.You can use fileupload.If you want to use two forms tag , then use
runat="server" on one form only.

Hello Ashim

Thank you for your reply.

I have this in my Site.master file:

<form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
</Scripts>
        </asp:ScriptManager>

some HTML here

</form>
</body>

So, from the tutorial, I just use?

    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Upload" />
    </div>

Without the <form id="form1" runat="server">?

Thanks again.

Bluenose.

Bluenose

So, from the tutorial, I just use?

    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Upload" />
    </div>

Without the <form id="form1" runat="server">?

Yes.If you have a form tag in master page then there is no need to add another one.You can proceed with the leftover pice of codes in content page.

<div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Upload" />
</div>

Thanks for your help!

Blueie

[RESOLVED]java script function not working after page postback

I am using JavaScript function

and i am using ajax update panel

when the page is post back JavaScript function is not working properly

My code is

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <link rel="stylesheet" href='<%= Page.ResolveUrl("~/Styles/bootstrap-datetimepicker.min.css") %>'/>
<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

<asp:LinkButton ID="LinkbtnReset" 
            runat="server" 
            CssClass="btn btn-primary" onclick="LinkbtnReset_Click">
    <span class="glyphicon glyphicon-refresh"></span> Reset
</asp:LinkButton>

<div class="form-group">

         
         
            <label class="control-label col-md-2 col-xs-12 col-sm-3" for="confirmPassword">Ref No:</label>
            
            <div class="col-xs-12 col-md-2 col-sm-3">
                 <asp:TextBox ID="txtRefNo" CssClass="form-control" runat="server"></asp:TextBox>
            </div>
            <label class="control-label col-xs-12 col-md-1 col-sm-3" for="confirmPassword">Ref Date:</label>
            <div class="col-xs-12 col-md-2 col-sm-3">
                <div class="input-group date form_date " data-date="" data-date-format="dd-M-yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <asp:TextBox ID="txtRefDate" CssClass="form-control" runat="server"></asp:TextBox>                   
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
				<input type="hidden" id="dtp_input2" value="" />
            </div>
         </div>
 </ContentTemplate>
    </asp:UpdatePanel>
    <!-- Script for DatePicker -->
     <script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/bootstrap-datetimepicker.js")%>' charset="UTF-8"></script>
    <script type="text/javascript">
        
                $('.form_date').datetimepicker({
                    language: 'en',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0
                });
          
   
   </script>


   <!-- End Script for datepicker -->
</asp:Content>

first time it is working fine

but when i click the Link button date picker is not working

i tried the following way but no use

protected void Page_PreInIt(object sender, EventArgs e)
    {
        string datescript;
        datescript = " <script type='text/javascript' src='../../Scripts/bootstrap-datetimepicker.js' charset='UTF-8'></script>";
        datescript = datescript + ("<script> $('.form_date').datetimepicker({language: 'en',weekStart: 1,todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,minView: 2,forceParse: 0});</script>");
        ClientScript.RegisterStartupScript(this.GetType(), "myScript", datescript, true);
    }

could anyone slove?

Thanks,

Murali.

Hi,

Try to add the datetimepicker from document ready event i.e.

$(document).ready(function(){
$('.form_date').datetimepicker({
                    language: 'en',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0
                });
});

Hi Murali,

Thanks for your post.

murali krishna14

<script type="text/javascript">
        
                $('.form_date').datetimepicker({
                    language: 'en',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0
                });
          
   
   </script>

Firstly, according to your code, are you sure that the datetimepicker works fine after the DOM has been initialized?

Besides, you could refer to the following code to execute your handler.

$(function () {
    $('.form_date').datetimepicker({
        language: 'en',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
})

Here is some example about Bootstrap datetimepicker, you could refer to it.

Best Regards,

Fei Han

[RESOLVED]clear textbox with different id

Hi,

I have asp.net textboxes width different IDs.

I would like to add linkbutton that will clear all textboxes in the page dynamically.

or other option is to clear all the asp.net form, think it should be easier.

How can I do that?

Hi

Checkout the post below. From javascript you can reset the form as follows:

document.forms[0].reset();

http://forums.asp.net/t/1015988.aspx?Need+help+with+ASP+NET+Reset+button+to+clear+form+fields+non+html+button+

http://www.dotnetcurry.com/showarticle.aspx?ID=78

may be you can try out this,

 $(‘#form_id :text).val(”);

Hi borisre,

Thanks for your post.

borisre

I would like to add linkbutton that will clear all textboxes in the page dynamically.

As for your problem, you could refer to the following sample to empty TextBoxes.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#BtnClean").click(function () {
                $("input[type=text]").val("");
                return false;
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
        <br />
        <asp:LinkButton ID="BtnClean" runat="server">Clean</asp:LinkButton>
    </div>
    </form>
</body>
</html> 

If you have any question  about this issue, please post back freely.

Best Regards,

Fei Han

thanks, it worked great, but I keep on getting the following error after using it:

Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback
or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

[RESOLVED]ASP.NET 4.5 JQUERY VS DATAREADER

Hi, 

I want to inquire that fetching data using jquery auto complete in asp.net pages, is expensive or fetching data by sqlreader , by performance pointview. which is best way.

thank you. 

You need a SqlDataReader (or simialr) if you are using the AutoComplete control.

I think when using jquery, json  (java)  page "postback" not happening.  furthermore I will celebrate the above question that when using alone datareader  for data fetching in page is best way or using jquery-json with autocomplete. 

but there is more than one choice I found in asp.net, auto complete with scriptmanager  or auto complete with jquery json , with webservice and without webservice.

so I feel its confusing, we should identity which is best way performance point view.

thank you.

I think you need to understand the basics of how all of this works before worrying about possible performance issues. You cannot use jQuery to get data from a database. You must use a data access technology. Any technology you use will use a DataReader in
the background. But a forum post is not the best way to clarify all of your misunderstandings.

But if you are so concerned about performance, create your own tests using all of the approaches you seem to have identified and perform your own measurements. You might learn how all this works along the way.