passaggio parametri a jquery

[maurizio54]

Ho una tabella che rappresenta i vari giorni dell'anno (calendario), la prima riga riporta il nome di 5 camere d'albergo, le successive i giorni di uno specifico mese. Ogni cella ha un id il cui valore è formato così (esempio) id="2013-01-07_5"

in cui le prime tre cifre rappresentano il giorno e il mese dell'anno e la quarta cifra rappresenta una camera. Al click su di una cella si apre,tramite jquey, un livello in cui ho un form per la prenotazione con riportato data e nome della camera. Ora vorrei che questi campi si presentassero già compilati con i dati provenienti dalla cella su cui si è fatto click. Si tratta quindi di passare a jquery il valore dell'id della cella su cui si è cliccato.

[cavicchiandrea]

Posta un po di codice sia del ouput (invio dati) che del input (ricezione dati).

[maurizio54]

qui il codice jquery per aprire il livello che contiene il form

<script>
$(document).ready(function() {

	$(".apri").click(
	    function(){
			$('#overlay').fadeIn('fast');
			$('#box').fadeIn('slow');
			
		});

		$(".chiudi").click(
	    function(){
		$('#overlay').fadeOut('fast');
		$('#box').hide();
		});

		//chiusura emergenza
		$("#overlay").click(
	    function(){
		$(this).fadeOut('fast');
		$('#box').hide();
		});



   });

 </script>

Questa è la tabella

<table border=0 width="100%" cellpadding="8" id="gradient-style" class="tabella2">
<tr><td width=16%>giorno</td>
<td width=16%>Luigi Fiorini</td><td width=16%>Bartis</td><td width=16%>Sirio</td><td width=16%>Campioli</td><td width=16%>Galoppa</td></tr>
</table>
<table border=0 width="100%" cellpadding="8" id="gradient-style" class="tabella">
<tr><td width=16%>Marted&igrave; 1 Gennaio</td><td width=16% Style="cursor: pointer;" id=2013-1-1_1 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-1_2 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-1_3 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-1_4 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-1_5 class="apri">
</td></tr><tr><td width=16%>Mercoled&igrave; 2 Gennaio</td><td width=16% Style="cursor: pointer;" id=2013-1-2_1 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-2_2 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-2_3 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-2_4 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-2_5 class="apri">
</td></tr><tr><td width=16%>Gioved&igrave; 3 Gennaio</td><td width=16% Style="cursor: pointer;" id=2013-1-3_1 class="apri">
</td><td width=16% Style="background: #ff0000 url('immagini/gradhover_rosso.png') repeat-x;;cursor: pointer;color:#fff;font-size:1.2em;" id=2013-1-3_2  onclick="javascript:cancella_prenotazione(70,'Gennaio',1,2013);">Laura Ioni
Prenotazione N&deg; 70</td><td width=16% Style="cursor: pointer;" id=2013-1-3_3 class="apri">
</td><td width=16% Style="background: #ff0000 url('immagini/gradhover_rosso.png') repeat-x;;cursor: pointer;color:#fff;font-size:1.2em;" id=2013-1-3_4  onclick="javascript:cancella_prenotazione(55,'Gennaio',1,2013);">Stefania Pallunto
Prenotazione N&deg; 55</td><td width=16% Style="cursor: pointer;" id=2013-1-3_5 class="apri">
</td></tr><tr><td width=16%>Venerd&igrave; 4 Gennaio</td><td width=16% Style="cursor: pointer;" id=2013-1-4_1 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-4_2 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-4_3 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-4_4 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-4_5 class="apri">
</td></tr><tr><td width=16%>Sabato 5 Gennaio</td><td width=16% Style="cursor: pointer;" id=2013-1-5_1 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-5_2 class="apri">
</td><td width=16% Style="background: #ff0000 url('immagini/gradhover_rosso.png') repeat-x;;cursor: pointer;color:#fff;font-size:1.2em;" id=2013-1-5_3  onclick="javascript:cancella_prenotazione(117,'Gennaio',1,2013);">Laura Ioni
Prenotazione N&deg; 117</td><td width=16% Style="cursor: pointer;" id=2013-1-5_4 class="apri">
</td><td width=16% Style="cursor: pointer;" id=2013-1-5_5 class="apri">
</td></tr><tr><td width=16%>Domenica 6 Gennaio</td>

