0

Eu fiz um formulario com o JQuery accordion e ao final um botao de enviar. Apos apertar o botao deveria aparecer uma mensagem pop up, mas esta dando erro. Meu pop up aparece quando a pagina se inicia e esse botao esta meio que inutil porque o pop up deveria vir depois. Alquem pode me ajudar?

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script> <!---  jQuery UI “Submit” button --->
        $( function() {
            $( ".widget input[type=submit], .widget a, .widget button" ).button();
            $( "button, input, a" ).click( function( event ) {
                event.preventDefault();
            });
        });
    </script>
    <!---  jQuery UI Dialog message --->
    <script>
        $( function() {
            $( "#dialog" ).dialog();
        });
    </script>


            <div class="widget">
                <input type="Submit" value="Submit"/>
            </div>
            <div id="dialog" title="Order Complete">
                    <p>Your order has been placed.</p>
            </div>
6
  • A pergunta está um pouco confusa. Podia tentar detalhar melhor e adicionar um exemplo visível (usando o jsfiddle por exemplo do problema?
    – Chun
    Commented 2/05/2017 às 19:28
  • Creio que button() não seja um método. Mas gostaria de ver toda esta parte do código para deixar uma resposta mais aprimorada à pergunta.
    – Chun
    Commented 2/05/2017 às 19:40
  • ok vou tentar colocar o codigo de uma forma mais clara Commented 2/05/2017 às 19:42
  • Mas o que eu preciso eh: - criar um botao usando o Jquery; - criar uma caixa de dialogo(pop up) usando o JQuery; - e por final fazer o pop up aparecer somente quando eu clicar nesse botao Commented 2/05/2017 às 19:42
  • Eu obtive essas funcoes por esse site: jqueryui.com/button Commented 2/05/2017 às 19:53

2 Respostas 2

0

Ao usar $( function() {, você está executando a instrução no momento do ready da página e não quando o botão é clicado.

$( function() {
    $( "#dialog" ).dialog();
});

Segue a função para o seu problema:

$(document).ready(function(){
    $("#submit").on("click", function(){
        $("#dialog").dialog();
    });
});
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<div>
  <input id="submit" type="submit" value="submit"/>
</div>

<div id="dialog" title="Basic dialog" style="display:none;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

4
  • conferi aqui e ocorreu um erro que eu me deparei anteriormente. acontece que fazendo dessa forma que vc me falou, nao importa aonde eu clique na minha pagina o pop up esta aparecendo, mesmo se eu clicar no menu index o pop up aparece Commented 2/05/2017 às 20:26
  • @WagnerGualberto Nop, apenas será exibido o popup quando voce clicar sobre um elemento com o id submit.
    – Matheus
    Commented 2/05/2017 às 20:27
  • Eu concordo, mas nao tenho nenhum outro id submit na minha pagina, ja chequei e isso que nao esta entrando na minha cabeca Commented 2/05/2017 às 20:34
  • @WagnerGualberto Wagner, é um código de exemplo, você pode adaptar ele para a sua necessidade.
    – Matheus
    Commented 2/05/2017 às 20:44
0

O problema é que você não chama a função para mostrar seu popup na ação do botão. Tente algo como:

<script> <!---  jQuery UI “Submit” button --->
        $( function() {
            $( ".widget input[type=submit], .widget a, .widget button" ).button();
            $("#submit" ).click( function( event ) {
                event.preventDefault();
                $( "#dialog" ).dialog();
            });
        });
    </script>
5
  • Sim isso funcionou, mas como eu faco para evitar o pop up aparecer quando eu carregar a pagina? autoOpen: false;? Commented 2/05/2017 às 20:15
  • Basta remover a segunda parte do código que começa depois do <!--- jQuery UI Dialog message ---> Commented 2/05/2017 às 20:16
  • sim tanto tirando como colocando o autoOpen funcionou. obrigado, mas ainda tem um pequeno detalhe que esta incomodando meus olhos. Antes de eu cilcar no botao em baixo dele o testo "Your order has been placed." fica amostra. tem como tirar isso e soh mostrar quando o pop up aparecer? Commented 2/05/2017 às 20:20
  • leonardo... conferi aqui e ocorreu um erro que eu me deparei anteriormente. acontece que fazendo dessa forma que vc me falou, nao importa aonde eu clique na minha pagina o pop up esta aparecendo, mesmo se eu clicar no menu index o pop up aparece Commented 2/05/2017 às 20:24
  • Editado a minha resposta. Tente novamente, por favor. Commented 3/05/2017 às 2:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .