Aprire in una dialog jquery una pagina html o apsx

martedì 10 luglio 2012 - 00.31

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

trinity Profilo | Guru

3.465 messaggi | Data Invio: mar 10 lug 2012 - 00:31

Buona sera,
dovrei aprire con un jquery dialog una pagina aspx ossia all'interno del dialog caricare questa pagina..

Ho trovato in rete un esempio che funziona ma io dovrei caricare la dialog attraverso un'imagebutton invece nell'esempio che vi posterò utilizza un semplice link:

 Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

funziona testato solo che qui quando viene chiamato questo codice: " .load($link.attr('href') + ' #content')" io lo devo gestire da imagebutton e quest'ultimo il href non lo possiede

come posso fare?

ciao
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

1.186 messaggi | Data Invio: mar 10 lug 2012 - 09:08

in aspx:

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/tua_pagina.aspx">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Icons/24x24/accept.png" />
</asp:HyperLink>

in html:

<a href="tua_pagina.aspx">
<img alt="" src="Icons/24x24/accept.png" />
</a>

Ciao

alexmed

trinity Profilo | Guru

3.465 messaggi | Data Invio: mar 10 lug 2012 - 11:04

Allora

il codice script che utilizzo è il seguente:

 $(function() {
        $('#open').click(function(event) {
        var $link = $(this);
        var $dialog = $('<div></div>')
        .load($link.attr('href') + ' #content')
        .dialog({
        autoOpen: false,
        title: "Gestione arrivi",
        show: "blind",
        hide: "explode",
        resizable: "false",
        width: "950",
        hight: "100%",
        top: "0"
        });
        $dialog.dialog('open');
        event.preventDefault();
        });
        });

l'ho preso e modificato da questo sito: http://gabrieleromanato.com/2011/11/jquery-caricare-una-pagina-in-una-finestra-di-dialogo/

purtroppo il codice html che mi hai passato in questo script non funziona, vuole per forza un codice del genere:

<p><a href="arrivi.aspx" id="open" title="Pagina di test">Carica </a></p>

comunque stavo facendo delle prove e mi succede questo prima di tutto la dialog resta al centro della pagina pertanto caricando al suo interno la pagina aspx, se ne visualizza metà e devo spostarla, non riesco a trova il comando per gestire il top della dialog...poi stavo facendo delle prove quando ho caricato la pagina, questa ha una serie di controlli ajax ed altro tipo il calendar ecc appena clicco sul calendar mi si ricarica la pagina aspx uscendo dalla dialog...

Puoi darmi qualche informazione in merito?

Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

1.186 messaggi | Data Invio: mar 10 lug 2012 - 12:01

Ciao,
Ho fatto delle prove e mi funziona con tutte e due le soluzioni: ovviamente devi adattarle.
Ad esempio per la soluzione in aspx potresti sostituire nel codice java il riferimento al controllo a cui assegnare la funzione:
In questa riga del codice:

$('#open').click(function(event) { ........

al posto di "#open" (il cancelletto va a cercare l'id dell'elemento) metti ".ciccio" (va a cercare l'elemento che ha quella classe).
Quindi:

<script type="text/javascript">
$(function () {

$('.ciccio').click(function (event) {

var $link = $(this);

var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600
});

$dialog.dialog('open');

event.preventDefault();

});

});
</script>

e quindi assegni la classe ciccio al controllo HyperLink:

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="tua_pagina.aspx" CssClass="ciccio">
<asp:Image ID="Image1" runat="server" ImageUrl="Icons/24x24/accept.png" />
</asp:HyperLink>

Poi devi impostare nella pagina che carichi il div "content" con larghezza ed altezza uguali (o simili) alla larghezza ed altezza che imposti nel codice javascript, quindi se il div "content" ha width: 600px e heigt: 400px il codice javascript sarà:

$(function() {
$('.ciccio').click(function(event) {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
title: "Gestione arrivi",
show: "blind",
hide: "explode",
resizable: "false",
width: "600px",
hight: "400px",
top: "0"
});
$dialog.dialog('open');
event.preventDefault();
});
});

Infine, per quanto riguarda i controlli AJAX o no sulla pagina che carichi ... vedi risposta altro post (ModalPopup): devi mettere sempre (nella pagina che carichi) tutto dentro un UpdatePanel per evitare il postpabk di tutta la pagina.

Ciao

alexmed

trinity Profilo | Guru

3.465 messaggi | Data Invio: mer 11 lug 2012 - 10:58

Ciao e prima di tutto grazie del tuo aiuto...

funziona...solo che quando si crea la dialog essendo la div alta ha una height di 800px sembra come se andasse a scatti e non fosse fluida...sai il perchè?

mica puoi vedere anche l'altro mio post

?
http://www.dotnethell.it/forum/messages.aspx?ThreadID=41414

Ciao
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !