2012-02-19 16 views
8

Tengo un sitio web basado en php. Como en, todas las páginas html se envían a través de php.PHP + JQuery - ¿Cómo usar estos dos juntos? Por favor, consulte mi ejemplo

Aquí está un ejemplo sencillo:

<?php 
ob_start(); 

$pageStart = ' 
<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>MY WEBSITE PAGE</title> 
</head> 
<body> 
<p>CONTENT</p> 
</body> 
</html> 
'; 

echo $pageStart; 
exit; 
?> 

lo que me gustaría hacer es hacer uso de un poco de jQuery en esta página.

Así que, naturalmente, mi primer intento fue la de incluir la secuencia de comandos en el interior de la variable php, así:

<?php 
ob_start(); 

$pageStart = ' 
<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript"> 
    var datefield=document.createElement("input") 
    datefield.setAttribute("type", "date") 
    if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker 
     document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n') 
     document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n') 
     document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n') 
    } 
</script> 

<script type="text/javascript"> 
if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget: 
    jQuery(function($){ //on document.ready 
     $('#birthday').datepicker(); 
    }) 
} 
</script> 

</head> 
<body> 
<p>CONTENT</p> 
</body> 
</html> 
'; 

echo $pageStart; 
exit; 
?> 

Ahora, yo uso Dreamweavers editor de código, que debido a la característica de resaltado de sintaxis, se señalan las masas de los errores de sintaxis producidos en esto.

Así que al principio intenté reducir estos errores. Esto falló

así que traté de cambiar la "s de 's, y viceversa, hasta que los errores se habían ido. Esto también fracasó, ya que parece que el guión no validará de esta manera.

así que leí algunos tutoriales y éste nos pareció:.

JavaScript and PHP may each bring great potential to any Web development effort, but they don't always play nice together. Read about the problems.

y la manera en que yo entiendo, es que se necesitaría para incluir el js en lugar de tenerlo como parte de su php directamente

Así que tiene una archivo llamado page.php y otro llamado jquery.php. Así que decidí tratar de modificar esta idea para adaptarla a mi problema.

así que empecé con algo como esto - index.php:

<?php 
ob_start(); 

$pageStart = ' 
<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>MY WEBSITE PAGE</title> 
'. include $_SERVER['DOCUMENT_ROOT'] . '/../../path/to/include/datepicker.php'.' 
</head> 
<body> 
<p>CONTENT</p> 
</body> 
</html> 
'; 

echo $pageStart; 
exit; 
?> 

Y - datepicker.php:

<script language="Javascript"> 
    var datefield=document.createElement("input") 
    datefield.setAttribute("type", "date") 
    if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker 
     document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n') 
     document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n') 
     document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n') 
    } 
</script> 
<script language="Javascript"> 
if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget: 
    jQuery(function($){ //on document.ready 
     $('#birthday').datepicker(); 
    }) 
} 
</script> 

Ahora no hay errores de sintaxis en cualquiera de las páginas, gran ... Así que lo intento, medio esperando que las cosas finalmente funcionen ...

No ... Error grave: no se pudo abrir la secuencia: No existe ningún archivo o directorio, bla, bla. Este error se relaciona con la inclusión que agregué. Así que está bien, aunque el archivo está allí, no está siendo validado como php porque no hay etiquetas de apertura y cierre de php.

Así que los agrego ... Annnd ... ¡Una página llena de errores de sintaxis otra vez!

Así que mi pregunta es la siguiente:

Podrían algunos favor compartir algunos conocimientos y explicar a mí más o menos cómo este proceso funciona realmente. ¿Cuál es el problema con todos los errores de sintaxis y cómo se supone que debes realizar una tarea como esta?

Creo que es posible, y sí, sería mucho más fácil si no estuviera produciendo todo el html a través de php. Pero este es un ejemplo simple y mi diseño real es mucho más complejo. Requiere que las diferentes partes de la página se dividan en variables, para colocar esos bits y fragmentos cuando sea necesario, dinámicamente.

Cualquier contribución, sugerencia o idea sería muy apreciada; y cualquier enlace a páginas o tutoriales que cubran esto también sería muy apreciado.

¡Gracias!

+1

usted debe visitar http://www.w3schools.com/php/default.asp y http: //www.w3schools .com/jQuery/default.asp –

+1

