Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Why is my page refreshing

Posted on 2011-02-16
4
Medium Priority
?
316 Views
Last Modified: 2012-05-11
Hi all,

I have a .net web app I am working on. It is a questionnaire and for one question I need to setup the app to dynamically add text inputs as needed. The user has to click a button each time they want to add inputs and there are 4 inputs that need to be added each time the user clicks the button. My problem is this. While the javascript code I wrote to do this does add the inputs successfully it also refreshes the page afterwards and then the inputs disappear. It doesn't matter what browser I try it on. It's always the same thing. I have tried everything I could think of to stop the refresh and have had no luck so am asking here if anyone knows any reason why that would be happening.

Possible things about the app that would help a diagnosis are the following:

- the entire app is one page with an asp:multiview control on it
- the app is ajax enabled
- the script in issue does not use any ajax
- the button is a standard html image input
- all inputs to be added are standard html text inputs
- another script I wrote for the same page of questionnaire the queston in issue is on also experienced a page refresh until I added the line 'return false;' at the end
-adding that line to the script in issue did not help
this is the script I wrote to dynamically add the inputs. You can see right now the script is only setup to add one input. This is because I thought perhaps the fact that I was adding 4 inputs was causing the problem but switching to only one input did not help   

function addInput(tbName)
        {
          
            
            
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "First Name : <input type='text' size='30' name='myInputs[]'/>";
            newdiv.setAttribute("style","padding-right:65px;");
            document.getElementById(tbName).appendChild(newdiv);
         

           
          
        }


this html snippet shows the view where the faulty question is located. under the header contacts you will find the button that triggers the above script and the div where the inputs are to be added.

