0

have a single look on code based on jquery,the code is running fine but the problem is when ever i click on any radio button to create div it created div but overlap each other ,i added blank row or <BR> but useless any help

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
         <input id="Radio1" type="radio" value="1" name="group1" />1<br />
        <input id="Radio2" type="radio" value="2" name="group1" />2<br />
        <input id="Radio3" type="radio" value="3" name="group1" />3<br />
        <input id="Radio4" type="radio" value="4" name="group1" />4<br />
        <input id="Radio5" type="radio" value="5" name="group1" />5<br />
        <input id="Radio6" type="radio" value="6" name="group1" />6<br />
        <input id="Radio7" type="radio" value="7" name="group1" />7<br />
        
        <input id="btn1" type="button" runat=server value="create div" onclick="createDiv();" />
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>
<script type="text/javascript">

          $(document).ready(function() {
              $('input[name=group1]').change(function() {

                  $('div.dynamicDiv').remove();

                  for (var j = 0; j < $('input[name=group1]:checked').val(); j++) {

                      var d = $('<div />', { "class": "dynamicDiv", id: 'div' + j }).appendTo('body');

                      var t = $('<table width="100%" CellSpacing=0 CellPadding=0 Border=0><tr><td Width="20%" Align = "Left">Name</td><td Width="10%" Align="Left"><SELECT name="SAL"> <OPTION SELECTED value="MR">MR<OPTION value="MRs">MRS<OPTION value="MRs">Ms </SELECT> </td><td Width="70%" Align ="Left"><input type="text"  name="txt_name"+j/></td></tr><tr><td width="20%" align="left">Telephone</td><td align="left" Width="10%"></td><td align="left" width="70%"><input type="text"  name="txt_tel"+j/></td></tr><tr><td width="20%" align="left">Email</td><td align="left" Width="10%"></td><td align="left" width="70%"><input type="text"  name="txt_email"+j/></td></tr></table>').appendTo(d);
                      
                      $('<br/>').appendTo(t); 
                      
                     
                  }

              });

          });


           

    </script>
2
Contributors
4
Replies
6
Views
6 Years
Discussion Span
Last Post by Taywin
0

I'm not sure if this is the case... One possibility, I have a feeling that the new div created has style as 'position:absolute' which allows div to be overlapping and ignores your line break tag. Another possibility (which I have not tested but just think) is that your outer scope element (maybe another div) has a fixed style size, and you attempt to create a bigger size div inside the div. As a result, the auto layout tries to do its job and force multiple div inside the div. Just my two cents.

0

i m sending u whole code ignore method creatediv1 and creatediv ,and correct any mistake

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="gfln1.WebForm2" %>

