caricare pagine url in dialog con jquery (.dialog('open');)

**italo_anonimo** · 11-11-2014, 05:39

ciao ragazzi, spero possiate aiutarmi,

ho uno script che mi permette di creare un menu (con immagini, label) dinamicamente, tutti con link diversi, funziona, ma adesso vorrei aprirli nella stessa finestra, ho visto che con .dialog('open'); si può fare, solo che non riesco ad adattarlo allo script..

questo è il link al sitotest dov'è c'è il menu, clickando su ogni immagine vorrei aprire il dialog con la url... (al momento tutti link url sono uguali)

http://puchamare.hostei.com/checklis...st-grid/cmenu/

index.hmtl

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
        <title>Gestione Filtri CRUD</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <link type="text/css" rel="stylesheet" href="css/cmenu.css" />
      
      
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
      
        <script>
            $(document).ready(function(){
                cmenu.run('menu');
            });
        </script>
</head>
<body>
<h1 style="color:#5da9d1; font-family: Helvetica;">Gestione Filtri CRUD</h1>
      <ul class="menu">
          <li  action="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid.php" label="CRUD Checklist">
            <img src="images/Man_Black.png" />
          </li>
          <li  action="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid.php" label="CRUD Fascia">
            <img src="images/Man_Brown.png" />
          </li>
          <li   action="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid.php" label="CRUD Frequenza">
            <img src="images/Man_Grey.png" />
          </li>
          <li action="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid.php" label ="CRUD Operatore">
            <img src="images/Man_Red.png" />
          </li>
      </ul>
</body>
</html>

script.js

codice:

cmenu={};
cmenu.run= function(menuName)
{
var menuItems='.'+menuName +' li';
$(menuItems).bind('mouseover',function(event){
var div= $('<div>');
div.addClass('selected');
var label= $('<label>');
label.html($(event.currentTarget).attr('label'));
label.css({position:'relative',top:'128px'});
div.append(label);
$(event.currentTarget).prepend(div);
                div.fadeIn('fast');
            })
$(menuItems).bind('mouseout',function(event){
$(event.currentTarget).find('.selected').fadeOut('fast').remove();
    })
$(menuItems + ' img').bind('click',function(event){
       var action = $(event.currentTarget).parent().attr('action');
       location.href=action;
    });
}

cmenu.css

codice:

.menu{
    list-style: none;
}
.selected{
    background-color: eae7e7;
    z-index:1;
    position:absolute;
    height:150px;
    width: 128px;
    border: 1px solid #b5b5b5;
    display:none;
    text-align: center;
    border-radius:5px;
}
.menu li{
    /* position:relative; */
    float:left;
    height:128px;
    width:128px;
    cursor: pointer;
    border-radius:5px;
}
.menu li img{
    position:absolute;
    z-index:10;
}

forse è qui che dovrò implementare il codice per il .dialog('open'); ??

codice:

  $(menuItems + ' img').bind('click',function(event){
       var action = $(event.currentTarget).parent().attr('action');
       location.href=action;
    });

grazie in anticipo.

Saluti
Italo.

**italo_anonimo** · 12-11-2014, 07:54

ciao ragazzi, ho aggiunto questo codice,

codice:

$(menuItems).click(function() {
    $(event.currentTarget).dialog();
});

carica un dialog con l'immagine e poi sparisce e apre il link su una pagina web normale e non sul dialog...

suggerimenti???

grazie in anticipo.

Saluti

**cavicchiandrea** · 12-11-2014, 10:27

Se intendi la dialog jqueryui da una visita veloce sul sito non mi sembra che accetti come parametri url, mi sembra più un'alternativa agli alert di sistema, pertanto ho qualche dubbio che quello che vuoi fare sia possibile e sicuramente è molto complesso e trovare un esperto che ci provi la vedo dura, forse usando francybox dove puoi inserire un iframe o caricare la pagina in Ajax diventa più facile.

**italo_anonimo** · 13-11-2014, 07:33

ciao ragazzi, ho deciso di usare un'altro script , più semplice , funziona con i link standar "solo link", apre una url all'interno del dialog, ma se voglio creare un link con un <img src=> il dialog si apre ma vuoto

così si apre il dialog ma vuoto:

codice:

<a href="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid_clf.php">
    <img src="images/Man_DBrown.png" class="test"></a><br>

edit: ho trovato "l'errore", dovevo spostare la class="test" sulla riga del <a href="link">
così, adesso funziona al click sull'immagini ....

codice:

<a href="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid_clf.php" class="test"><img src="images/Man_DBrown.png" ></a><br>

web test: http://puchamare.hostei.com/checklis...menu/test.html

cosi <a href=></a>), si apre il dialog con l'url correttamente.

lo script:

test.html

codice:

<html>
  <head>
        <title>Gestione Filtri CRUD</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/cmenu.css" />
      
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script>      
$(document).ready(function () {
    $(".test").click(function () {
        $("#thedialog").attr('src', $(this).attr("href"));
        $("#somediv").dialog({
            width: 500,
            height: 750,
            modal: true,
            buttons: {
            "Chiudi": function () {
            $(this).dialog("close");
            }
            }    
        });
        return false;
    });
});
    
</script>
</head>
 
  <body>

      <h1 style="color:#5da9d1; font-family: Helvetica;">Gestione Filtri CRUD</h1>
      <br>
      
<a href="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid_clf.php">
    <img src="images/Man_DBrown.png" class="test"></a><br><br><br>
      
<a href="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid_clf.php" class="test">CRUD Checklist</a><br>
<a href="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid_faf.php" class="test">CRUD Fascia</a><br>
<a href="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid_frf.php" class="test">CRUD Frequenza</a><br>
<a href="http://puchamare.hostei.com/checklist/attivita/checklist-grid/grid_opf.php" class="test">CRUD Operatore</a><br>
      
<div id="somediv" title="CRUD" style="display:none;">
    <iframe id="thedialog" width="370" height="570"></iframe>
</div>
      
  </body>
</html>

qualche suggerimento??

grazie in anticipo.

Saluti

Discussione: caricare pagine url in dialog con jquery (.dialog('open');)

Strumenti discussione

Ricerca discussione

Visualizza

caricare pagine url in dialog con jquery (.dialog('open');)

Permessi di invio