<asp:View ID="FirstPage"  runat="server">
                 <table width="100%" cellpadding="10" cellspacing="0" bgcolor='#FFCC33' >
                <tr>
                    <td valign="top" align="center">

                        <table  cellpadding="20" cellspacing="0" bgcolor="#FFFFFF">
                            <tr>
                                <td bgcolor="#FFFFFF" valign="top" style="font-size:12px;color:#000000;line-height:150%;font-family:trebuchet ms;">
                                    <p align="left">
                                    <IMG SRC="Images/PCS_TPA+_965.jpg"  alt="Professional Capital Services" name="editableImg1"   height="81" BORDER="0" align="center" usemap="#editableImg1MapMap" id="IMG1" title="Professional Capital Services"/>
                                        <map name="editableImg1MapMap">
                                            <area shape="rect" coords="545,3,701,29" href="https://www.pcs401k.com" target="_blank"/>
                                        </map> 
                                        </p> 
                                        </p __designer:mapid="c4c">
                                    <table border="0" style="background-color:#FFFFCC;margin:0px;padding:0px;" width="700" cellpadding="3" cellspacing="3">
                                       
                                            <table border="0" value="" width="100%" cellpadding="3" cellspacing="3">
                                                 <tr class="style4" >
                                                        <td class ="style3" style="background-color:#fde9a6;text-align:center;" 
                                                            colspan="6" height="40"  cellpadding="3" cellspacing="3"> 
                                                           TPA Plus+ Registration
                                                           
                                                        </td>
                                                 </tr>
                                                 <tr>
                                                    <td class="style15">
                        
                                                        <h2 style="width: 695px; padding-left:0px;text-align:center;padding-bottom:20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Company 
                                                            Information</h2>
                                                   </td>
                                                 </tr>
                                                 <tr>
                                                    <td class="style15">
                                                 
                                                        <h3 style="width: 695px; height:27px; padding-left:0px;text-align:center;padding:0px;margin:0px;">
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Company Data </h3>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding-left:50px;padding-left:30px;" class="style15">
                                                         <table style="width: 605px;">
                                                              <tr>
                                                               <td style="padding-left:0px;text-align:right;" class="style10">
                                                               Firm Name :</td><td class="style11"><asp:TextBox ID="frmnametb" runat="server" Width="182px" 
                                                                Height="16px" /></td>
                                                                 <td style="padding-right:0px;text-align:right;" class="style12">
                                                              State : </td><td class="style13"><asp:TextBox 
                                                                  ID="statetb" runat="server" Width="182px" MaxLength="10" /></td>
                                                       </tr>
                                                       <tr>
                                                       <td style="padding-left:0px;text-align:right;" class="style10">
                                                               Street Address : </td><td class="style11"><asp:TextBox ID="saddresstb" runat="server" Width="182px" 
                                                                Height="16px" /></td>
                                                                 <td style="padding-right:0px;text-align:right;" class="style12">Zip Code : </td>
                                                           <td class="style13"><asp:TextBox 
                                                               ID="zcodetb" runat="server" Width="182px" /></td>
                                                       </tr>
                                                        <tr>
                                                       <td style="padding-left:0px;text-align:right;" class="style10"> 
                                                               City : </td><td class="style11"><asp:TextBox ID="citytb" runat="server" Width="182px" /></td>
                                                                  <td style="padding-right:0px;text-align:right;" class="style12"> 
                                                               Website Address : </td><td class="style13"><asp:TextBox
                                                                   ID="waddresstb" runat="server" Width="182px"/>
                                                                   
                                                                   </td> 
                                                       </tr>
                                                     <tr>
                                                     <td style="padding-right:0px;text-align:right;" class="style10" > 
                                                            Phone Number : </td><td class="style11"><asp:TextBox ID="phonetb" Width="182px" MaxLength="10" runat="server" /></td><td class="style12" style="color:Gray;font-size:xx-small;font-style:italic;text-align:left;">(no dashes)</td>
                                                            <td class="style13"></td>
                                                      </tr>
                                                      <tr>
                                                      <td style="padding-right:0px;text-align:right;" class="style10" >Fax Number :</td>
                                                          <td class="style11"><asp:TextBox 
                                                              ID="faxtb" runat="server" Width="182px" MaxLength="10" /></td><td class="style12" style="color:Gray;font-size:xx-small;font-style:italic;text-align:left;">(no dashes)</td>
                                                              <td class="style13"></td>
                                                      </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="style15">
                                                        <h3 style="padding-left:0px;width: 695px;text-align:center;padding:0px;margin:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Contacts </h3>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="style15">
                                                      <table style="width: 695px;text-align:center;" >
                                                     
                                                                                       <tr>
                                                          <td style="padding-left:0px;text-align:left;padding-left:156px;" class="style15">
                                                                <div id="cons"></div>
                                                                <input type="image" id="btnAddCt" src="Images/add_contact.png"  onclick="addInput('cons');"/>
                                                        </td>
                                                    </tr>
                                                     </table>
                                                 </td>
                                                 
                                            </tr>
                                            <tr>
                                                
                                            </tr>
                                          </table>
                                            <table border="0"style="background-color:#FFFFCC" width="700" cellpadding="6" cellspacing="6">
                                            </table>
                                            <table style="background-color:#fde9a6;"  cellpadding="3" cellspacing="3" width="100%">   
 
                                                    <tr>
                                                        <td rowspan="3" width="700">
                                                            <div class="buttons" align="center">
                                                                
                                                                &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:ImageButton id="ImageButton1" ImageUrl="~/Images/help.png" CausesValidation="false"  runat="server" Text="Help" />
                                        
                                                                &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:ImageButton ID="btnSaveContinue" ImageUrl="~/Images/next.png" runat="server" BackColor="#07415B" ForeColor="White" Onclick="btnSaveContinue_Click" /> 
                                                                           

                                                                
                                                            </div>
                                                        </td>
                                                    </tr> 
                                            </table>
                                        </div>
                                    </p __designer:mapid="c9b">
                                    </p __designer:mapid="c9c">
                                    </p __designer:mapid="c9d">
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color:#FFCC33;border-top:0px solid #FFFFFF;" valign="top">
                                    <p style="font-size:10px;color:#0D5B7B;line-height:100%;font-family:verdana;text-align:center;">
                                        Need Help?  Contact your Client Relationship Manager ("CRM") at (888)684-6653.<br/>
                                        Copyright (C) 2010 Professional Capital Services, LLC. All rights reserved.
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>  
        </asp:View>

Open in new window

0
Comment
Question by:ITDeptAtPCS
4 Comments
 
LVL 16

Expert Comment

by:Justin Mathews
ID: 34907209
Does it happen only when you click the button? If not, check the HTML source in the browser to see if there is a <META> refresh tag something like:

<META HTTP-EQUIV="REFRESH" CONTENT=n>

0
 
LVL 13

Accepted Solution

by:
gamarrojgq earned 1600 total points
ID: 34907223
Hi,

Try to change your function call to this

onclick="return addInput('cons');"

And at the end of your function add

return false;
0
 
LVL 3

Assisted Solution

by:WebCricket
WebCricket earned 400 total points
ID: 34907234
I assume that there is an error in the javascript that adds an input. When there is an error in the javascript, the page is refreshed. Get firebug for Firefox and use that to debug your javascript.
0
 
LVL 1

Author Comment

by:ITDeptAtPCS
ID: 34907816
1. It happened only when the button was clicked and I did not have any meta tags.
2. My first thought was that there was an error in the javascript but having inspected the script several times I could find nothing obvious and ruled that out as a possibility
3. gamarojgg suggestion worked which is strange since I'm almost positive I tried that before with no luck. Perhaps there was another error I unknowingly cleared up at some point.

Anyway,

thanks to all who commented and happy coding.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

926 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question