o mucho mejor, ver manual de PHP y páginas jQuery UI/jQuery: ambos tienen un montón ejemplos –

+0

también http://w3fools.com/ –

Respuesta

7

Todo lo que necesita hacer para usar jQuery con PHP es incluir el archivo javascript de jQuery en su documento HTML en la etiqueta head. De hecho, uso PHP junto con jQuery todo el tiempo. Y así es como lo hago. En el código anterior, parece que tienes algunos problemas de escape con tu código. Y también parece que desea mantener el encabezado de la página en una variable PHP e imprimirlo. No tienes que hacer todo eso. Simplemente coloque el texto sin formato en su archivo PHP sin ninguna etiqueta php y funcionará. Además, está utilizando una versión anterior de jQuery. Probablemente debería usar la última versión. Sin embargo, si usted lo necesita almacena en una variable de PHP para que pueda imprimirlo, hacer esto:

lo tanto, aquí hay un código para que pueda empezar.

<?php 
$pageStart = '<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>MY WEBSITE PAGE</title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
    $("#date").datepicker(); 
}); 
</script> 
</head> 
<body> 
<input type="text" id="date" name="date" /> 
</body> 
</html>'; 

print $pageStart; 

?> 
+0

Wow, gracias Ray, voy a tener que echar un vistazo más de cerca a esto. –

+0

Ray, has logrado proporcionarme una comprensión crítica. ¡Y has resuelto mi problema al hacerlo! Me gustaría agradecerte muchísimo por eso! Sin embargo, como un sitio, ¿por qué has usado print over echo? –

+2

no empecé a cabo la programación PHP, PHP es relativamente nuevo para mí (sólo acerca de los últimos 12 años más o menos) Así, el uso de impresión es un hábito que tengo de otros lenguajes de programación. Además, dado que todavía programo en otros idiomas, uso la impresión porque es menos lo que tengo que recordar. La diferencia entre impresión y eco es que la impresión es verdadera y es un poco más lenta (muy pequeña). Además, con impresión, puedo escribir declaraciones como No puedes hacer eso con eco. Entonces, para mí, es una cuestión de programación de estilo y flexibilidad, así como de hábito. Aclamaciones. –

3
<head> 
<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    // javascript & jquery code 
    // even better would be if you would put client code in separate file!!! 
    }); 
</script> 
</head> 
<body> 
<?php 
    echo "bla bla bla"; 
?> 
</body> 

y 1111 para el comentario de @ Heera que se está perdiendo la década de los conceptos básicos.

+1

Gracias por su respuesta, se agradece. Pero te estás perdiendo lo que dije anteriormente. DEBO tener el html dentro de una variable php, esto se debe a que el diseño real es increíblemente complicado y requiere que ciertas partes de la página se generen dinámicamente. Estaba más tratando de entender los errores de sintaxis en esto, más que cualquier otra cosa. –

+1

Sin embargo, estoy de acuerdo en que me falta lo básico, pero más cuando se trata de jquery, esto es algo de lo que no tengo conocimiento. En cualquier caso, muchas gracias por su respuesta! –

1

Use Heredoc. Miles de errores de sintaxis desaparecerán.

Ver la versión heredoc de sus páginas,

  1. http://pastie.org/3412925
  2. http://pastie.org/3412929
  3. http://pastie.org/3412935 // Aquí se han utilizado include ponerse en contacto. include no devuelve nada. Solo incluye. Entonces, cambió de manera diferente.
+0

Echaré un vistazo a estas, ¡muchas gracias! –

+0

Tu referencia a Heredoc ha sido mi introducción. Aunque no es la solución que estaba buscando en este caso. Estoy seguro de que me será útil en algún momento. ¡¡Muchas gracias!! :) –

0

creo que debe ser

. (include ($_SERVER['DOCUMENT_ROOT'] . '/../../path/to/include/datepicker.php')) . 

de otro modo PHP trata de incluir todo el material después hasta que se alcance la l (etiquetas se interpretarán como parte del nombre de archivo).

también, en términos del código php, después se incluye el archivo (en caso de éxito), la instrucción de inclusión se traduce en 1 como un número, en lugar del contenido del archivo.

uso

<? $abc <<<qwerty 
... 
... 
... 
qwerty; 
return qwerty; 
?> 

para todos los archivos que desea incluir

Cuestiones relacionadas