php - jquery

**thelol** · 2010-09-15, 10:41

Sziasztok!

Már régóta kutatok egy olyan megoldás után, hogy jquery-vel kezeltetni az <a href=''>-et. Hogy lehet megcsinálni, hogy a href tartalmát jquery dolgozza fel?
pl. ha a href='valami.php?id=x'

Előre is köszi!

Hasonló témák:

**Iggy** · 2010-09-15, 16:10

Számomra kicsit érthetetlen, hogy mit akarsz csinálni, egy pontosabb leírás vagy példa segítene.

Első körben: a jQuery javascript, tehát kliens oldali, a PHP meg szerver oldali szkript. Ha valamit egy PHP szkriptnek elküldtél a szerverre, azt nem jQuery-vel fogod feldolgozni (PHP feldolgozza és amit küld választ, azt a kliens jQuery-vel alakítgathatja). Ha meg nem akarod felküldeni a szerverre, hanem helyben akarod jQueryvel kezelni, akkor ne a php-filet használd linkként, hanem simán hívd meg az adott jQuery függvényt valami eseményre.
Pl: <div id="feldolgozando_tartalom" onclick="jquery_fgv_neve( hasznalando_parameter1, hasznalando_parameter2 )">Kattints ide, hogy lefuttasd a jquery_fgv_neve függvényt!</div>

**arth2o** · 2010-09-15, 16:57

A dolog lényege, hogy nem pakolgatunk javascript kódokat a HTML elemekre: diszkrét (unobtrusive) JavaScript.

Hogy működik.
keresi a .nagyonlink class-al rendelkező linkeket és kiszedi belőle a zokszigént.

Ha AJAX-al (jQuery-vel szeretnéd betölteni) szeretnéd feldolgozni az adott link tartalmát akkor:
_http://api.jquery.com/jQuery.ajax/
_http://api.jquery.com/

És ajánlom a figyelmedbe a dokumentációt: _http://jqapi.com/

Kód:

<html>
<head>
    <title>Hello világ!</title>
</head>

<body>
    <a class="nagyonlink" href="http://seo.forum.hu" title="Hajrá SEO fórum">Seo.forum.hu</a>
    <a class="nagyonlink" href="http://seo.forum.hu/oldal" title="Hajrá SEO fórum">Seo.forum.hu 1</a>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
    //ahol szerepel a nagyonlink class lekezeljük a kattintást
    jQuery(".nagyonlink").click(function(){
         
         var linkHrefAttr = jQuery(this).attr("href");
         var linkTitleAttr = jQuery(this).attr("title");
         
         alert(linkHrefAttr + " / " + linkTitleAttr);
         //itt tiéd a pálya a linkHrefAttr
           
         //hogy ne kattintson el az oldalról
         return false;
    });
});

</script>
</body>
</html>

**thelol** · 2010-09-16, 16:03

Köszi szépen

Utánanézegettem, meg a neten is kutatgattam. Találtam egy scriptet, ami egy megadott div-be tölt be tartalmat, az oldal frissítése nélkül. Kicsit átalakítottam a honlapomhoz igazítva. Két gond van vele, amire nem sikerült rájönnöm:
1. ie alatt semmit nem csinál,
2. ha betöltök egy oldalt a scripttel, és az tartalmaz linkeket, azokat már nem hajlandó kezelni, és úgy tölti be, mintha a targetnek _SELF lenne megadva.

Kód:

(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");
});

**arth2o** · 2010-09-19, 07:58

thelol eredeti hozzászólása

Köszi szépen

Utánanézegettem, meg a neten is kutatgattam. Találtam egy scriptet, ami egy megadott div-be tölt be tartalmat, az oldal frissítése nélkül. Kicsit átalakítottam a honlapomhoz igazítva. Két gond van vele, amire nem sikerült rájönnöm:
1. ie alatt semmit nem csinál,
2. ha betöltök egy oldalt a scripttel, és az tartalmaz linkeket, azokat már nem hajlandó kezelni, és úgy tölti be, mintha a targetnek _SELF lenne megadva.

Ez a kód nagyon ismerős, nem az http://opendir.hu oldalról töltötted le?

Mivel többször elhangoztak a forumon hasonló kérdések megosztottam egy progit, lehet hasznodra válik.

Itt a jQuery loadernek egy újabb verzióját eléred:
http://seo.forum.hu/design-f45/making-ajax-applications-crawlable-es-ajax-al-betoltott-t9733/

IE7-ben nem nagyon szeretnek működni az ilyen dolgok.

**thelol** · 2010-09-19, 10:49

Szia!

Köszi szépen

Nem rég én is rátalátam erre a kódra, és elég sokmindent hasznosítottam belőle.

Azóta elég rendesen át lett variálva a kód, mert formokat is kezelni kell. Viszont most felmerült egy olyan gondom, hogy a regisztrációs lapon van egy php - javascript kód, ami megye - város - irányítószám választást oldja meg egymáshoz kapcsolva. Viszont van a body-ba egy onload esemény ami ha már regisztrált tag, akkor beállítja az általa választott helységet. Mivel a body nem fut le többször, így az onload sem fut le. Ezt szeretném kiváltani, hogy mikor a regisztrációs lap betöltődik, a felvitt helység adatok megjelenjenek.

A helységeket kezelő javascript:

Kód:

/* Városok option */
function megyebeall(x){
	db=document.getElementById('megye').options.length
	for(i=0;i<db;i++){
		if (x==document.getElementById('megye').options[i].value){
			document.getElementById('megye').selectedIndex=i;
			megye_csere(i)
			break;
			}
		}
	}
