Solved

Why is my page refreshing

Posted on 2011-02-16
4
298 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:jmatix
Comment Utility
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 400 total points
Comment Utility
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 100 total points
Comment Utility
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
Comment Utility
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now