SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

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

    Don't know how use .appendchild to the body of a content form

    Sorry if this is a very simple question for you folks.

    I have a master form and a content form.

    I want to create an element (p) and add some text to it and display it on the content form (not on the master form). With the current code, it always displays on the Master form. I want it to display the newly created p element on the master form.

    This is how the content form looks like:

    Content Form:

    Code:
    <%@ Page Title="" Language="C#" MasterPageFile="~/QRMDMS.Master" AutoEventWireup="true" CodeBehind="Javascript_CreatingAndAddingElementsInForLoop.aspx.cs" Inherits="FHLBSF.QRMDMS.WebUI.Javascript_CreatingAndAddingElementsInForLoop" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <body>
        <p>assa/p>
        
        <script type="text/javascript" language="javascript">
    
            var varPelement = document.createElement("p");
            
            document.body.appendChild(varPelement);
            
            varPelement.appendChild(document.createTextNode("Hello Basam"));
            
            
        </script>
    </body>
    </asp:Content>
    Master Form:
    Code:
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="QRMDMS.master.cs" Inherits="WebUI.DMS" %>
    
    <!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>
      
    
    
        
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
      
    </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
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Could you please review the code your posted above as i can only see one form been the master, the JavaScript code however clearly shows why it's always been appended to the master form as your using document.body which will always append the new element as a child of <body>. To avoid this target the content form directly by using the document.getElementById method, see the below example:

    Code JavaScript:
    var ele = document.createElement('p');
     
    // Append the new <p> element to the content form
    document.getElementById('content-form').appendChild(ele);

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Master form:
    Code:
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="QRMDMS.master.cs" Inherits="FHLBSF.QRMDMS.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>
      
        
        <link href="QRMDMS.css" rel="stylesheet" type="text/css" />
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
      
    </head>
    <body>
        <form id="form1" runat="server">
        
         
        
        <div>
            <img src="media/fhlbsflogo.gif" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Label ID="LabelPageTitle" runat="server" Text="QRM Assist" 
                Font-Bold="True" Font-Size="X-Large"></asp:Label>
                    
        </div>
         <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>
    Code:
    <%@ Page Title="" Language="C#" MasterPageFile="~/QRMDMS.Master" AutoEventWireup="true" CodeBehind="Javascript_CreatingAndAddingElementsInForLoop.aspx.cs" Inherits="FHLBSF.QRMDMS.WebUI.Javascript_CreatingAndAddingElementsInForLoop" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <body>
        <p>assa/p>
        
        <script type="text/javascript" language="javascript">
    
            var varPelement = document.createElement("p");
            
    
            document.getElementById('Conten1').appendChild(varPelement);
    
            varPelement.setAttribute("id", "PElement");
            
            var i = document.getElementById("PElement");
            
            i.setAttribute("Text","Hello world");
            
            
            
            
        </script>
    </body>
    </asp:Content>

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You posted code but i have no idea what your trying to tell me by not saying anything so I'll take a swing, from what i see above the following things are wrong:


    1. Your targeting an element in your DOM which doesn't exist, i believe your JavaScript was meant to say Content1 instead of Conten1
    2. Your re-selecting the the <p> element from the DOM again to set an attribute which doesn't exist, refer to the first snippet of code in your initial post as you correctly created a text node there


    Also as a rule of thumb always set your attributes, text nodes and what ever else before appending it to the DOM as it will stop any flickering that can occur when inserting text and such after it has been appended.


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
  •