Как использовать jquery внутри Tinybox?

Я использую Tinybox 2 для отображения моей статической html-страницы во всплывающем окне. Проблема в том, что я хочу использовать jquery внутри этой статической страницы.Как использовать jquery внутри Tinybox?

здесь ссылка на вилке в:

http://sandbox.scriptiny.com/tinybox2/

вызов к: Tinybox:

<a href="#" onclick="TINY.box.show({url:'photos.php?id=<?php echo $result_set['id'];?> ',width:900,height:400})">Read More </a>

photos.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript"> 
$(document).ready(function(){   //this won't work why? 
    $("#cmdstxt").click(function(){ 
    $("#cmdz").append(" cmds txt"); 
    }); 
}); 


</script> 

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

     <title>HTML</title> 
    <style> 
body { 
position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
right: 10px; 
width:900px; 
margin:0 auto; 

} 


html { 
overflow-y: auto; 
background-color: transparent; 
} 


::-webkit-scrollbar { 
width: 10px; 
height: 10px; 
} 


::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment { 
height: 30px; 
display: block; 
background-color: transparent; 
} 



::-webkit-scrollbar-track-piece { 
background-color: #3b3b3b; 
-webkit-border-radius: 6px; 
} 


::-webkit-scrollbar-thumb:vertical { 
height: 50px; 
background-color: #666; 
border: 1px solid #eee; 
-webkit-border-radius: 6px; 
} 

     div#photo{ 
      width:390px; 
      height:290px; 

      float:left; 
      padding:5px; 
      !background-color:#3B5998; 
     } 
     div#about{ 
      width:450px; 
      height:150px; 
      overflow: scroll; 
      overflow-y: scroll; 
      overflow-x: hidden; 
     } 
     div#cmds{ 
      width:400px; 
      height:300px; 
      float:right; 
      border-left: 2px solid black; 
     } 
     img{ 
      max-height:150px; 
     } 

     .clear{ 
      clear: both; 
     } 


     textarea{ 
      width:300px; 
     } 

    </style> 

    </head> 

    <body> 
<?php 
require_once("includes/database.php"); 
if(isset($_GET['id'])){ 
    $id=$_GET['id']; 
} 

$query="SELECT * 
FROM `photo` 
WHERE `id` ='${id}' "; 
$result=$db->query($query); 
$result_set=$db->fetch($result); 
?>  


     <div id="photo"> 
     <h1><?php echo $result_set['title']; ?></h1>  
     <img src="uploads/<?php echo basename($result_set['path']); ?>" /> 

     <div id="about"><?php echo $result_set['about']; ?></div> 
     </div> 

     <div id="cmds"> 
      <div id="cmdz"> </div> 
      <textarea name="about" id="cmdstxt"></textarea> 
     </div> 
     <p class="clear" /> 

    </body> 
</html>

источник

2012-06-14 sudeep cv

Вы должны написать свой сценарий jQuery внутри вызова успеха. Пример:

$(document).ready(function(){ 
    // When you click on the element below, you will see "clicked". 
    $('.element').click(function(){ 
     alert('clicked'); 
    }); 

    $.ajax({ 
     url: a_cross_domain_url, 
     success: function(data){ 
      // data will return something like : <a class="element">Click me!</a> 
      $('.element').click(function(){ 
       alert('no nono'); 
      }); 

      // Clicking on element will return "no nono". 
      alert(data); 
     } 
    }); 
}); 

<a class="element">Click me!</a>

Событие не будет связываться снова. Существует три способа преодоления этой проблемы:

Используйте .live(), чтобы автоматически связывать события с загруженными элементами AJAX (jQuery 1.3 и выше).
Явное привязку вашего события к вновь загруженным элементам AJAX.
Третий способ - использовать пропаганду событий. Найдите его в блоге jQuery.

источник

2012-06-14 14:17:16

'.live()' устарел от JQuery 1.7 и будет удален в 1.8. Используйте '.on()' вместо –

@JoeBowman +1 Хорошая точка. –

, если вы не возражаете, пожалуйста, объясните это с моим конкретным примером. –

Решена проблема с использованием IFrame: вот мой код:

<a href="#" onclick="TINY.box.show({iframe:'photos.php?id=<?php echo $result_set['id'];?>',boxid:'frameless',width:900,height:450,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})" >Read More </a>

Спасибо.

источник

2012-06-15 12:25:17

Спасибо, sudeep, но он не реагирует. ожидая того же с отзывчивым – Sensa

Как использовать jquery внутри Tinybox?

ответ

Смежные вопросы