none
Jquery UI Dialog Form com AJAX RRS feed

  • Pergunta

  • Boa Noite gente !

    Estou tentando fazer uma partial view ser carregada dentro de um dialog. Até ai tudo bem. Porém, quando clico em cancelar, o dialog não fecha.

    Meu JavaScript:

     $(function () {
            // we subscribe to the click handler of the link
            $('.editlink').click(function () {        
                // when the anchor is clicked we attach the dialog to the div
                var url = this.href;
                $('#dialog').dialog({
                    modal: true,
                    resize: false,
                    title: "Edição",  
                    open: function (event, ui) { $(this).load(url); },             
                    buttons:
                    {
                        Salvar: function ()
                        {
                            var form = $('form', this);
                            $(form).submit();
                        },
                        
                        Cancelar: function () { $(this).dialog("close"); }
                    }
                    
                });
                return false;
            });
        });
    
        function wireUpForm(dialog) 
        {
            $('form', dialog).submit(function () 
            {
                if (!$(this).valid())
                    return false;
    
                $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) 
                {
                    if (result.success) { $(dialog).dialog('close'); }
                    
                    else
                    {
                        $(dialog).html(result);
                        $.validator.unobtrusive.parse(dialog);
                    }
                }
            });
    
            return false;
        });
    }

    Gostaria da ajuda de vcs para solucionar isso. Obrigado

    quinta-feira, 10 de janeiro de 2013 23:16

Respostas

  • Inicie seu dialog fora do editlink.click:

    var dialog =  $('#dialog').dialog({
                    modal: true,
                    resize: false,
                    title: "Edição",  
                    open: function (event, ui) { $(this).load(url); },             
                    buttons:
                    {
                        Salvar: function ()
                        {
                            var form = $('form', this);
                            $(form).submit();
                        },
                        
                        Cancelar: function () { $(this).dialog("close"); }
                    }
                    
                });

    Depois use a variável dialog para abrir ou fechar o mesmo.

    • Marcado como Resposta _Omnislash_ sexta-feira, 11 de janeiro de 2013 19:02
    sexta-feira, 11 de janeiro de 2013 17:54
    Moderador

Todas as Respostas

  • Uma ajudinha aqui por favor ? xD
    sexta-feira, 11 de janeiro de 2013 17:50
  • Tenta:

     $("#dialog").dialog("close");


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    sexta-feira, 11 de janeiro de 2013 17:53
  • Inicie seu dialog fora do editlink.click:

    var dialog =  $('#dialog').dialog({
                    modal: true,
                    resize: false,
                    title: "Edição",  
                    open: function (event, ui) { $(this).load(url); },             
                    buttons:
                    {
                        Salvar: function ()
                        {
                            var form = $('form', this);
                            $(form).submit();
                        },
                        
                        Cancelar: function () { $(this).dialog("close"); }
                    }
                    
                });

    Depois use a variável dialog para abrir ou fechar o mesmo.

    • Marcado como Resposta _Omnislash_ sexta-feira, 11 de janeiro de 2013 19:02
    sexta-feira, 11 de janeiro de 2013 17:54
    Moderador
  • Tentei 

    $("#dialog").dialog("close");

    $("#dialog").dialog("destroy");

    Mas nenhum dos dois deu certo :(

    sexta-feira, 11 de janeiro de 2013 17:58
  • $(document).ready(function () {
            $("#dialog").dialog({ bgiframe: true, autoOpen: false, modal: true, buttons: { 'OK': overWriteBalance, 'NO': $(this).dialog('close') }
            });
        }); 
    só troca ae pro seu caso do salvar e do cancelar no lugar dos botões desse exemplo ae. 

    Aprendendo Ad Eternum Se minha resposta foi útil por favor marque, se minha resposta respondeu completamente sua dúvida, marque-a como resposta, se houve outra resposta melhor, marque ela. Assim facilita a busca e melhora a organização do fórum e o nosso aprendizado.

    sexta-feira, 11 de janeiro de 2013 18:09
  • Deu certo seguindo a sugestão do João_Prado.

    O código ficou assim:

    $(function () {
        
            var dialog =  $('#dialog').dialog({
                    modal: true,
                    resize: false,
                    autoOpen: false,
                    title: "Edição"               
                });
            
           
            $('.editlink').click(function () {        
               
                var url = this.href;
                (dialog).dialog({ 
                    autoOpen: true,               
                    open: function (event, ui) { $(this).load(url); },             
                    buttons:
                    {
                        Salvar: function ()
                        {
                            var form = $('form', this);
                            $(form).submit();
                        },
                        
                        Cancelar: function () { (dialog).dialog("close"); }
                    }
                    
                });
                return false;
            });       
    
        });
    
        function wireUpForm(dialog) 
        {
            $('form', dialog).submit(function () 
            {
                if (!$(this).valid())
                    return false;
    
                $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) 
                {
                    if (result.success) { $(dialog).dialog('close'); }
                    
                    else
                    {
                        $(dialog).html(result);
                        $.validator.unobtrusive.parse(dialog);
                    }
                }
            });
    
            return false;
        });
    }

    Utilizei os scripts na minha partial view:

    <script src="../../Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

    Muito obrigado pela atenção de todos !!! :D


    • Editado _Omnislash_ sexta-feira, 11 de janeiro de 2013 21:19 Codigo erraDo
    sexta-feira, 11 de janeiro de 2013 19:00