загрузка определенного идентификатора с дочерней страницы через href на родительской странице

Question

Что я пытаюсь сделать - если это возможно - это загрузить определенный идентификатор с дочерней страницы и отобразить это содержимое в диалоговом окне на родительской странице , Я хотел бы загрузить DIV ID «medical», когда щелкнула медицинская ссылка. Я надеялся поставить какой-то селектор в href, который будет загружать правильный идентификатор.

Javascript:

$(document).ready(function() { 
     var $loading = $('<img src="img/loading.gif" alt="loading" class="loading">'); 
     $('#prod-dialog td a').each(function() { 
      var $dialog = $('<div></div>') 
       .append($loading.clone()); 
      var $link = $(this).one('click', function() { 
       $dialog 
        .load($link.attr('href')) 
        .dialog({ 
         title: $link.attr('title'), 
         width: 300, 
         height: 200, 
         buttons: [ 
        { 
         text: "Ok", 
          click: function() { 
         $(this).dialog("close"); 
          } 
         }, 
        { 
         text: "Cancel", 
          click: function() { 
         $(this).dialog("close"); 
          } 
         } 
        ] 
       }); 
       $link.click(function() { 
        $dialog.dialog('open'); 
        return false; 
       }); 
       return false; 
      }); 
     }); 
    }); 

РОДИТЕЛЕЙ HTML:

<table id="prod-dialog"> 
      <tr> 
       <td><div><img src="img/medical-icon.png" width="26" height="25" /> 
       <p>Medical</p> 
       </div></td> 
       <td><a href="medical.htm"><img src="img/dialog-icon_08.png" width="24" height="23" border="0"/></a></td> 
       </tr> 
</table> 

РЕБЕНОК СТР HTML:

<div style="display: none;" id="medical" title="Medical"> 
<table id="prod-content"> 
     <tr> 
     <td><label>Coverage Level</label></td> 
     <td> 
      <select name="coverlevel" id="coverlevel"> 
       <option value="0" selected>Employee Only</option> 
       <option value="1">Employee + Spouse</option> 
       <option value="2">Employee + Children</option> 
       <option value="3">Employee + Family</option> 
      </select> 
     </td> 
     </tr> 
     <tr> 
     <td><label>Premium</label></td> 
     <td><input name="premium" type="text" size="30"/></td> 
     </tr> 
     </table> 
    </div> 

Answer 1

Ответ заключается в следующем:

$(document).ready(function() { 
    var $loading = $('<img src="img/loading.gif" alt="loading" class="loading">'); 
    $('#prod-dialog td a').each(function() { 
     var $dialog = $('<div></div>') 
      .append($loading.clone()); 
     var $link = $(this).one('click', function() { 
      var $cnt = $(this).attr('href') + " #" + $(this).attr('id') 
      $dialog 
       .load($cnt) 
       .dialog({ 
        title: $link.attr('title'), 
        width: 300, 
        height: 200, 
        buttons: [ 
        { 
         text: "Ok", 
         click: function() { 
          $(this).dialog("close"); 
         } 
        }, 
        { 
        text: "Cancel", 
         click: function() { 
        $(this).dialog("close"); 
         } 
        } 
        ] 
       }); 


      $link.click(function() { 
       $dialog.dialog('open'); 
       return false; 
      }); 
      return false; 
     }); 
    }); 
});