ugrás a tartalomhoz

jqery div kezelés

thelol · 2010. Szep. 12. (V), 14.32
Sziasztok!

Egy olyan kérdésem lenne, hogy frame-t szeretnék div-el kiváltani. Az index.php hívja meg az osztályokat, illetve config változókat tartalmazó php fileokat. A gond az, hogy mikor a $().load() utasítással meghívom a php file-t, akkor az nem kapja meg se a config változókat, se a classokat. Hogy lehetne megoldani, hogy csak a div frissüljön, de az adatokat is átvegye?
‹ HTML -> RTF, RTF->HTML konverzió JAVA-val Iframe 1 másodpercenkénti újratöltése Ajax-szal ›
 ■
1

GET / POST

Poetro · 2010. Szep. 12. (V), 15.21
Jó lenne tudni, mit takarnak a config változók illetve classok. A $(selector).load('url', parameters) formában adhatsz át paramétereket az url-nek. Amennyiben a parameters objektum, akkor POST kérés fog történni, ha string, akkor GET kérés. Az URL-ben megadhatsz egy selector-t is, és akkor a visszakapott HTML-ből csak a megfelelő rész kerül be. Például:
$(selector).load('url body', {id: 1});
Ekkor a betöltött oldal body eleme (és persze annak tartalma) kerül csak bele a $(selector) általtal kiválasztott elem(ek)be.
2

A változók a mysql-hez

thelol · 2010. Szep. 12. (V), 15.37
A változók a mysql-hez tartozó adatok (host, user, pass). A classokban vannak olyan parancsok, amiket több oldalon is használok, így nem akartam mindig újra beszúrni. Mint pl. egy grafikus keret a szöveg köré. Ezt az index.php-ba hívom meg, és onnan kéne a többi behívott oldalnak elérni.
Az oldal divekre van osztva:
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
ob_start();
header("Content-Type: text/html; charset=utf-8");

require_once("lib/config.php");
require_once("lib/sql.class.php");
Db::connect();
require_once("lib/head.class.php");
require_once("lib/engine.class.php");
require_once("lib/session.class.php");
require_once("lib/error.class.php");

$_SESSION['url'] = $_SERVER['REQUEST_URI'];
$session    = New Session;
$engine        = New Engine;
$error        = New Error;

if($_REQUEST['page']){
    $pages = $engine->page($_REQUEST['page']);
}else{
    $pages    = "pages/page.php";
    $_SESSION['page'] = "proba";
}

require_once("header.php");
?>
<body>
   <div align='center'>
      <div id='container1'>

<!-- Admin menü -->
         <div id='admin'>
<?php
if(isset($_REQUEST['act'])){
    if($_REQUEST['act'] == 'logout'){
        unset($_SESSION['loggedin']);
        unset($_SESSION['u_id']);
        unset($_SESSION['user']);
        unset($_SESSION['u_lvl']);
        session_destroy();
        $engine->go();
        exit();
    }elseif($_REQUEST['act'] == "login"){
        $engine->author();
    }
}
$engine->loginform();
?>
         </div>

<!-- Főmenü -->
         <div id='menu'>
            <div class='menu'><a class='menu' name='menu' id='nagyterem' href='nagyterem' onclick='return show(this);'>Nagyterem</a></div>
            <div class='menu'><a class='menu' name='menu' id='angyalok' href='angyalok' onclick='return show(this);'>Angyalok Terme</a></div>
            <div class='menu'><a class='menu' name='kepzesek' href='kepzesek' onclick='return show(this);'>Képzések Terme</a></div>

         </div>

<!-- Tartalom -->
         <div class='tartalom_container'>
            <div id='tartalom'>
<?php
if(file_exists($pages)){
    $_GET = array();
    $_GET['todo'] = $_REQUEST['todo'];
    include($pages);
}else{
    $error->page_error();
}

?>
            </div>
         </div>
      </div>
   </div>

</body>
</html>


<?php
ob_end_flush();
?>
a java:
function show(obj){
    if(obj.name == "page"){
        $("#tartalom").load("pages/page.php?page="+obj.id);
    }else if(obj.name == "kepzesek"){
        $("#tartalom").load("pages/"+obj.name+".php?todo="+obj.id);
    }
    return false;
}
A page.php tartalma:

<?php
if($_SESSION["page"]){
    $page = $_SESSION["page"];
    $screen = mysql_fetch_array(mysql_query("SELECT * FROM ".$config['sql']['prefix']."sites WHERE (name='".$page."')"));
    $szoveg = str_replace("\\","",$screen[text]);
    if($szoveg != ""){
        $borderdata = $szoveg."\n";
    }else{
        $borderdata =  "Jelenleg nincs még ebben a menüpontban tartalom!<br>
Nézzen vissza később!";
    }
}

