locked
javascript is not getting actual contents. RRS feed

  • Question

  • Hi..

    I am developing an application in silverlight with the mixture of JavaScript and Aspx html. I am facing a problem while try to execute the application.

    I am registering PlexScriptApp it using HtmlPage.RegisterScriptableObject("PlexScriptApp", code); in App.xaml.cs

    Guide please how should i use the slCtrl.Content.PlexScriptApp.Connect($("#nicknameTextBox").val()); in DefaultBehavior.js. Content property doesnt exist in id = "Xaml1".

    JavaScript prompt a error message that

    Line: 103
    Error: Unable to get value of the property 'PlexScriptApp': object is null or undefined

    Take a look please code is definitely long but a minor error ahead. Thanks in advance

    my source is mentioned below:

    ============= DefaultBehavior.js =====================

    $(document).ready(function() {
    
        $("#box").hide();
    
        $("#chatbar").hide();
    
        $("#login").show();
    
        $("#nicknameTextBox").blur(function() {
    
            if($("#nicknameTextBox").val() == "") {
    
                $("#nicknameTextBox").val("Type a nickname");
    
            }
    
        });
    
        $("#nicknameTextBox").focus(function() {
    
            if($("#nicknameTextBox").val() == "Type a nickname") {
    
                $("#nicknameTextBox").val("");
    
            }
    
        });
    
        $("#usersButton").click(function() {
    
            $("#box").slideToggle("fast");
    
        });
    
        $("#connectButton").click(function() {
    
            if($("#connectButton").val() == "connect") {
    
                if($("#nicknameTextBox").val() != "Type a nickname") {
    
                    connect();
    
                }
    
            }
    
            else {
    
                leave();
    
            }
    
        });
    
    });
    
     
    
    var allUsers = null;
    
     
    
    function getUsers(users) {
    
        allUsers = eval(users);
    
        for(i=0; i<allUsers.length; i=i+1) {
    
            var u = allUsers[i];
    
            if(u.Name == $("#nicknameTextBox").val())
    
                $("#listOUsers").prepend("<tr id=\"" + u.ID + "\"><td class=\"me\">" + u.Name + "</td></tr>");
    
            else
    
                $("#listOUsers").append("<tr id=\"" + u.ID + "\"><td class=\"userOnline\">" + u.Name + "</td></tr>");
    
        }
    
        $("#numberOfOnline").html("(" + allUsers.length + ")");
    
        $("#connectButton").val("disconnect");
    
        $("#connectButton").fadeIn("slow");
    
        register($(".userOnline"));
    
    }
    
     
    
    function userLeft(user) {
    
        index = -1;
    
        for(i=0; i<allUsers.length; i=i+1) {
    
            var u = allUsers[i];
    
            if(u.ID == user) {
    
                $("#" + u.ID).remove();
    
                index = i;
    
               
    
                var chatID = "#" + u.Name + "chat";
    
                if($(chatID).length > 0) {
    
                    insertToChatBody(u.Name, "<b><i>" + u.Name + " has left</i></b>");
    
                    $("#" + u.Name + "chatInput").attr("disabled", "disabled");
    
                }
    
                           
    
                break;
    
            }
    
        }
    
        if(index > -1) {
    
            allUsers.splice(index, 1);
    
        }
    
        $("#numberOfOnline").html("(" + allUsers.length + ")");
    
    }
    
     
    
    function userJoined(userJson) {
    
        var user = eval("(" + userJson + ")");
    
        $("#listOUsers").append("<tr id=\"" + user.ID + "\"><td class=\"userOnline\">" + user.Name + "</td></tr>");
    
        allUsers.push(user);
    
        $("#numberOfOnline").html("(" + allUsers.length + ")");
    
        register($("#" + user.ID));
    
        if($("#" + user.Name + "chat").length > 0) {
    
            $("#" + user.Name + "chatInput").removeAttr("disabled");
    
        }
    
    }
    
     
    
    function newMessage(message) {
    
        var chatMessage = eval("(" + message + ")");
    
        for(i=0;i<allUsers.length;i+=1) {
    
            var user = allUsers[i];
    
            if(user.ID == chatMessage.FromID) {
    
                var name = user.Name;
    
                // Make sure it exists
    
                chatboxRegister(name);
    
                // Insert into the text body
    
                var chatBodyID = "#" + name + "chatBody";
    
                insertToChatBody(name, "<b>" + name + ": </b>" + chatMessage.Body);
    
                break;
    
            }
    
        }
    
    }
    
     
    
    function connect() {
    
        $("#login").show();
    
        $("#login").val("Logging in...");
    
        $("#connectButton").fadeOut("slow");
    
        var slCtrl = document.getElementById("Xaml1");
    
        alert(slCtrl);
    
        slCtrl.Content.PlexScriptApp.Connect($("#nicknameTextBox").val());
    
    }
    
     
    
    function leave() {
    
        $("#chatbar").fadeOut("fast");
    
        $("#login").fadeIn("slow");
    
        $("#connectButton").val("connect");
    
        var slCtrl = document.getElementById("Xaml1");
    
        slCtrl.Content.PlexScriptApp.Leave();
    
    }
    
     
    
    function connected() {
    
        $("#login").hide();
    
        $("#chatbar").show();
    
        $("#chatbar").fadeIn("fast");
    
    }
    
     
    
    var currentChatID = null;
    
    var currentChatName = null;
    
    function register(obj) {
    
        $(obj).click(function() { chatboxRegister($(this).text()); });
    
    }
    
     
    
    function chatboxRegister(name) {
    
        var id = "#" + name + "chat";
    
        if($(id).length == 0) {
    
            var chatContent = "<div id='" + name + "chatbox' class='chatbox'>" +
    
    
                            "<div class='titleBar'>Chatting with: " + name + "</div>" +
    
                            "<div id='" + name + "chatBody' class='chatbody'></div>" +
    
                            "<input type='text' id='" + name + "chatInput' class='chatInput' />" +
    
                            "</div>";
    
            var newContent = "<div id='" + name + "chat' class='button removepad'>" +
    
                                "<div id='" + name + "button' class='buttonName'>" + name +
    
                                "</div>" +
    
                                chatContent +
    
                            "</div>";
    
            $("#usersButton").before(newContent);
    
            var chatBoxID = "#" + name + "chatbox";
    
            // Hide the chatbox
    
            $(chatBoxID).hide();
    
            // Show the chatbox when the button is pressed
    
            $("#" + name + "button").click(function() {
    
                if(currentChatID != null && currentChatID != chatBoxID) {
    
                    $(currentChatID).hide();
    
                    $("#" + currentChatName + "button").removeClass("selected");
    
                }
    
                if($(chatBoxID).css("display") == "none") {
    
                    $(chatBoxID).show();
    
                    $("#" + name + "button").addClass("selected");
    
                }
    
                else {
    
                    $(chatBoxID).hide();
    
                    $("#" + name + "button").removeClass("selected");
    
                }
    
                currentChatID = chatBoxID;
    
                currentChatName = name;
    
            });
    
            var chatInputID = "#" + name + "chatInput";
    
            // Wire to the chatbox's typing a message enter
    
            $(chatInputID).keypress(function(e) {
    
                if(e.which == 13) {
    
                    // Send the message
    
                    var text = $(chatInputID).val();
    
                    var userID = null;
    
                    for(i=0;i<allUsers.length;i+=1) {
    
                        var u = allUsers[i];
    
                        if(u.Name == name) {
    
                            userID = u.ID;
    
                            break;
    
                        }
    
                    }
    
                    send(userID, text);
    
                    // Insert into the text body
    
                    var chatBodyID = "#" + name + "chatBody";
    
                    var values = $(chatBodyID).val();
    
                    $(chatInputID).val("");
    
                    var myName = $("#nicknameTextBox").val();
    
                    insertToChatBody(name, "<b>" + myName + ": </b>" + text);
    
                }
    
            });
    
        }
    
    }
    
     
    
    function send(user, text) {
    
        var slCtrl = document.getElementById("Xaml1");
    
        slCtrl.Content.PlexScriptApp.PostMessage(user, text);
    
    }
    
     
    
    function insertToChatBody(username, text) {
    
        var newContent = "<div class='chattext'>" + text + "</div>";
    
        var bodyID = username + "chatBody";
    
        $("#" + bodyID).append(newContent);
    
        var bodyDiv = document.getElementById(bodyID);
    
        bodyDiv.scrollTop = bodyDiv.scrollHeight;
    
    }
    

    ============= LiveChatPage.aspx =====================

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
     
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    
    <head runat="server">
    
        <title>LiveChat</title>
    
         <link href="Default.css" rel="stylesheet" type="text/css" /> 
    
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    
        <script src="DefaultBehavior.js" type="text/javascript"></script>
    
      <%-- <style type="text/css"> html, body { height: 100%; overflow: auto; } body { padding: 0; margin: 0; } #silverlightControlHost { height: 100%; text-align:center; } </style> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript"> function onSilverlightError(sender, args) { var appSource = ""; if (sender != null && sender != 0) { appSource = sender.getHost().Source; } var errorType = args.ErrorType; var iErrorCode = args.ErrorCode; if (errorType == "ImageError" || errorType == "MediaError") { return; } var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ; errMsg += "Code: "+ iErrorCode + " \n"; errMsg += "Category: " + errorType + " \n"; errMsg += "Message: " + args.ErrorMessage + " \n"; if (errorType == "ParserError") { errMsg += "File: " + args.xamlFile + " \n"; errMsg += "Line: " + args.lineNumber + " \n"; errMsg += "Position: " + args.charPosition + " \n"; } else if (errorType == "RuntimeError") { if (args.lineNumber != 0) { errMsg += "Line: " + args.lineNumber + " \n"; errMsg += "Position: " + args.charPosition + " \n"; } errMsg += "MethodName: " + args.methodName + " \n"; } throw new Error(errMsg); } </script>--%>
    
    </head>
    
    <body>
    
        <form id="form1" runat="server" style="height:100%">
    
          <div id="content">       
    
              <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>  
    
             
    
          <div id="silverlightControlHost">
    
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
    
                     <param id="Xaml1" name="source" value="ClientBin/LiveChatUI.xap"/>
    
                     <param name="onError" value="onSilverlightError" />
    
                     <param name="background" value="white" />
    
                     <param name="minRuntimeVersion" value="4.0.50826.0" />
    
                     <param name="autoUpgrade" value="true" />
    
                     <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
    
                             <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
    
                     </a>
    
                </object>     
    
            <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
    
          </div>
    
               
    
         </div>
    
     
    
      <div id="plexbar">
    
                        <div id="container">
    
                            <div id="title">
    
                               <%-- <img alt="" src="Images/N.jpg" height="20" width="20" style="float: left; padding-right: 4px;" />Live Support--%>
    
                                  <img alt="" src="Images/Universe.png" height="20" width="20" style="float: left; padding-right: 4px;" />Post Galaxy
    
                            </div>
    
                            <input id="nicknameTextBox" type="text" class="nickname" value="Type a nickname" />
    
                            <input id="connectButton" type="button" value="connect" class="connect" />
    
                            <div id="chatbar">
    
                                <div id="usersButton" class="button">
    
                                    <div class="usersTitle">
    
                                        <img alt="" src="Images/Dot.png" height="12" width="12" class="titleImage" />
    
                                        Online Friends <strong id="numberOfOnline">(loading)</strong>
    
                                     </div>                                 
    
                                </div>
    
                            </div>
    
                            <div id="login">Welcome</div>
    
                        </div>
    
                    </div>
    
                    <div id="box">
    
                        <div id="plexbox">
    
                            <table id="listOUsers" style="margin:0;padding:0;">
    
                            </table>
    
                        </div>
    
                    </div>
    
     
    
        </form>
    
    </body>
    
    </html>
    
    ===============================================App.xaml.cs==================
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Browser;
    
    namespace LiveChatUI
    {
        public partial class App : Application
        {
            private ScriptCode code;
            public App()
            {
                this.Startup += this.Application_Startup;
                this.Exit += this.Application_Exit;
                this.UnhandledException += this.Application_UnhandledException;
    
                InitializeComponent();
            }
            
            private void Application_Startup(object sender, StartupEventArgs e)
            {
                this.RootVisual = new MainPage();
                code = new ScriptCode();
                HtmlPage.RegisterScriptableObject("PlexScriptApp", code);
            }
    
            private void Application_Exit(object sender, EventArgs e)
            {
                code.Leave();
            }      
            
    
            private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
            {
                // If the app is running outside of the debugger then report the exception using
                // the browser's exception mechanism. On IE this will display it a yellow alert 
                // icon in the status bar and Firefox will display a script error.
                if (!System.Diagnostics.Debugger.IsAttached)
                {
    
                    // NOTE: This will allow the application to continue running after an exception has been thrown
                    // but not handled. 
                    // For production applications this error handling should be replaced with something that will 
                    // report the error to the website and stop the application.
                    e.Handled = true;
                    try 
    	            {	        
    	                string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
    	                errorMsg = errorMsg.Replace('"','\'').Replace("\r\n",@"\n");
                        
                        System.Windows.Browser.HtmlPage.Window.Eval("throw new error (\"unhandled Error in Silverlight 4 Application " + errorMsg + "\");");
                        Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });
    
    	            }
    	            catch (Exception)
    	            {
    		
    		            throw;
    	            }                            
                }
            }        
            private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)
            {
                try
                {
                    string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
                    errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");
    
                    System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight Application " + errorMsg + "\");");
                }
                catch (Exception)
                {
                }
            }
        }
    }
    
     

    • Edited by Mehmood Ahmed Wednesday, December 28, 2011 1:42 PM
    • Moved by Martin_Xie Wednesday, January 4, 2012 10:25 AM Redirect to SilverLight Forum for better support. (From:JScript for the .NET Framework)
    Wednesday, December 28, 2011 10:28 AM

