Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX, jQuery]Ajax+Thickbox
Forum PHP.pl > Forum > XML, AJAX
giegiel
8.05.2009, 16:25:13
Witam. Do div'a w pliku index.php ładują plik galeria.php w którym jest galeria z thickbox'em. Problem jest taki że thickbox działa jak otworzę osobno galeri.php natomiast jak otwieram plik index.php i w nim ładuje galeria.php do div'a to thickbox nie działa.

Oto skrypt którym ładuje podstrony do div'a:
Kod
   var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
   var loadedobjects=""
   var rootdomain="http://"+window.location.hostname
  
   function ajaxpage(url, containerid){
   var page_request = false
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
   page_request = new XMLHttpRequest()
   else if (window.ActiveXObject){ // if IE
   try {
   page_request = new ActiveXObject("Msxml2.XMLHTTP")
   }
   catch (e){
   try{
   page_request = new ActiveXObject("Microsoft.XMLHTTP")
   }
   catch (e){}
   }
   }
   else
   return false
   page_request.onreadystatechange=function(){
   loadpage(page_request, containerid)
   }
   if (bustcachevar) //if bust caching of external page
   var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
   page_request.open('GET', url+bustcacheparameter, true)
   page_request.send(null)
   }
  
   function loadpage(page_request, containerid){
   if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
   document.getElementById(containerid).innerHTML=page_request.responseText
   }
  
   function loadobjs(){
   if (!document.getElementById)
   return
   for (i=0; i<arguments.length; i++){
   var file=arguments[i]
   var fileref=""
   if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
   if (file.indexOf(".js")!=-1){ //If object is a js file
   fileref=document.createElement('script')
   fileref.setAttribute("type","text/javascript");
   fileref.setAttribute("src", file);
   }
   else if (file.indexOf(".css")!=-1){ //If object is a css file
   fileref=document.createElement("link")
   fileref.setAttribute("rel", "stylesheet");
   fileref.setAttribute("type", "text/css");
   fileref.setAttribute("href", file);
   }
   }
   if (fileref!=""){
   document.getElementsByTagName("head").item(0).appendChild(fileref)
   loadedobjects+=file+" " //Remember this object as being already added to page
   }
   }
   }


index.php

Kod
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
   <html>  
   <head>  
   <script language="JavaScript" src="images/ajax.js"></script>  
   <script type="text/javascript" src="images/jquery.js"></script>  
   <script type="text/javascript" src="images/thickbox.js"></script>  
    
   <link rel="stylesheet" href="images/thickbox.css" type="text/css" media="screen" />  
    
   <title>Carampoocho</title>  
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
   <style type="text/css" media="all">  
   @import "images/style.css";  
   </style>  
   </head>  
   <body onload="javascript:ajaxpage('glowna.php', 'glowna');">  
   <div class="content">  
     <div class="bridge">  
       <div class="title"></div>  
     </div>  
     <div class="nav">  
       <ul>  
         <li><a href="javascript:ajaxpage('glowna.php', 'glowna');">Glówna</a></li>  
           <li><a href="javascript:ajaxpage('historia.html', 'glowna');">Historia</a></li>  
           <li><a href="javascript:ajaxpage('sklad.html', 'glowna');" id="sklad">Skład</a></li>  
           <li><a href="javascript:ajaxpage('dyskografia.html', 'glowna');">Dyskografia</a></li>  
           <li><a href="javascript:ajaxpage('galeria.php', 'glowna');">Galeria</a></li>  
           <li><a href="javascript:ajaxpage('muzyka.html', 'glowna');">Muzyka</a></li>  
           <li><a href="javascript:ajaxpage('koncerty.php', 'glowna');">Koncerty</a></li>  
           <li><a href="javascript:ajaxpage('ksiega_gosci.php', 'glowna');">Księga gości</a></li>  
           <li><a href="http://www.myspace.com/carampoocho">Myspace</a></li>  
           <li><a href="javascript:ajaxpage('kontakt.html', 'glowna');">Kontakt</a></li>  
       </ul>  
     </div>  
     <div class="right">  
       <h2>Najbliższe koncerty:</h2>
    
    
     </div>  
     <div id="glowna" class="center" >  
          
        
     </div>  
        
      
      
      
      
   </div>  
   <div class="footer" id="footer"></div>  
   </body>  
   </html>


galeria.php

Kod
   <html>
   <head>
  
   <script type="text/javascript" src="images/jquery.js"></script>
   <script type="text/javascript" src="images/thickbox.js"></script>
  
   <link rel="stylesheet" href="images/thickbox.css" type="text/css" media="screen" />
  
   </head>
   <body>
   <a href="images/bridge.jpg" class="thickbox" >image #1</a>
  
   <table>
   <?php
   include('panel/polacz.php');
   $id = $_GET['id'];
  
   if($id == null) {
  
       $sql = "SELECT * FROM foldery";
       $result = mysql_query($sql) or die(mysql_error());
  
       echo '<hr>
  
  
   <center><table width="100" cellspacing="5" border="0"><tbody>';
  
       $count = 0;
        echo '<tr height="100">';
       if(mysql_num_rows($result) > 0) {
        while($row = mysql_fetch_array($result)) {
         $folderlist[$row['id']] = $row['folder'];
       }
       foreach($folderlist as $idn) {
       global $count;
         if($count == 3) {
          echo '<tr height="100">';
         }
        echo '<td><center><a href="javascript:ajaxpage(\'galeria.php?id='.$idn.'\', \'glowna\');"><img src="images/directory.png"></a></center>
   ';
        echo '<center>'.$idn.'</center></td>';
        $count = $count + 1;
      if($count == 3) {
      global $count;
      echo '</tr>';
      $count = 0;
     }
    
     }
    }
       echo ' </tbody></table></center>';
   }
  
  
   else{
       echo '<hr>
  
  
   <center><table width="100" cellspacing="5" border="0"><tbody>';
  
   $count = 0;
    $sql = "SELECT nazwa FROM galeria WHERE folder = '$id'";
    $result = mysql_query($sql) or die(mysql_error());
    if(mysql_num_rows($result) > 0) {
     while($row = mysql_fetch_array($result)) {
      $sciezka[$row['id']] = $row['nazwa'];
  
  
  
    foreach($sciezka as $idn) {
     global $count;
     if($count == 4) {
      echo '<tr height="100">';
     }
    echo '<td><a href="galeria/'.$id.'/'.$idn.'" class="thickbox" ><img src="galeria/'.$id.'/thumb/'.$idn.'" border="0" /></a></td>';
      $count = $count + 1;
      if($count == 4) {
      global $count;
      echo '</tr>';
      $count = 0;
     }
    
     }
    }
   }
   echo ' </tbody></table></center>';
   }
   ?>
   </table>
   </body>
   </html>



Proszę o pomoc bo ręce mi opadają, a google nic nie wiedzą ;/ pozdro
dtpteam
12.05.2009, 18:06:46
Ja mam podobny problem , thickbox dziala az do przeladowanie div-a (zapytanie ajax JQuery), po przeladowaniu mimo iz kod w nowej zawartosci diva jest identyczny to thickbox przestaje dzialac
Kasyx
13.05.2009, 12:55:34
Jeśli ma to być tylko plik do doładowania na stronę to lepiej nie stosować znaczników <html> i <body>
I jeśli już stosujesz jQuery to wykonuj Http Get Request właśnie przez jQuery.
Kod html na przykład funkcją jQuery.ajax
Natomiast skrypty JS powinny być załadowane funkcją jQuery.getScript
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.