locked
java script in ajax response html not working RRS feed

  • Question

  • User1487175000 posted

    Hi,

    I am fetching html from my web service with jquery ajax call. 

    In return html i have script which fetch the weather information.

    When Jquery load the html weather script is not working. What is wrong with it. 

    Here is my aspx markup

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="signageScreens.aspx.cs" Inherits="signage_signageScreens" UICulture="sv-SE" Culture="sv-SE" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Signage</title>
        <link href="../Styles/signagefont.css" rel="stylesheet" />
        <script src="../Scripts/jquery-2.1.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function setScreen() {
                $(document).ready(function () {
                    $.ajax({
                        type: "POST",
                        url: "/Services/basicAction.asmx/getSignageScree",
                        data: "{'deviceID':'" + getParameterByName('deviceName') + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            document.getElementById("screen").innerHTML = r.d;
                        },
                        failure: function (r) {
                            document.getElementById("screen").innerHTML = "<b>503 Service Unavailable</b>";
                        },
                        error: function (r) {
                            document.getElementById("screen").innerHTML = "<b>503 Service Unavailable</b>";
                        }
                    });
                });
            }
            setInterval(setScreen, 25000);
        </script>
        <script type="text/javascript">
            function getParameterByName(name) {
                url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }
        </script>
    </head>
    <body style="background-color: white;">
        <form id="form1" runat="server" style="vertical-align: top;">
            <center>
                    <div id="screen"></div>
                </center>
        </form>
    </body>
    </html>
    

    Following line is in response html. which is not working. its work if i load the page manually.

    <div id="cont_297e40022de8725edb2d65fc59df071c"><script type="text/javascript" async src="https://www.theweather.com/wid_loader/297e40022de8725edb2d65fc59df071c"></script></div>

    I checked return html by ajax in browser developer window, i saw the script but its not working.

    <div id="cont_297e40022de8725edb2d65fc59df071c"><script type="text/javascript" src="https://www.theweather.com/wid_loader/297e40022de8725edb2d65fc59df071c"></script></div>

    Thursday, November 24, 2016 10:19 PM

Answers

  • User1487175000 posted

    It look same what i try to do at my web page but dont know why its not working for me. What i google about this issue and i got some points. 

    First thing i think all javascript register when browser load the page.  So i called the ajax post after page load successully. So once ajax executed and html return. 

    Browser dont know about script added in return html. So what i did i include the java script on the page itself and keep the div in the page which will show the weather.

    So once html return after that i call the getweather script to show the weather.

    here is modified page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="signageScreens.aspx.cs" Inherits="signage_signageScreens" UICulture="sv-SE" Culture="sv-SE" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Signage</title>
        <link href="../Styles/signagefont.css" rel="stylesheet" />
        <script src="../Scripts/jquery-2.1.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function setScreen() {
                $(document).ready(function () {
                    $.ajax({
                        type: "POST",
                        url: "/Services/basicAction.asmx/getSignageScree",
                        data: "{'deviceID':'" + getParameterByName('deviceName') + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            document.getElementById("screen").innerHTML = r.d;
                            getWeather();
                        },
                        failure: function (r) {
                            document.getElementById("screen").innerHTML = "<b>503 Service Unavailable</b>";
                        },
                        error: function (r) {
                            document.getElementById("screen").innerHTML = "<b>503 Service Unavailable</b>";
                        }
                    });
                });
            }
            setInterval(setScreen, 25000);
        </script>
        <script type="text/javascript">
            function getParameterByName(name) {
                url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }
        </script>
        <script type="text/javascript">
            function getWeather() {
                conte = document.getElementById("cont_297e40022de8725edb2d65fc59df071c");
                if (conte) {
                    conte.style.cssText = "width: 554px; color: #868686; background-color:#FFFFFF; border:1px solid #D6D6D6; margin: 0 auto; font-family: Arial;";
                    elem = document.createElement("iframe");
                    elem.style.cssText = "width:554px; color:#868686; height:151px;";
                    elem.id = "297e40022de8725edb2d65fc59df071c";
                    elem.src = "https://www.theweather.com/getwid/297e40022de8725edb2d65fc59df071c";
                    elem.frameBorder = 0;
                    elem.allowTransparency = true;
                    elem.scrolling = "no";
                    elem.name = "flipe";
                    conte.appendChild(elem);
                }
            }
        </script>
    </head>
    <body style="background-color: white;">
        <form id="form1" runat="server" style="vertical-align: top;">
            <center>
                    <div id="screen"></div>
                </center>
        </form>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 25, 2016 12:23 PM

