SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating new element <p> in Content form...but gets created on Master form?? Any help

    [CODE]Hello folks,
    New to Javascript.

    I have a master form and 2 content forms.

    I am practicing Javascript using these 2 content forms. I want to create a new element <p> and create a text node for that element. But it gets created in the Master form instead of content form. The javascript that does this is in Content form. How can I get a reference to Content form and create the element on content form instead of Master form?

    This is content form .aspx page:

    Code:
    <%@ Page Title="" Language="C#" MasterPageFile="~/rates.Master" AutoEventWireup="true" CodeBehind="Javascript_DOMTree.aspx.cs" Inherits="rates.Javascript_DOMTree" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    
    <p title="The test paragraph">This is a sample of some <b>HTML you might<br>have</b> in your document</p>
    <a href="http://www.howtocreate.co.uk/tutorials/javascript/dombasics">DOM Tree example</a>
    
        <script language="javascript" type="text/javascript">
    
            var varnewPElement = document.createElement("p");
    
            document.body.appendChild(varnewPElement);
    
            varnewPElement.appendChild(document.createTextNode("Hello world"));
    
           
            
    </script>
    
    
    </asp:Content>
    This is the master form .aspx page
    Code:
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="DMS.master.cs" Inherits="DMS.WebUI.QRMDMS" %>
    
    <!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></title>
      
        <script src="Scripts/TestScript.js" type="text/javascript">
        </script>
    
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
                  
           
            .style6
            {
                border: thin double #000000;
                font-family: 'Times New Roman' , Times, serif;
                font-size: medium;
                width: 158px;
            }
                  
           
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        
         
        
         <table width="100%" class="maintable">
       
            
            <tr>
                            
                <td class="style6"  valign="top" bgcolor="PapayaWhip">
                     <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                         onselectednodechanged="TreeView1_SelectedNodeChanged" 
                         ImageSet="Arrows" Font-Bold="False" Font-Names="Courier New" 
                         ForeColor="Black" border="solid dimgray">
                         <SelectedNodeStyle BorderStyle="Dotted" />
                    </asp:TreeView>
                    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
           
                </td>
                <td class="style5"  valign="top">
                    <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server">
            
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
                  
            </table>  
        
       
        
        </form>
    </body>
    </html>

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It looks like you're simply appending the newly created <p> to the <body>

    If you want to append it to a specific area, you first need to have a reference to that area.

    e.g. let's say you have the following HTML
    HTML Code:
    <body>
        <div id="content"></div>
    </body>
    You could append the para to the #content div like so:
    Code JavaScript:
    var newPara = document.createElement("p");
    newPara.appendChild(document.createTextNode("Hello world"));
     
    document.getElementById("content").appendChild(newPara);

    It's also good to remember that you can't inject content into elements that do not yet exist, and you should never append content to the body when your script is not a direct child of the body as this will break in Internet Explorer 8 and below. (Though you can get around this issue by using an little DOM Ready wrapper so your code will only run when the DOM is fully loaded. For example: https://gist.github.com/1476064)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok John. Thanks much Sir.

    My mistake was, I never intended to create a new P element in Master form. So the code
    document.body.appendChild(varnewPElement); was actually adding the newly created P element to the body element of the master tag.
    there is no body element in the Content form.
    Understood now.

    Greatly appreciate.
    Regards
    nath

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well, that's ok because your content form uses that Master page right?

    This JavaScript will only run in the browser, so it will work with the completely rendered out HTML.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. I use Master Form in the content form.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •