Estou tentando usar o JQuery UI Dialog para substituir a javascript:alert()
caixa feia . No meu cenário, tenho uma lista de itens e, ao lado de cada um deles, teria um botão "excluir" para cada um deles. a instalação do psuedo html será a seguinte:
<ul>
<li>ITEM <a href="url/to/remove"> <span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>
<div id="confirmDialog">Are you sure?</div>
Na parte JQ, no documento pronto, eu primeiro configurava o div para ser uma caixa de diálogo modal com o botão necessário e definia os "a" para serem disparados para confirmação antes da remoção, como:
$("ul li a").click(function() {
// Show the dialog
return false; // to prevent the browser actually following the links!
}
OK, aqui está o problema. durante o tempo de inicialização, a caixa de diálogo não faz ideia de quem (item) irá acioná-lo, e também a identificação do item (!). Como posso configurar o comportamento desses botões de confirmação para, se o usuário ainda escolher SIM, seguirá o link para removê-lo?
jquery
jquery-ui
dialog
modal-dialog
xandy
fonte
fonte
Respostas:
Eu apenas tive que resolver o mesmo problema. A chave para fazer isso funcionar foi que ele
dialog
deve ser parcialmente inicializado noclick
manipulador de eventos para o link com o qual você deseja usar a funcionalidade de confirmação (se desejar usá-lo para mais de um link). Isso ocorre porque o URL de destino do link deve ser injetado no manipulador de eventos para o clique no botão de confirmação. Eu usei uma classe CSS para indicar quais links devem ter o comportamento de confirmação.Aqui está a minha solução, abstraída para ser adequada para um exemplo.
Acredito que isso funcionaria para você, se você pode gerar seus links com a classe CSS (
confirmLink
, no meu exemplo).Aqui está um jsfiddle com o código nele.
No interesse da divulgação completa, observarei que passei alguns minutos nesse problema específico e forneci uma resposta semelhante a essa pergunta , que também não tinha uma resposta aceita na época.
fonte
Descobri que a resposta de Paul não funcionou porque a maneira como ele definia as opções APÓS a caixa de diálogo foi instanciada no evento click estava incorreta. Aqui está o meu código que estava funcionando. Eu não o adaptei para combinar com o exemplo de Paul, mas é apenas a diferença de bigode de gato em termos de alguns elementos que têm nomes diferentes. Você deve conseguir resolver isso. A correção está no configurador da opção de diálogo para os botões no evento de clique.
Espero que isso ajude outra pessoa, pois este post me colocou no caminho certo, achei melhor postar a correção.
fonte
on
em vez declick
, como isso vai continuar a trabalhar se (por exemplo) o campo é redesenhada usando jQuery - api.jquery.com/onEu criei uma função própria para uma caixa de diálogo de confirmação da interface do usuário do jquery. Aqui está o código
Agora, para usar isso em seu código, basta escrever o seguinte
Continue.
fonte
Solução simples e curta que eu apenas tentei e funciona
basta adicionar a classe = "confirmar" ao seu link e ele funciona!
fonte
Esta é a minha solução .. espero que ajude alguém. Está escrito em tempo real, em vez de copypasted, então me perdoe por qualquer erro.
Pessoalmente, eu prefiro esta solução :)
edit: Desculpe .. eu realmente deveria ter explicado mais detalhadamente. Gosto porque, na minha opinião, é uma solução elegante. Quando o usuário clica no botão que precisa ser confirmado primeiro, o evento é cancelado como deve ser. Quando o botão de confirmação é clicado, a solução não é simular um clique no link, mas acionar o mesmo evento jquery nativo (clique) no botão original que seria acionado se não houvesse um diálogo de confirmação. A única diferença é um namespace de evento diferente (neste caso 'confirmado'), para que o diálogo de confirmação não seja mostrado novamente. O mecanismo nativo do Jquery pode assumir o controle e tudo pode ser executado conforme o esperado. Outra vantagem é que ele pode ser usado para botões e hiperlinks. Espero ter sido claro o suficiente.
fonte
$("#btn").trigger("click.confirmed");
Sei que essa é uma pergunta antiga, mas aqui está minha solução usando atributos de dados HTML5 no MVC4:
Código JS:
fonte
Isso vai dar?
fonte
Como acima. Postagens anteriores me colocaram no caminho certo. Foi assim que eu fiz. A idéia é ter uma imagem ao lado de cada linha da tabela (gerada pelo script PHP a partir do banco de dados). Quando uma imagem é clicada, o usuário é redirecionado para a URL e, como resultado, o registro apropriado é excluído do banco de dados enquanto mostra alguns dados relacionados ao registro clicado no Diálogo da UI do jQuery.
O código JavaScript:
Diálogo div:
Link da imagem:
Dessa forma, você pode passar os valores do loop do PHP para a caixa de diálogo. A única desvantagem é usar o método GET para realmente executar a ação.
fonte
Que tal agora:
Eu testei neste html:
Ele remove todo o elemento li, você pode adaptá-lo às suas necessidades.
fonte
(A partir de 22/03/2016, o download na página vinculada não funciona. Estou deixando o link aqui, caso o desenvolvedor o corrija em algum momento porque é um ótimo pequeno plugin. A postagem original segue. alternativa e um link que realmente funciona: jquery.confirm .)
Pode ser muito simples para suas necessidades, mas você pode tentar este plugin de confirmação do jQuery . É realmente simples de usar e faz o trabalho em muitos casos.
fonte
Por mais que eu odeie usar eval, parecia a maneira mais fácil para mim, sem causar muitos problemas, dependendo de circunstâncias diferentes. Semelhante à função settimeout do javascript.
fonte
Eu me deparei com isso e acabei com uma solução, que é semelhante a várias respostas aqui, mas implementada de maneira um pouco diferente. Eu não gostei de muitos pedaços de javascript ou de um espaço reservado div em algum lugar. Eu queria uma solução generalizada, que pudesse ser usada em HTML sem adicionar javascript para cada uso. Aqui está o que eu vim com (isso requer jquery ui):
Javascript:
E, em HTML, não são necessárias chamadas ou referências de javascript:
Como o atributo title é usado para o conteúdo div, o usuário pode até obter a pergunta de confirmação passando o mouse sobre o botão (razão pela qual não usei o atributo title para o bloco). O título da janela de confirmação é o conteúdo da tag alt. O snip javascript pode ser incluído em um arquivo .js generalizado e, simplesmente, ao aplicar uma classe, você tem uma janela de confirmação bonita.
fonte
fonte
NOTA: Representante insuficiente para comentar, mas a resposta do BineG funciona perfeitamente na resolução de problemas de postagem com páginas ASPX, conforme destacado por Homer e eco. Em homenagem, aqui está uma variação usando um diálogo dinâmico.
fonte
Outra variação do exposto acima, onde verifica se o controle é um 'asp: linkbutton' ou 'asp: button' que é processado como dois controles html diferentes. Parece funcionar muito bem para mim, mas não o testou extensivamente.
fonte
Eu estava procurando isso para usar nos botões de link em um ASP.NET Gridview (controle GridView compilado em comandos). Portanto, a ação "Confirmar" na caixa de diálogo precisa ativar um script gerado pelo controle Gridview em tempo de execução. isso funcionou para mim:
fonte
var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);
Isso não faz sentido!Sei que essa pergunta é antiga, mas foi a primeira vez que tive que usar uma caixa de diálogo de confirmação. Eu acho que essa é a maneira mais curta de fazer isso.
Espero que você goste :)
fonte
Pessoalmente, vejo isso como um requisito recorrente em muitos modos de exibição de muitos aplicativos ASP.Net MVC.
Por isso, defini uma classe de modelo e uma vista parcial:
E minha visão parcial:
E então, toda vez que você precisar em uma exibição, basta usar @ Html.Partial (em scripts de seção para que o JQuery seja definido):
O truque é especificar o JQueryClickSelector que corresponderá aos elementos que precisam de um diálogo de confirmação. No meu caso, todas as âncoras com a classe SyLinkDelete, mas poderia ser um identificador, uma classe diferente etc. Para mim, era uma lista de:
fonte
Tópico muito popular e o google encontra isso na consulta "caixa de diálogo jquery perto de qual evento foi clicado". Minha solução lida com eventos SIM, NÃO, ESC_KEY, X corretamente. Quero que minha função de retorno de chamada seja chamada, não importa como o diálogo foi descartado.
É fácil redirecionar o navegador para um novo URL ou executar outra coisa na função retval.
fonte
Tantas boas respostas aqui;) Aqui está a minha abordagem. Semelhante ao uso de eval ().
E o uso se parece com:
fonte
A interface do usuário imediata do JQuery oferece esta solução:
HTML
Você pode personalizá-lo ainda mais, fornecendo um nome para a função JQuery e passando o texto / título que você deseja exibir como parâmetro.
Referência: https://jqueryui.com/dialog/#modal-confirmation
fonte
Bem, esta é a resposta das suas perguntas ...
verifique se você possui o jquery 1.4.4 e o jquery.ui
fonte
LANGUAGE="JavaScript"
), usa caracteres maiúsculos e minúsculos misturados, mistura códigos JS simples com códigos jQuery de forma totalmente desnecessária e define estilos com JS em vez de CSS (feio e semanticamente incorreto) e, a propósito, seu estilo modificação (com JS simples) é absolutamente irrelevante em relação à pergunta original. Você definitivamente deve diminuir e embelezar seu código e se concentrar em responder à pergunta original.Maneira fácil com um toque de javascript
fonte