Returnere info fra popup for oppdatering

[stian90_2]

God dag.

 

Jeg driver å jobber med en kalender.

Der jeg viser alle datoene i en valgt måned.

 

Akuratt nå hentes kalenderen via et PHP script som kalles fra en lenke feks ?month=1, men jeg vurderer å gå over til javascript som henter opp PHP scriptet mitt ved hjelp av XMLHttpRequest();

 

Jeg har laget det slik at når jeg velger en dato, poper det opp et lite vindu for å skrive en hendelse samt et klokkeslett.

 

Jeg ønsker at når jeg trykker lagre i popupen skal den lukke, og måneden jeg har navigert i på hovedsiden skal oppdatere innhold slik at en ser at det har blitt lagret. Hvordan kan dette løses mener dere?

 

Jeg har forstått at jeg kan sende info fra popup til main med noe som heter chrome.tabs.query(); men jeg får ikke dette til å fungere. Noen innspill til hvordan dette kan løses enklest mulig?

 

Jeg trenger å sende et oppdater signal fra popup til hovedside. Å at den da oppdaterer siden på samme plassering som jeg allerede er. Eller via XMLhttpRequest caller den samme siden.

[Feh]

Er popupen din en ny nettleser(fane)? Du kan jo da heller se på f.eks modal popups. Et godt eksempel på det du prøver å oppnå er med jQuery UI modal form.

Endret 14. november 2013 av Feh

[stian90_2]

Det er ikke i en ny fane nei. Er et nytt vindu.

 

En slik løsning du refererer til Feh, er nok ikke så dum i det hele tatt.

Her blir jo all validering sjekket i javascript.

 

 

Det begynner å bli noen år siden jeg holdt på med dette, så jeg klarer ikke helt å se hvordan jeg skal kjøre dette sammen med PHP. Jeg ønsker jo å kjøre valideringen opp mot PHP.

[Feh]

Hva skal du validere med PHP? Slik jeg ser det er det kun nødvendig dersom du skal se om noe eksisterer fra før. Resten kan fint gjøres vha javascript. Hvis du bare trykker på "view source" på den siden jeg linket til kan du kopiere ut hele koden som virker hvis du bare paster det inn i et php dokument og lagrer det på maskinen din.

 

På linje 80 ser jeg for meg at du kan legge til litt php/ajax logikk. Der står det:

if ( bValid ) {
            $( "#users tbody" ).append( "<tr>" +
              "<td>" + name.val() + "</td>" +
              "<td>" + email.val() + "</td>" +
              "<td>" + password.val() + "</td>" +
            "</tr>" );
            $( this ).dialog( "close" );
          }

Her kan du f.eks legge inn:

if ( bValid ) {
			$.ajax({ 
				url: 'php/store_entry.php',
				data: {name:name.val(), email:email.val(), password:password.val()},
				type: 'get',
				success: function(output) {
					$( "#users tbody" ).append( "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>" );
				}
			});
            $( this ).dialog( "close" );
          }

Det eneste som skjer her foreløpig er at den sender dataene som ble tastet inn til en php fil som tar seg av lagringen i databasen. Har ikke tenkt så mye over det, men det er noen utfordringer som står igjen:

 

1. Hvordan oppdatere kalenderen med den nye informasjonen? Slik som prinsippet fungerer her, blir det bare appendet til DOM. Hvis kalenderen blir repopulert av PHP hver gang siden refreshes vil ikke det være noe problem siden ny data da uansett vil dukke opp ved refresh.

2. Alternativet er å bygge opp php filen til å:

2.1 Lagre oppføringen

2.2 Spørre databasen på nytt om alle oppføringen på den gitte dagen/klokkeslettet (?)

2.3 echoe dette ut, og heller oppdatere selve cellen/diven for den gitte dagen med ny informasjon

3. På en eller annen måte må også hvilken dag/måned det er sendes til javascriptet slik at man får lagret dette i DB, samt at dette må brukes når javascriptet skal oppdatere området der oppføringen skal synes.

 

Selve variablene brukt i modalpopupen kan du jo bare endre etter eget ønske. Hvordan dette kan løses avhenger jo litt av hvordan siden ellers fungerer. Er den åpen for alle, eller må man registrere seg og logge inn for å bruke?

 

Edit: Beklager at indentation ble helt fucked i kodeeksemplene. Dunno hva som skjedde.

 

Og en ting til. Hvis jeg skal hjelpe deg med å adoptere dette til kalenderen din er jeg nødt til å vite kildekoden bak den. Ikke kildekoden, men hvordan selve kalenderen er bygget opp (html).

Endret 14. november 2013 av Feh

[stian90_2]

Jeg ønsker å validere dataene, så jeg er sikker på hva som kommer inn i databasen.

Det vil nok passe seg med en løsning som kjører en ny request ved innføring i databasen.

 