Answers

  • Hi Mehmood,

    As suggested in your another thread, JScript/javascript is used in your app, but I am afraid your problem is mainly on Silverlight.
    Please post in the dedicated Silverlight Forum.
    ASP.NET focused questions are also off-topic here, while many friends here may have experience on them, if someone knows Silverlight and could help solve your issue, it is okay. But if your problem could not be resolved here, I'd like to suggest that you post in the dedicated forum and your thread will be moved into the Off-Topic Form later.
    Thanks for your understanding.

    Have a nice day, 
    Leo Liu [MSFT]
    MSDN Community Support | Feedback to us
    • Marked as answer by Mehmood Ahmed Wednesday, January 4, 2012 7:28 AM
    Thursday, December 29, 2011 5:54 AM

All replies

  • Hi Mehmood,

    As suggested in your another thread, JScript/javascript is used in your app, but I am afraid your problem is mainly on Silverlight.
    Please post in the dedicated Silverlight Forum.
    ASP.NET focused questions are also off-topic here, while many friends here may have experience on them, if someone knows Silverlight and could help solve your issue, it is okay. But if your problem could not be resolved here, I'd like to suggest that you post in the dedicated forum and your thread will be moved into the Off-Topic Form later.
    Thanks for your understanding.

    Have a nice day, 
    Leo Liu [MSFT]
    MSDN Community Support | Feedback to us
    • Marked as answer by Mehmood Ahmed Wednesday, January 4, 2012 7:28 AM
    Thursday, December 29, 2011 5:54 AM
  • Thanks Leo
    maifs
    Thursday, December 29, 2011 6:36 AM