locked
Text in <span> flashes and disappears RRS feed

  • Question

  • User1665369602 posted

    I have a web site project I copied from the web, in an attempt to learn about java scripting (and ASP.NET programming in general).  When I test the page, it "sort of" works; that is, it updates the text in the <span> control to the value set by a function.  However, the text appears and disappears in a flash, so that, in an actual web page, it would be quite useless, unhelpful, annoying, etc.  Any help will be appreciated.  The page code is below:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
    
    <!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 id="Head1" runat="server">
        <style type="text/css">
                body { font: 11pt Trebuchet MS;
                       color: #000000;
                       padding-top: 72px;
                       text-align: center; }
                .text { font: 8pt Trebuchet MD }
        </style>
        <title>Simple Web Service</title>
        <script type="text/javascript">
    
        function OnGreetingsClick() 
        {
            Samples.Aspnet.HelloWorld.Greetings(
            $get("NameTextBox").value,
            OnGreetingsComplete);
        }
        
        function OnGreetingsComplete(result)
        {
            var elem = $get("Results");
            elem.innerHTML = result;
        }
         
        </script>
      
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:ScriptManager runat="server">
            <Services>
                <asp:ServiceReference Path="http://localhost/WT_HelloWorldWebService/HelloWorld.asmx" />
            </Services>
        </asp:ScriptManager>
        <h2>Simple Web Service Client</h2>
        <p>Calling a simple service that shows a greeting
         and the server date and time</p>
         <table>
         <tr>
             <td>Name:</td>
             <td>
                <input type="text"
                    id="NameTextBox" />
             </td>
         </tr>
         <tr>
            <td>&nbsp;</td>
            <td>
               <button id="GreetingsButton"
                    onclick="OnGreetingsClick()">Greetings</button>
            </td>
         </tr>
         </table>
        </div>
        <hr />
        <div>
            <span id="Results"></span>
        </div>
        </form>
    </body>
    </html>
    
    
    

    Tuesday, March 28, 2017 5:33 PM

Answers

  • User475983607 posted

    Add type="button" to the button element.

    <button id="GreetingsButton"  type="button" onclick="OnGreetingsClick()">Greetings</button>

    The Button is submitting the form which refreshes the page.  Essentially, the AJAX request is returning just a bit faster than it takes to POST so you see the AJAX response then the page refreshes so it looks like a flash.

    You're browser has a feature called Developer Tools.  You can open Dev tools by pressing the F12 key.  There you will find a Network tab we you'll be able to see the AJAX request and the form POST.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 28, 2017 5:46 PM

All replies

  • User475983607 posted

    Add type="button" to the button element.

    <button id="GreetingsButton"  type="button" onclick="OnGreetingsClick()">Greetings</button>

    The Button is submitting the form which refreshes the page.  Essentially, the AJAX request is returning just a bit faster than it takes to POST so you see the AJAX response then the page refreshes so it looks like a flash.

    You're browser has a feature called Developer Tools.  You can open Dev tools by pressing the F12 key.  There you will find a Network tab we you'll be able to see the AJAX request and the form POST.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 28, 2017 5:46 PM
  • User1665369602 posted

    Thank you, Mbeghard.   That worked.  Two follow-up questions. 

    1) I'm using VisualStudio 2008 and the associated MSDN documentation.  Do you know where in that documentation I might find documentation for attributes of HTML controls, such as the button I was using here (assuming that I'm using the right words in describing it as an HTML control)?  I find using the Search function in MSDN rarely gets me to where I need to go.

    2) The reason for question 1, among more general reasons, is I want to find out why a control named button would need to have its type declared as "button".

    Tuesday, March 28, 2017 6:38 PM
  • User475983607 posted

    1) I'm using VisualStudio 2008 and the associated MSDN documentation.  Do you know where in that documentation I might find documentation for attributes of HTML controls, such as the button I was using here (assuming that I'm using the right words in describing it as an HTML control)?  I find using the Search function in MSDN rarely gets me to where I need to go.

    MSDN is really quite good. It just take time to get a handle on the syntax.  However, this is more a fundamental HTML concept and not so much ASP.NET.

    https://www.w3schools.com/html/html_forms.asp

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

    2) The reason for question 1, among more general reasons, is I want to find out why a control named button would need to have its type declared as "button".

    It just the way it works.  A type="button" is a clickable element in the DOM that does not "submit" a form.  You can do other client side stuff with it like open a modal dialog or make an AJAX request.  

    In contract, you can also disable a type="submit" button's default behavior of submitting a forms via JavaScript/JQuery.

    Tuesday, March 28, 2017 8:39 PM