Slik ser tabellen ut enkelt i HTML.

<table>
<tr>
 <td>Uke></td>
 <td>mandag</td>
 <td>Tirsdag</td>
 <td>Onsdag</td>
 <td>Tordsdag</td>
 <td>fredag</td>
 <td>lørdag</td>
 <td>søndag</td>
</tr>
</table>

Så kommer datoene etterfult i ny rad under etterhvert. Eneste spesielle er ukenr på venstre side.

Som sagt så kjører denne via en PHP script rett på siden nå.

 

http://www.packtpub.com/article/calendars-jquery-1.3-php-jquery-week-calendar-plugin-1

 

Akuratt nå sitter jeg å ser litt på denne koden, mulig jeg modifiserer den for å fungere etter det jeg ønsker. Må vist lære meg javascript. Nytter ikke å lage websider med bare PHP, HTML, CSS idag om du skal ha det litt moderne.

[Feh]

Hm, før jeg skriver noe mer: Merk at den pluginen du lenket til er skrevet for jQuery 1.3. Det er en god del syntaksendringer og ikke minst sikkerhetsoppdateringer siden den gang, så jeg vil anbefale deg å se etter noe nyere, minst jq 1.8 eller nyere (current er 1.10). Er du villig til å legge et par $ i det vil jeg anbefale deg å ta en titt på Codecanyon.

 

Forøvrig trenger du ikke drive med validering på serversiden med mindre du skal sammenligne det som er tastet inn med noe som ligger i databasen (f.eks ved innlogging). Resten er mer effektivt og ikke minst intuitivt å validere med javascript/ajax. Finnes et mylder av slike plugins for jquery. Det du derimot må gjøre er å sanitere/escape (med php) det som blir satt inn i databasen for å beskytte deg mot angrep. Eventuelt er også mye gjort ved å bare bruke prepared statements når du skal sette det inn i basen.

[stian90_2]

Jeg forstår, løsningen blir nok å havne på jquery som du foreslår med ajax som suplemang.

 

Men la oss si at jeg ønsker å gjøre det samme, med et registreringsscript.

Og der må sjekke om feks bruker eksisterer fra før. Hvordan returerer jeg noe fra PHP og kjører en handling i javascript.

 

Jeg bruker XMLHttpRequest en annen plass på siden.

Hva er forskjellen på dette og ajax og igjen json?

 

Beklager at vi sporer litt av, men ønsker å finne den enkleste å samtidig mest fleksible løsningen for siden.

[Feh]

Her er hvertfall et helt basic innloggingsscript (uten spesielle sikkerhetsfunksjoner siden jeg kun bruker det internt) med ajax:

<script type="text/javascript">
$(document).ready(function() {

	$("#login").click(function() {
		$("#message").html("<p class='error'>Logger inn...</p>");
		var action = $("#form1").attr('action');
		var form_data = {
			username: $("#username").val(),
			password: $("#password").val(),
			is_ajax: 1
		};

		$.ajax({
			type: "POST",
			url: action,
			data: form_data,
			success: function(response)
			{
				if(response == 'success')
					$("#form1").fadeOut('slow', function() {
						$("#message").html("<p class='error'>Godkjent!</p>");
						//plasser noe logikk her, enten en redirect, eller å f.eks hente inn/bytte ut noe. ***
					});
				else
					$("#message").html("<p class='error'>Ugyldig brukernavn eller passord</p>");
			}
		});

		return false;
	});

});
</script>

<form id="form1" name="form1" action="login.php" method="post">

<label for="username" class="label">E-post: </label>

<input type="text" name="username" id="username" class="input"/>

<label for="password" class="label">Passord: </label>

<input type="password" name="password" id="password" class="input"/>

<input type="submit" id="login" name="login" class="inputButton" value="Logg inn"/>

</form>

login.php

<?php
	
	session_start();
	
	$is_ajax = $_REQUEST['is_ajax'];
	if(isset($is_ajax) && $is_ajax)
	{
		$username = $_REQUEST['username'];
		$_SESSION['username']=$username;
		$password = $_REQUEST['password'];
		
		include("connect.php");
		
		$result=sqlsrv_query($conn, "SELECT Brukernavn, Passord FROM Brukere WHERE Brukernavn='$username'");
		while($row=sqlsrv_fetch_array($result)) {
			if ($row['Passord']=$password && $row['Brukernavn']=$username) {
				echo "success";
			}
		}
	}

?>

***= Avhengig av hvor du plasserer selve innloggingen så kan du gjøre forskjellige ting her:

 

1. At innlogging skjer via en landingpage (en side hvor man kun har innlogging, før man får se noe annet). Da er det bare å plassere formen et hensiktsmessig sted og legge inn en redirect (f.eks window.location = ...).

2. At innlogging skjer via en popup/modal på selve kalendersiden. Da kan du f.eks legge inn:

$("#content").load("calendar.php");