<!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>Javascript create new div</title>   
    <link href="css/styles.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">  
                  .dynamicDiv {margin:"65px", border-bottom:#ccc solid 0px; height:23px; line-height:20px; padding-left:15px; padding-right:15px;}
          </style>  
           <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
            <script type="text/javascript" language="javascript">
          function createDiv() {  
           var divTag = document.createElement("div"); 
             divTag.id = "div1";  
              divTag.setAttribute("align", "center");
                 divTag.style.margin = "0px auto";  
                  divTag.className = "dynamicDiv";  
                   divTag.innerHTML = "This HTML Div tag is created using Javascript DOM dynamically.";  
                    document.body.appendChild(divTag);
                }

                function createDiv1() {
                    for (var i = 0; i < document.form1.group1.length; i++) {
                        if (document.form1.group1[i].checked) {
                            alert(parseInt(document.form1.group1[i].value));
                            for (var j = 0; j < parseInt(document.form1.group1[i].value); j++) {
                            var divTag = document.createElement("div");
                            divTag.id = "div" + j ;
                            divTag.setAttribute("align", "center");
                            divTag.style.margin = "0px auto";
                            divTag.className = "dynamicDiv";
                            divTag.innerHTML = "div" + j 
                          
                            document.body.appendChild(divTag);
                          

                            }
                          
                        }
                    }


                }  
                      
                 </script>
       
      <script type="text/javascript">

          $(document).ready(function() {
              $('input[name=group1]').change(function() {

                  $('div.dynamicDiv').remove();

                  for (var j = 0; j < $('input[name=group1]:checked').val(); j++) {

                      var d = $('<div />', { "class": "dynamicDiv", id: 'div' + j }).appendTo('body');

                      var t = $('<table width="100%" CellSpacing=0 CellPadding=0 Border=0><tr><td Width="20%" Align = "Left">Name</td><td Width="10%" Align="Left"><SELECT name="SAL"> <OPTION SELECTED value="MR">MR<OPTION value="MRs">MRS<OPTION value="MRs">Ms </SELECT> </td><td Width="70%" Align ="Left"><input type="text"  name="txt_name"+j/></td></tr><tr><td width="20%" align="left">Telephone</td><td align="left" Width="10%"></td><td align="left" width="70%"><input type="text"  name="txt_tel"+j/></td></tr><tr><td width="20%" align="left">Email</td><td align="left" Width="10%"></td><td align="left" width="70%"><input type="text"  name="txt_email"+j/></td></tr></table>').appendTo(d);
                      
                      $('<br/>').appendTo(t); 
                      
                     
                  }

              });

          });


           

    </script>
          
                 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
         <input id="Radio1" type="radio" value="1" name="group1" />1<br />
        <input id="Radio2" type="radio" value="2" name="group1" />2<br />
        <input id="Radio3" type="radio" value="3" name="group1" />3<br />
        <input id="Radio4" type="radio" value="4" name="group1" />4<br />
        <input id="Radio5" type="radio" value="5" name="group1" />5<br />
        <input id="Radio6" type="radio" value="6" name="group1" />6<br />
        <input id="Radio7" type="radio" value="7" name="group1" />7<br />
        
        <input id="btn1" type="button" runat=server value="create div" onclick="createDiv();" />
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>
</html>
0

Line 10 "65px", takes out the double quote (") and change the comma to semicolon. The CSS is not applied correctly.

Edited by Taywin: n/a

0

OK, after trying to convert your jquery to regular JavaScript, I see that your string in the creation contains unexpected result you may not want to. The 'j' will never be replace with the number you want because you place it as a string instead of a variable.

One note here, you are using so many deprecated property assignments (according to W3C), such as align, cellspecing, cellpadding, border, etc. You should use CSS for all of these styles instead of assign a value directly to these properties. Below is an example I converted from yours to regular JavaScript -- cDiv(), removeDynamic(), and getDynamicDivContent() (without asp part & no jquery) -- and I added radio button onchange event (same as .change {} in jquery).

<!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>
  <title>Javascript create new div</title>   
  <style type="text/css">  
  .dynamicDiv {
    margin: 0px auto;
    border-bottom: #ccc solid 0px;
    height: 23px;
    line-height: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }
  </style>  

  <script type="text/javascript" language="javascript">
  function createDiv() {  
    var divTag = document.createElement("div"); 
    divTag.id = "div1";  
    divTag.setAttribute("align", "center");
    divTag.className = "dynamicDiv";  
    divTag.innerHTML = "This HTML Div tag is created using Javascript DOM dynamically.";  
    document.body.appendChild(divTag);
  }

  function cDiv(radioElement) {
    if (radioElement) {
      removeDynamicDiv(radioElement.value)
      var newDiv = document.createElement("div")
      newDiv.id = "myDynamicDiv"+radioElement.value
      newDiv.className = "dynamicDiv"
      newDiv.setAttribute("align", "center");
      newDiv.innerHTML = getDynamicDivContent(radioElement.value)
      document.body.appendChild(newDiv);
    }
  }  

  function removeDynamicDiv(divNum) {
    var el = document.getElementById("myDynamicDiv"+divNum)
    if (el) { el.parentNode.removeChild(el) }
  }

  function getDynamicDivContent(divNum) {
    var out = "<table width=\"100%\" cellSpacing=0 cellPadding=0 border=0>\n"
    out += "<tr>\n<td width=\"20%\" align =\"Left\">Name</td>\n"
    out += "<td width=\"10%\" align=\"Left\">\n"
    out += "<SELECT name=\"SAL\">\n<OPTION SELECTED value=\"MR\">MR</option>\n"
    out += "<OPTION value=\"MRs\">MRS</option\n<OPTION value=\"MRs\">Ms</option>\n"
    out += "</SELECT>\n</td><td width=\"70%\" align =\"Left\">\n"
    out += "<input type=\"text\"  name=\"txt_name"+divNum+"\"/>\n"
    out += "</td>\n</tr>\n<tr><td width=\"20%\" align=\"left\">"
    out += "Telephone</td><td align=\"left\" Width=\"10%\"></td>\n"
    out += "<td align=\"left\" width=\"70%\">\n"
    out += "<input type=\"text\" name=\"txt_tel"+divNum+"\"/>\n</td>\n"
    out += "</tr>\n<tr>\n<td width=\"20%\" align=\"left\">Email</td>\n"
    out += "<td align=\"left\" width=\"10%\"></td>\n"
    out += "<td align=\"left\" width=\"70%\">\n"
    out += "<input type=\"text\" name=\"txt_email"+divNum+"\"/>\n</td>\n</tr></table>"

    return out
  }
  </script>
          
                 
</head>
<body>
  <form id="form1">
  <div>
    <input id="Radio1" type="radio" value="1" name="group1" onchange="cDiv(this)" />1<br />
    <input id="Radio2" type="radio" value="2" name="group1" onchange="cDiv(this)" />2<br />
    <input id="Radio3" type="radio" value="3" name="group1" onchange="cDiv(this)" />3<br />
    <input id="Radio4" type="radio" value="4" name="group1" onchange="cDiv(this)" />4<br />
    <input id="Radio5" type="radio" value="5" name="group1" onchange="cDiv(this)" />5<br />
    <input id="Radio6" type="radio" value="6" name="group1" onchange="cDiv(this)" />6<br />
    <input id="Radio7" type="radio" value="7" name="group1" onchange="cDiv(this)" />7<br />
        
    <input id="btn1" type="button" value="create div" onclick="createDiv()" />
  </div>
  </form>
</body>
</html>

Edited by Taywin: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.