Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Why is my page refreshing

Posted on 2011-02-16
4
Medium Priority
?
315 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

688 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