All replies

  • User-1838255255 posted

    Hi shahid.majeed,

    According yo your description and code, I make a sample that can send username to webservice and return html(include script), it run perfect, you can refer to it:

    <head runat="server">
        <title></title>
        <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function GetScript() {
                $.ajax({
                    type: "POST",
                    url: "CS.aspx/getscript",
                    data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            }
            function OnSuccess(response) {
                $("#box").html(response.d);
            }
        </script>
    </head>
    <body style="font-family: Arial; font-size: 10pt">
        <form id="form1" runat="server">
            <div>
                Your Name : 
                <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
                <input id="btnGetscript" type="button" value="get script value"
                    onclick="GetScript()" />
                <div id="box" style="width:50px;height:100px;border:1px solid red;"></div>
            </div>
        </form>
    </body>
    [System.Web.Services.WebMethod]
        public static string getscript(string name)
        {
           return "<div>here</div><script language=javascript>alert('Hi ,'+'"+name+"');</script>";
        }

    Result:

    Best Regards,

    Eric Du

    Friday, November 25, 2016 5:15 AM
  • User1487175000 posted

    It look same what i try to do at my web page but dont know why its not working for me. What i google about this issue and i got some points. 

    First thing i think all javascript register when browser load the page.  So i called the ajax post after page load successully. So once ajax executed and html return. 

    Browser dont know about script added in return html. So what i did i include the java script on the page itself and keep the div in the page which will show the weather.

    So once html return after that i call the getweather script to show the weather.

    here is modified page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="signageScreens.aspx.cs" Inherits="signage_signageScreens" UICulture="sv-SE" Culture="sv-SE" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Signage</title>
        <link href="../Styles/signagefont.css" rel="stylesheet" />
        <script src="../Scripts/jquery-2.1.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function setScreen() {
                $(document).ready(function () {
                    $.ajax({
                        type: "POST",
                        url: "/Services/basicAction.asmx/getSignageScree",
                        data: "{'deviceID':'" + getParameterByName('deviceName') + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            document.getElementById("screen").innerHTML = r.d;
                            getWeather();
                        },
                        failure: function (r) {
                            document.getElementById("screen").innerHTML = "<b>503 Service Unavailable</b>";
                        },
                        error: function (r) {
                            document.getElementById("screen").innerHTML = "<b>503 Service Unavailable</b>";
                        }
                    });
                });
            }
            setInterval(setScreen, 25000);
        </script>
        <script type="text/javascript">
            function getParameterByName(name) {
                url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }
        </script>
        <script type="text/javascript">
            function getWeather() {
                conte = document.getElementById("cont_297e40022de8725edb2d65fc59df071c");
                if (conte) {
                    conte.style.cssText = "width: 554px; color: #868686; background-color:#FFFFFF; border:1px solid #D6D6D6; margin: 0 auto; font-family: Arial;";
                    elem = document.createElement("iframe");
                    elem.style.cssText = "width:554px; color:#868686; height:151px;";
                    elem.id = "297e40022de8725edb2d65fc59df071c";
                    elem.src = "https://www.theweather.com/getwid/297e40022de8725edb2d65fc59df071c";
                    elem.frameBorder = 0;
                    elem.allowTransparency = true;
                    elem.scrolling = "no";
                    elem.name = "flipe";
                    conte.appendChild(elem);
                }
            }
        </script>
    </head>
    <body style="background-color: white;">
        <form id="form1" runat="server" style="vertical-align: top;">
            <center>
                    <div id="screen"></div>
                </center>
        </form>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 25, 2016 12:23 PM