Cursor 'wait' in javascript

0

I'm trying to put the cursor in 'wait' mode but I have no result. Here is my code:

        $(document).ready(function () {

    $("#btnTerminar").submit(function () {

        $(this).css('cursor', 'wait');

        setInterval(function () { $(this).css('cursor', 'auto'); }, 3000);

    });

});

When you press a button, that has to be executed and after 3 seconds it returns to normal.

This would be the HTML with visual basic.net

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="Simulacro.Master" CodeBehind="SimuladorExamen.aspx.vb" Inherits="waSimExamen.SimuladorExamen" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <link href="css/demos.css" rel="stylesheet" />
    <script src="jscript/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="jscript/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="jscript/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="jscript/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="jscript/ui/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="jscript/ui/jquery.ui.position.js" type="text/javascript"></script>
    <script src="jscript/ui/jquery.ui.resizable.js" type="text/javascript"></script>
    <script src="jscript/ui/jquery.ui.button.js" type="text/javascript"></script>
    <script src="jscript/ui/jquery.ui.dialog.js" type="text/javascript"></script>
    <link href="jscript/themes/blitzer/jquery.ui.all.css" rel="stylesheet" />

    <script src="jscript/cursor.js" type="text/javascript"></script> <!--ESTE SERIA EL CODIGO DEL CURSOR-->

    <script type="text/javascript">

        function Message(msg) {
            $("#msg").html(msg);

            $("#dialog-message").dialog({
                modal: true,
                buttons: {
                    Aceptar: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%--    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:Timer ID="Timer2" runat="server" Interval="185000"></asp:Timer>
        </ContentTemplate>
    </asp:UpdatePanel>--%>

        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Timer ID="Timer2" runat="server" Interval="185000"></asp:Timer>
        </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
    </asp:UpdatePanel>

          <asp:UpdatePanel ID="UpdatePanel3" runat="server">               
                <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer>
                </ContentTemplate>
            </asp:UpdatePanel>


    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <Triggers>
            <asp:PostBackTrigger ControlID="btnTerminar" />
        </Triggers>
        <ContentTemplate>

            <!-- MESSAGE BOX -->
            <div id="dialog-message" title="Simulacro de examen">
                <p id="msg"></p>
            </div>
            <!-- Fin  del Message Box -->

            <%--<asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer>--%>

            <table width="950">
                <tr>
                    <td height="10"></td>
                </tr>
                <tr>
                    <td align="center" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: medium; font-weight: bold; color: #FFFFFF;" bgcolor="Red" height="35">SIMULACRO DE EXAMEN DE ADMISION</td>
                </tr>
                <tr>
                    <td height="10"></td>
                </tr>
                <tr>
                    <td align="center">
                        <div style="position: fixed; width: 950px;">
                            <table width="90%">
                                <tr>
                                    <td></td>
                                    <td align="center" width="200" bgcolor="Red" height="30">
                                        <asp:Label ID="lblTiempo" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" ForeColor="White"></asp:Label>
                                        <asp:LinkButton ID="lnkVolver" runat="server" CssClass="BotonLink" Font-Bold="True" Font-Names="Arial" Font-Size="Small" ForeColor="White" Visible="False">Volver a empezar</asp:LinkButton>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td height="10">
                        <asp:Label ID="lblMinuto" runat="server" Text="2" Visible="False"></asp:Label>
                        <asp:Label ID="lblSegundo" runat="server" Text="59" Visible="False"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: small">
                        <%-- <asp:Panel ID="Panel1" runat="server" Height="550" Width="92%" ScrollBars="Vertical" BorderStyle="Outset">--%>
                        <%--  <div style="overflow: auto; width: 92%; height: 550px">--%>
                        <asp:ListView ID="lvPreguntas" runat="server">
                            <LayoutTemplate>
                                <table width="90%">
                                    <tr>
                                        <td width="15%"></td>
                                        <td width="15%"></td>
                                        <td width="40%"></td>
                                        <td width="30%"></td>
                                    </tr>
                                    <tr id="itemPlaceholder" runat="server"></tr>

                                </table>
                            </LayoutTemplate>

                            <ItemTemplate>
                                <tr>
                                    <td colspan="4" align="left" style="font-weight: bold" height="50" valign="bottom"><%#Eval("Tema")%></td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <hr />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-weight: bold" valign="top"><%#Eval("Orden")%>.-</td>
                                    <td colspan="3" align="left" style="text-align: justify"><%#Eval("Pregunta")%></td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Image ID="imgA" runat="server" Height="20" Width="20" Visible="False" /></td>
                                    <td valign="top">A.</td>
                                    <td align="left" valign="top">
                                        <asp:RadioButton ID="rdResp1" runat="server" Text='<%#Eval("Opcion1")%>' GroupName="Respuesta" />
                                    </td>
                                    <td rowspan="4">
                                        <asp:Image ID="imgFigura" runat="server" Height="150" /></td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Image ID="imgB" runat="server" Height="20" Width="20" Visible="False" /></td>
                                    <td valign="top">B.<asp:Label ID="lblFigura" runat="server" Text='<%#Eval("Imagen")%>' Visible="False"></asp:Label></td>
                                    <td align="left" valign="top">
                                        <asp:RadioButton ID="rdResp2" runat="server" Text='<%#Eval("Opcion2")%>' GroupName="Respuesta" /></td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Image ID="imgC" runat="server" Height="20" Width="20" Visible="False" /></td>
                                    <td valign="top">C.<asp:Label ID="lblRespuesta" runat="server" Text='<%#Eval("Respuesta")%>' Visible="False"></asp:Label></td>
                                    <td align="left" valign="top">
                                        <asp:RadioButton ID="rdResp3" runat="server" Text='<%#Eval("Opcion3")%>' GroupName="Respuesta" /></td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <asp:Image ID="imgD" runat="server" Height="20" Width="20" Visible="False" /></td>
                                    <td valign="top">D.</td>
                                    <td align="left" valign="top">
                                        <asp:RadioButton ID="rdResp4" runat="server" Text='<%#Eval("Opcion4")%>' GroupName="Respuesta" /></td>
                                </tr>

                            </ItemTemplate>
                        </asp:ListView>
                        <%--   </div>--%>
                        <%--  </asp:Panel>--%>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <table width="70%">
                            <tr>
                                <td align="center" height="50" width="50%">
                                    <asp:Button ID="btnTerminar" runat="server" Text="Finalizar" Width="120px" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small" Height="25px" />
                                </td>
                                <td align="center" width="50%">
                                    <asp:Button ID="btnVolver" runat="server" Text="Volver a empezar" Width="120px" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small" Height="25px" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>
    
asked by Gian Franco Alexis Poma Vidal 26.12.2018 в 17:53
source

2 answers

1
$("btnTerminar").css("cursor", "wait");

This is to place the cursor in wait but only inside the button, however, to refer to the object it is necessary to add # (reference by ID),. (reference by class).

If you want to put the cursor on wait on the whole page, you can refer to your whole body instead of the button:

$("body").css("cursor", "wait");

Likewise, in the setInterval it changes the id of the button by body.

    
answered by 26.12.2018 / 18:52
source
3

You must access the style of the element as follows:

$('#btnTerminar').css( 'cursor', 'wait' );
    
answered by 26.12.2018 в 18:16