jquery ui diálogos y carga de contenido externo

Question

Tengo una lista de páginas que se generan dinámicamente con una declaración de eco. ejemplo:

<a href="<?php echo $action['href']; ?>"><span onclick="jQuery('#category_edit_dialog').dialog('open'); return false"><?php echo $action['text']; ?></a> 

este es el código para hacer que la ventana de diálogo de interfaz de usuario jQuery:

$.ui.dialog.defaults.bgiframe = true; 
$(function() { 
    $("#category_edit_dialog").dialog({ 
     width: 960, 
     hide: 'slide', 
     autoOpen: false, 
    }); 

    $('#open_category_edit_dialog').click(function() { 
     $('#category_edit_dialog').dialog('open'); 
     return false; 
    }); 

}); 

lo que quiero achive es en el momento en que se hace clic en enlaces de un cuadro de diálogo jQuery UI se carga el contenido . Entonces la pregunta es más probable cómo cargar enlaces externos que se generan con php.

Answer 1

Tiene el anclaje HREF int he, así que todo lo que tiene que hacer es usar la función de carga jQuery para vincularlo a HTML y colocarlo en su página.

Suponiendo que el código HTML siguiente para sus enlaces (ese lapso no cerrada extraño en el ancla no tenía sentido para mí):

<a href="<?php echo $action['href']; ?>" class="dialogLink"><?php echo $action['text']; ?></a> 

Se podría modificar Javascript para que funcione de la siguiente manera:

$.ui.dialog.defaults.bgiframe = true; 
$(function() { 
    $("#category_edit_dialog").dialog({ 
     width: 960, 
     hide: 'slide', 
     autoOpen: false 
    }); 

    $('a.dialogLink').click(function() { 
     var url = $(this).attr('href'); 
     $('#category_edit_dialog').load(url, function() { 
      $('#category_edit_dialog').dialog('open'); 
     }); 
     return false; 
    }); 
}); 

La clave es el evento click que se vincula a los enlaces con la clase de diálogoLink. Obtendrá la URL a la que apunta al hacer clic, cargará el contenido encontrado en esa URL en el div de contenido de diálogo que ya tenía en la página, y una vez que tenga el código HTML, se abrirá el cuadro de diálogo.

Answer 2

Usando jQuery puede usar la función load() para realizar una llamada AJAX al servidor para cargar el contenido. Si usted quiere tener todo esto sucede en un evento de clic a continuación, puede hacer algo como esto:

HTML:

<a id="clicker" href="#">Click Here</a> 
<div id="content"></div> 

jQuery:

$(document).ready(function(){ 
     $('#clicker').click(function(){ 
      $('#content').load('URL OF YOUR PHP PAGE'); 
      //start your dialog here 

     }); 

    }); 

Por supuesto, el div contenido en mi ejemplo es el div que está utilizando para crear el diálogo. De esta manera, cuando el usuario hace clic en el enlace, ve el cuadro de diálogo abierto con el contenido cargado desde el servidor.