function varosbeall(x){
	db=document.getElementById('varos').options.length
	for(i=0;i<db;i++){
		if (x==document.getElementById('varos').options[i].value){
			document.getElementById('varos').selectedIndex=i;
			varos_csere(i)
			break;
			}
		}
	}

function irszambeall(x){
	db=document.getElementById('irszam').options.length
	for(i=0;i<db;i++){
		if (x==document.getElementById('irszam').options[i].value){
			document.getElementById('irszam').selectedIndex=i;
			break;
			}
		}
	}


function megye_csere(mire){
	mire--
	v=mire
// Régi megye kitörlés
	db=document.getElementById('varos').options.length
	for(i=0;i<db;i++){
		document.getElementById('varos').options[0]=null
	}
// Régi város kitörlés
	db=document.getElementById('irszam').options.length
	for(i=0;i<db;i++){
		document.getElementById('irszam').options[0]=null
	}
	if (mire>=0){
		newOptionName = new Option("--- Kérem válasszon ---", 0);
		document.getElementById('varos').options[0] = newOptionName;
		t=tomb[mire]
		for(i=2;i<t.length;i++){
			newOptionName = new Option(t[i][1], t[i][0]);
			document.getElementById('varos').options[i-1] = newOptionName;
		}
	}
}

function varos_csere(mire){
	mire--
// Régi megye kitörlés
	db=document.getElementById('irszam').options.length
	for(i=0;i<db;i++){
		document.getElementById('irszam').options[0]=null
	}
	if (mire>=0){
		newOptionName = new Option("--- Kérem válasszon ---", 0);
		document.getElementById('irszam').options[0] = newOptionName;
		t=tomb[v][mire+2]
		for(i=2;i<t.length;i++){
			newOptionName = new Option(t[i][1], t[i][0]);
			document.getElementById('irszam').options[i-1] = newOptionName;
		}
	}
}

az eredeti onload esemény php scriptje:

Kód:

<?php
$onload="";
if (isset($_GET['megye'])){
	$onload.="megyebeall(".intval($_GET['megye']).");";
	if (isset($_GET['varos'])){
		$onload.="varosbeall(".intval($_GET['varos']).");";
		if (isset($_GET['irszam']))$onload.="irszambeall(".$_GET['irszam'].");";
		}
	echo ' onload="' .$onload.'" ';
	}
?>

és a helység kezelő php:

Kód:

<?php
$borderdata .= "                     <td width='110' height='20'><b>Megye:</b></td>
                     <td colspan='2'><select name='megye' id='megye' size='1' onchange='megye_csere(this.selectedIndex)' style='width:200px'></select></td>
                  </tr>
                  <tr>
                     <td height='20'><b>Város:</b></td>
                     <td colspan='2'><select name='varos' id='varos' size='1' onchange='varos_csere(this.selectedIndex)' style='width:200px'></select></td>
                  </tr>
                  <tr>
                     <td height='20'><b>Irányítószám:</b></td>
                     <td colspan='2'><select name='irszam' id='irszam' size='1' style='width:200px'></select></td>
                  </tr>
<script>\n";

$sql="SELECT ae_megye.MegyeID, ae_megye.Megyenev, ae_varos.VarosID,
		ae_varos.VarosNev, ae_irszam.IrSzamID, ae_irszam.IrSzamNev 
		FROM ae_megye INNER JOIN ae_varos ON ae_megye.MegyeID=ae_varos.MegyeID
		INNER JOIN ae_irszam ON ae_varos.VarosID = ae_irszam.VarosID
		ORDER BY ae_megye.Megyenev,ae_varos.VarosNev,ae_irszam.IrSzamNev";

$parancs = mysql_query($sql) or die(mysql_error());
$Megye_ID=0;
$Varos_ID=0;
$ki_megye="";
$ki_varos="";
$ki_irszam="";
$ki="tomb=new Array(\n";
while ($sor = mysql_fetch_array($parancs))
	{
	if ($sor['MegyeID']!=$Megye_ID)
		{
		$ki.=$ki_megye . "\t new Array(". $sor['MegyeID'].",'".$sor['Megyenev']."',\n";
		$Megye_ID=$sor['MegyeID'];
		$ki_megye="\t\t)\t),\n";
		$ki_varos="";
		$ki_irszam="";
		}
	if ($Varos_ID!=$sor['VarosID'])
		{
		$ki.=$ki_varos . "\t\t new Array(". $sor['VarosID'].",'".$sor['VarosNev']."',\n";
		$Varos_ID=$sor['VarosID'];
		$ki_varos="\t\t),\n";
		$ki_irszam="";
		}
	$ki.=$ki_irszam . "\t\t\t new Array(". $sor['IrSzamID'].",'".$sor['IrSzamNev']."')\n";
	$ki_irszam=",";
	}
$ki.="\t\t\t)\n\t\t)\n\t)\n";
$borderdata .= $ki;

$borderdata .="
	newOptionName = new Option('--- Kérem válasszon ---', 0);
	document.getElementById('megye').options[0] = newOptionName;
	for(i=0;i<tomb.length;i++){
		newOptionName = new Option(tomb[i][1], tomb[i][0]);
		document.getElementById('megye').options[i+1] = newOptionName;
	}
	v=0
</script>\n";
?>

az onload nálam az $irszam ertékét kapta meg.