Estoy realizando un sistema donde requiero de una agenda para programar citas.
Basandome en week calendar y en un ejemplo encontrado en
[URL="http://www.taringa.net/posts/apuntes-y-monografias/8534134/Programa-Tu-Calendario_-con-Php_-Mysql_-Javascript-y-Ajax.html"]http://www.taringa.net/posts/apuntes-y-monografias/8534134/Programa-Tu-Calendario_-con-Php_-Mysql_-Javascript-y-Ajax.html[/URL]
el cual modifique para mi aplicación web.
Pero necesito realizar una busqueda por autocompletado basandome igual en jquery, la cual funciona perfectamente, la pregunta es
¿ como introducir este autocompletado al campo para agregar una nueva fecha o nueva cita en la agenda?
la linea de codigo en la que según yo tengo que ingresar el autocompletado es
var titleField = $dialogContent.find("input[name='title']").val(BuscarPaciente);
que se encuentra en code.js
A continuación anexo los codigos
HTML
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='reset.css' />
<!--
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css' />
-->
<link rel='stylesheet' type='text/css' href='../libs/css/smoothness/jquery-ui-1.8rc3.custom.css' />
<link rel='stylesheet' type='text/css' href='../jquery.weekcalendar.css' />
<link rel='stylesheet' type='text/css' href='demo.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<!--
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
-->
<script type='text/javascript' src='../libs/jquery-ui-1.8rc3.custom.min.js'></script>
<script type='text/javascript' src='../jquery.weekcalendar.js'></script>
<script type='text/javascript' src='demo.js'></script>
<script type="text/javascript"> //esta parte realiza el autocompletado en teoria
$(document).ready(function(){
$('#buscar_paciente').autocomplete({
source : 'ajax.php',
select : function(event, ui){
$('#resultados').slideUp('slow', function(){
$('#resultados').html(
'<h2>Detalles de Paciente</h2>' +
// '<img src="' + ui.item.imagen + '" />' +
'<strong>Nombre: </strong>' + ui.item.value + '<br/>'
// '<strong>Descripcion: </strong>' + ui.item.tipo_usuario
);
});
$('#resultados').slideDown('slow');
}
});
});
</script>
</head>
<body>
<h1>Agenda</h1>
<!--
<div id="about_button_container">
<button type="button" id="about_button">About this demo</button>
</div>
-->
<div id='calendar'></div>
<div id="event_edit_container">
<form>
<input type="hidden" />
<ul>
<li>
<span>Fecha: </span><span class="date_holder"></span>
</li>
<li>
<label for="start">Hora Inicial: </label><select name="start"><option value="">Seleccion Hora de Inicio</option></select>
</li>
<li>
<label for="end">Hora Final: </label><select name="end"><option value="">Seleccionar Hora Final</option></select>
</li>
<li>
<label for="title">Paciente: </label><input type="text" name="title" id=""/>
</li>
<li>
<label for="body">Descripcion: </label><textarea name="body"></textarea>
</li>
</ul>
</form>
</div>
</body>
</html>
Codigo de demo.js
Código:
$(document).ready(function() {
var id = $.ajax({
url: "id.php",
async: false
}).responseText;
// variables
eventNew : function(calEvent, $event) {
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']").val(BuscarPaciente);
var bodyField = $dialogContent.find("textarea[name='body']");
$dialogContent.dialog({
modal: true,
title: "Nueva Cita",
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
"Guardar" : function() {
calEvent.id = id;
id++;
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$.getJSON("guardar.php?paciente="+titleField.val()+"&descripcion="+bodyField.val()+"&fecha_inicio="+calEvent.start.getTime()/1000+"&fecha_final="+calEvent.end.getTime()/1000+"&tipo=ingreso&id_cita_consulta="+calEvent.id, { }, function(json){});
$calendar.weekCalendar("removeUnsavedEvents");
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
"Cancelar" : function() {
$dialogContent.dialog("close");
}
}
}).show();
$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
},
eventDrop : function(calEvent, $event) {
$.getJSON("guardar.php?fecha_inicio="+calEvent.start.getTime()/1000+"&fecha_final="+calEvent.end.getTime()/1000+"&tipo=actualizar_mover&id-cita_consulta="+calEvent.id, { }, function(json){});
},
eventResize : function(calEvent, $event) {
$.getJSON("guardar.php?fecha_inicio="+calEvent.start.getTime()/1000+"&fecha_final="+calEvent.end.getTime()/1000+"&tipo=actualizar_flechas&id-cita_consulta="+calEvent.id, { }, function(json){});
},
eventClick : function(calEvent, $event) {
if (calEvent.readOnly) {
return;
}
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
var bodyField = $dialogContent.find("textarea[name='body']").val(calEvent.body);
$dialogContent.dialog({
modal: true,
title: "Editar - " + calEvent.title,
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
"Guardar" : function() {
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$.getJSON("guardar.php?paciente="+titleField.val()+"&descripcion="+bodyField.val()+"&fecha_inicio="+calEvent.start.getTime()/1000+"&fecha_final="+calEvent.end.getTime()/1000+"&tipo=actualizar&id-cita_consulta="+calEvent.id, { }, function(json){});
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
"Borrar" : function() {
if (confirm("Desea borrar la cita?"))
{
$.getJSON("guardar.php?tipo=borrar&id-cita_consulta="+calEvent.id, { }, function(json){});
$calendar.weekCalendar("removeEvent", calEvent.id);
$dialogContent.dialog("close");
}
},
"Cancelar" : function() {
$dialogContent.dialog("close");
}
}
}).show();
// continua código......
//
function BuscarPaciente(){
$('#buscar_paciente').autocomplete({
source : 'ajax.php',
select : function(event, ui){
$('#resultados').slideUp('slow', function(){
$('#resultados').html(
'<h2>Detalles de Paciente</h2>' +
// '<img src="' + ui.item.imagen + '" />' +
'<strong>Nombre: </strong>' + ui.item.value + '<br/>'
// '<strong>Descripcion: </strong>' + ui.item.tipo_usuario
);
});
$('#resultados').slideDown('slow');
}
}
)};
});
ajax.php
Código:
<?php
include_once 'pacientes.class.php';
$paciente = new Pacientes();
echo json_encode($paciente->buscarPaciente($_GET['term']));
?>
paciente.class
Realiza los ingresos,consultas y eliminaciones de mi tabla pacientes, asi como la busqueda.
Gracias