e questo il codice del livello id=box le cui caselle di testo e la select delle camere vanno riempite dai parametri passati a jquery

<form method="post" action="prenotazioni_popup.php" name="form_prenota" id="form_prenota" style="margin-top:50px;margin-left:50px">
<div style="text-align:left; padding-top:5px;"><label>Nome</label></div>
<div style="text-align:left;padding-left: 30px;margin-top: 10px;"><input type="text" name="nome" value="" class="nuovo" id="nome" /></div>
<div style="text-align:left; padding-top:5px;"><label>Cognome</label></div>
<div style="text-align:left;padding-left: 30px;margin-top: 10px;margin-bottom: 10px;"><input type="text" name="cognome" value="" class="nuovo" id="cognome"  /></div>
<div style="text-align:left; padding-top:5px;"><label>Da</label> <input type="text" name="da" size="12" id="da" class="nuovo" value=""  /> <label>A</label> <input type="text" size="12" name="a" id="a" class="nuovo" value="" /></div>
<div style="text-align:left; padding-top:5px;margin-bottom: 10px;"><label>Camera</label></div>
<div style="text-align:left; padding-top:5px;margin-bottom: 10px;"><select name="id_camera" class="nuovo id="id_camera"">
<option value="2" >Bartis</option><option value="4" >Campioli</option><option value="5" >Galoppa</option><option value="1" >Luigi Fiorini</option><option value="3"  selected>Sirio</option>	</select>
	</div>
	<input type="hidden" name="mese" value="" id="mese"  /><input type="hidden" name="anno" value="" id="anno"  />
	<div style="margin-left:300px;"><input type="button" value=" Prenota "  onclick="javascript:submit()" /></div>
</form>

Naturalmente il campo da e il campo a vengono riempiti dal medesimo valore che è quello della data che si desume dalla cella cliccata.

Spero di non avervi incasinato le idee.

Praticamente ho una tabella in cui ogni cella rappresenta una camera in un dato giorno. Vorrei al click sulla cella che si aprisse un livello con il form già compilato per quanto riguarda giorno e camera.

[cavicchiandrea]

<script>
$(document).ready(function() {

	$(".apri").click(
	    function(){
var camera = $(this).attr("id").split("_")[1];//recupero la camera
var gg = $(this).attr("id").split("_")[0];//recupero il giorno
var mm = $(this).attr("id").split("-")[1];//recupero il mese
var aa = $(this).attr("id").split("-")[0];//recupero l'anno
			$('#overlay').fadeIn('fast');
			$('#box').fadeIn('slow');
$("#id_camera").val(camera);//imposto la camera 			
		});

		$(".chiudi").click(
	    function(){
		$('#overlay').fadeOut('fast');
		$('#box').hide();
		});

		//chiusura emergenza
		$("#overlay").click(
	    function(){
		$(this).fadeOut('fast');
		$('#box').hide();
		});



   });

 </script>

Per inserire la data usa lo stesso sistema della id_camera, lo spit per la data potrebbe non essere corretto da verificare.
Ti ricordo che gli id non devono essere numerici o iniziare con un numero e che gli attributi meglio delimitarli id="......"

[maurizio54]

Grazie mille!!

[maurizio54]

Qualche piccolo cambiamento per la data e funziona ma non mi imposta id_camera, la select rimane fissa e non mi visualizza la camera selezionata

<script>
$(document).ready(function() {

	$(".apri").click(
	    function(){

	    var camera = $(this).attr("id").split("_")[1];//recupero la camera

	    var data = $(this).attr("id").split("_")[0];//recupero la data
			$('#overlay').fadeIn('fast');
			$('#box').fadeIn('slow');
			$("#da").val(data);
			$("#a").val(data);
			$("#id_camera").val(camera);
		});

		$(".chiudi").click(
	    function(){
		$('#overlay').fadeOut('fast');
		$('#box').hide();
		});

		//chiusura emergenza
		$("#overlay").click(
	    function(){
		$(this).fadeOut('fast');
		$('#box').hide();
		});
 });
 </script>

il valore camera è estratto esattamente (lo verifico con alert(camera) ma poi non sortisce effetto sulla select

[maurizio54]

piccolo cambiamento

da

$("#id_camera").val(camera);

diventa

$("select[name=id_camera]").val(camera);

e funziona alla perfezione