$engine->border("",$borderdata,"");
?>
Azt már látom, hogy a változókat nem jól adom át... :) Most ismerkedek igazábol a jqueryvel, és a javascripttel.
3

page.php

Poetro · 2010. Szep. 12. (V), 16.10
A page.php-t kezd ugyanazzal, mint amivel az index.php-t, vagy rakd őket egy közös init.php-be és akkor csak azt kell beincludolni mindkét file elején.
Vagy eleve az index.php-t hívd be a page.php helyett a .load-dal.
4

Megcsináltam, és a

thelol · 2010. Szep. 12. (V), 20.49
Megcsináltam, és a JavaScriptet is átírtam... Most viszont az a gond, hogy az oldal szépen betöltődik... de mihelyt rákattintok egy linkre, a #tartalom div tartalma eltűnik...

function show(sname,sid){
    if(sname == "page"){
        $("#tartalom").fadeOut("fast").load("pages/page.php", {todo: sid}).fadeIn("fast");
    }else if(sname == "kepzesek"){
        $("#tartalom").fadeOut("fast").load("pages/"+sname+".php", {todo: sid).fadeIn("fast");
    }
    return false;
}
A page.php tartalma:

<?php
if($_REQUEST["page"]){
	$page = $_REQUEST["page"];
}else{
	$page = "nagyterem";
}

require_once("lib/header.php");
require_once("lib/init.php");

$screen = mysql_fetch_array(mysql_query("SELECT * FROM ".$config['sql']['prefix']."sites WHERE (name='".$page."')"));
$szoveg = str_replace("\\","",$screen[text]);
if($szoveg != ""){
	$borderdata = $szoveg."\n";
}else{
	$borderdata =  "Jelenleg nincs még ebben a menüpontban tartalom!<br>Nézzen vissza később!\n";
}

$engine->border("",$borderdata,"");
?>
header.php

<?php
	if(isset($_REQUEST['page'])){
		$page = $_REQUEST['page'];
	}else{
		$page = "nagyterem";
	}
?>
                  <table border='0' cellspacing='0' cellpadding='0' width='<?php echo $szelesseg; ?>'>
                     <tr>
                        <td width='101'></td>
                        <td width='350' height='54' background='../images/headers/h_bg.png'><img src='images/headers/<?php echo $page; ?>.png'></td>
                        <td width='101'></td>
                     </tr>
5

eltűnik?

Poetro · 2010. Szep. 12. (V), 22.25
de mihelyt rákattintok egy linkre, a #tartalom div tartalma eltűnik...

Ezt nem teljesen értem. Mit csinálsz, mit vársz mi történjen, mi történik helyette?
6

Linkre kattintva, be kéne

thelol · 2010. Szep. 13. (H), 10.03
Linkre kattintva, be kéne jönnie a page.php-nek. leellenőrzi az adatbázist, hogy van-e benne tatalom. Amennyiben nincs, úgy a "Jelenleg nincs még ebben a menüpontban tartalom!<br>Nézzen vissza később!" üzenetet írja ki. Egy grafikus keretben. Ez fut le akkor is, mikor az index.php jön be. Pl.: rákattintok a menüben a Nagyterem linkre, akkor szépen elhalványul (de van mikor egyszerűen csak törlődik a # tartalom div tartalma), majd előtűnik de azzal a lendülettel el is tűnik tartalom, és csak at index.php háttere látszik... a fadeOut; fadeIn effect csak akkor működik, ha pár másodpercet várok a honlap betöltődése után...
Itt van egykép, hogy néz ki az index.php betöltődése után, illetve így kéne most kinézni ha pl a nagyterem linkre kattintok:
index.php
És így néz ki valójában most:
linkre kattintás után
7

JavaScript

Poetro · 2010. Szep. 13. (H), 16.25
Akkor valamit a JavaScript kódban rontasz el. De mivel még nem mutattál semmi ilyen kódot, esetleg az oldalt, ahol meg lehetne nézni működés közben így nem igazán lehet segíteni.
8

Oldalt nem tudok mutatni

thelol · 2010. Szep. 16. (Cs), 15.46
Oldalt nem tudok mutatni egyenlőre, mert ami a szerveren van, még nem ezzel a módszerre épül. Saját gépen szerkesztem, és ellenőrzöm.

Azóta némileg átírtam a kódot, most így néz ki:

(function($){
   $.fn.clickLoad=function(){
      this.click(function(){
         var link = $(this).attr("href");
         if(link.match(/^[A-Za-z]+:\/\//i)){
            return true;
         }
         if(!link.match(/(html|php)/)){
            return true;
         }
         show(link);
         return false;
      });
   }
})(jQuery);

function show(link){
   $.ajax({
      type: "GET",
      url: link,
        beforeSend: function(d,s){
            $(".loading").fadeIn("slow", function(){
               $(".loading").css("display","block");
            });
         },
      success: function(html){
         $("#tartalom").fadeOut("slow", function(){
            $("#tartalom").fadeIn("slow").html(html);
         });
      },
      error: function(XMLHttpRequest,textStatus,errorThrown){
         $("#tartalom").fadeOut("slow", function(){
            $("#tartalom").fadeIn("slow").html("lib/error.php");
         });
      },
      complete: function(d,s){
         $(".loading").fadeOut("slow", function(){
            $(".loading").css("display","none");
         });
      }
   });
}

$(document).ready(function(){
   $("a").clickLoad();
   show("pages/page.php?page=nagyterem");
});
Gond annyi vele, hogy ha behív egy tartalmat, és azon vannak linkek, azokat már nem kezeli. Illetve az ie-ben valamiért nem akar működni. Firefoxban tökéletesen megy.
9

live / delegate

Poetro · 2010. Szep. 16. (Cs), 16.56
Amennyiben jQuery 1.4.2-t használsz akkor ajánlott a delegate, egyébként a live használata, ugyanis az újonnan megjelent linkek nem kapják meg az eseménykezelődet.
Azaz
$('a').live('click', function(){  
  var link = $(this).attr("href");  
  if(link.match(/^[A-Za-z]+:\/\//i)){  
     return true;  
  }  
  if(!link.match(/(html|php)/)){  
     return true;  
  }  
  show(link);  
  return false;  
});
vagy
$(document.body).delegate('a', 'click', function(){  
  var link = $(this).attr("href");  
  if(link.match(/^[A-Za-z]+:\/\//i)){  
     return true;  
  }  
  if(!link.match(/(html|php)/)){  
     return true;  
  }  
  show(link);  
  return false;  
});
Persze a document.body helyett állhat valami megfelelőbb selector is, és akkor gyorsabb lesz.
10

Köszi :) a delegate bejött :)

thelol · 2010. Szep. 16. (Cs), 17.17
Köszi :) a delegate bejött :) 1.4.2-es jquery-t használok. Hogy lehetne rábeszélni, hogy az internet explorer alatt is működjön?
A beforeSend, és a complete lefut a $.ajax()-nál. Ha kiíratom a html változó tartalmát,
akkor a betöltött oldal kódját adja vissza, viszont kezdet nélküli div-el... Vagyis a végén van egy </div> de az oldal elejéről hiányzik a <div>

Így néz ki a behívandó oldal:

<?php
require_once("../lib/init.php");
include("../lib/head.php");
$screen = mysql_fetch_array(mysql_query("SELECT * FROM ".$config['sql']['prefix']."sites WHERE (name='".$page."')"));
//$szoveg = str_replace("\\","",$screen[text]);
if($szoveg != ""){
	$borderdata = $szoveg."\n";
}else{
	$borderdata =  "Jelenleg nincs még ebben a menüpontban tartalom!<br>Nézzen vissza később!\n";
}

$engine->border("",$borderdata,"");
?>
head.php tartalma: 

<?php
	if(isset($_GET['page'])){
		$page = $_GET['page'];
		if($page == "vasarcsarnok" || $page == 'galeria' && $_GET['id'] != ""){
			$head = "galeria_bg";
		}else{
			$head = "h_bg";
		}
	}else{
		$page = "nagyterem";
	}
?>
                  <table border='0' cellspacing='0' cellpadding='0' width='<?php echo $szelesseg; ?>'>
                     <tr>
                        <td width='101'></td>
                        <td width='350' height='54' background='../images/headers/<?php echo $head; ?>.png' style='background: repeat-none;'><img src='images/headers/<?php echo $page; ?>.png'></td>
                        <td width='101'></td>
                     </tr>
a táblázatot a $engine->border(); zárja be
Próbáltam úgy is, hogy a page.php elejére és végére beszúrtam a <div> </div> tagot,
de a <div>-el nem foglalkozik kiírásnál. Firefoxnál is hiányzik, de az attól még megjeleníti. :)
11

Megoldódott :) bent maradt

thelol · 2010. Szep. 16. (Cs), 17.48
Megoldódott :) bent maradt egy </div> a border classba, és az kavart be :D
Nagyon köszi a segítséget. :)

Bár azt nem értem, hogy az oldal töltés jelző miért ragad be frissítések esetén firefox alatt... előjön az animált gif, de miután betöltődik az oldal, és ottmarad... De ha rákattintok egy linkre, akkor rendesen működik.... oldal elhalványúl, tölktésjelző megjelenik, majd fordítva.