jQuery + POST

Hur felsöker du? Hur ser det data ut som du tar emot på serversidan (ajax.login.php)? Har du försökt att skicka varje variabel för sig, istället för att serialisera formuläret?

jQuery är ju ett erkänt ramverk, så att gå så långt att kasta det i soporna vet jag inte... Mootools tycker jag lite bättre om att arbeta med dock, kanske ska försöka dig på det om du inte trivs med jQuery? Dom inriktar sig egentligen till olika målgrupper, men överlag klarar de av samma saker. Mootools kan göra det lite snyggare dock. ;)

Alltså grejen är att inget händer överhuvudtaget, inga direkta felmeddelanden eller något sånt. Kör jag en alert får jag bara "error" i klartext, inte vad som är fel, eller var eller något.

Nu provar jag dock en liknande sak helt fristående från min andra applikation och det fungerar så här långt.

Ska testa lite till, återkommer!

saken är att du inte gör något för att undvika postningen ifrån din submit, du måste göra så att den inte gör postningen.

$(document).ready(function() {
	$('#loginFrm').submit( function(e){
		e.preventDefault();
		$.post("ajax.login.php", $(this).serialize(),
		  function(data){
			alert("Data Loaded: " + data);
		  });

	});
});

La in e.preventDefault() + tog serialize() på "hela" formuläret som gör postningen.

Och ett tips är ju att du borde börja använda dig av firebug för att felsöka koder också.

Ett annat tips kan vara att använda live funktionen i jquery, brukar hjälpa mig ibland när saker inte funkar som jag vill.

$(document).ready(function() {
	$('#loginFrm').live('submit', function(){
		$.post("ajax.login.php", $("#loginFrm").serialize(),
		  function(data){
			alert("Data Loaded: " + data);
		  });

	});
});

Tack som fan! Nu är jag lite mer med i matchen.. Den här koden då:

$(document).ready(function() {

	$('#loginFrm').submit( function(e){
		e.preventDefault();
		$.ajax({
			url: "data.php",
			type: "POST",
			data: $(this).serialize(),
			dataType: "json",
			complete: function(data){
						alert("Data Loaded: " + data);
					  }
		});
	});
});

Tanken är att jag "svarar" på serversidan med:

echo json_encode(array(
						"error" => $error
					  )
				);

error är en array, som är tom om allt gick bra, och innehåller ev. fel över vad som gick snett. Får dels inte till det där, så att response visas, får bara undefined.

Firbug säger nu:

{"error":["Anv\u00e4ndarnamn saknas","L\u00f6senord saknas"]}

Hur får jag till teckenkodningen i svaret ovan?
Hur visar jag responsen från ajax?

Kan tillägga att alert(data); ovan ger:

Data Loaded: [object XMLHttpRequest]

Får alltså tillbaka ett object, men hur skriver jag ut det?

$(document).ready(function() {
	$('#loginFrm').submit( function(e){
		e.preventDefault();
		$.ajax({
			url: "data.php",
			type: "POST",
			data: $(this).serialize(),
			dataType: "json",
			scriptCharset: "utf-8", 
			contentType: "application/json; charset=utf-8",
			success: function(data){
				alert("Data Loaded: " + data); 
			}
		});
	});
});

Fast jag undra om du har ställt in AJAX anropet rätt om det är ett JSON objekt du vill retunera... återkommer efter lite tester

redigerad: Tog Success istället för Complete, för det är det jag gissar på att det är det du vill åt.

Nu är jag sjukt nära att lösa det här, så här ser det ut:

success: function(data){
			if(data.hasErrors){
				var msg = "";
				data.msgErrors.each(){
					msg += $(this);
				};
				alert(msg);
			}
		  }

Responsen:

{"hasErrors":true,"msgErrors":["Anv\u00e4ndarnamn saknas","L\u00f6senord saknas"]}

Tanken är alltså att om hasErrors är true, så ska varje msgErrors skrivas ut såhär:

- Användarnamn saknas
- Lösenord saknas

Kollade lite på data.msgErrors.each() men får inte till det..

$(document).ready(function() {
	$('#loginFrm').submit( function(e){
		e.preventDefault();
		$.ajax({
			url: "data.php",
			type: "POST",
			data: $(this).serialize(),
			dataType: "json",
			scriptCharset: "utf-8", 
			contentType: "application/json; charset=utf-8",
			success: function(data){
				if(data.hasErrors){
					var msg = "";
					$.each(data.msgErrors,function(){
						msg += '- ' + this + '\n';
					});

					alert(msg);

				}
			}
		});
	});
});

Lustigt, löste det för egen maskin för ett tag sen och skulle precis paste'a lösningen här:

$(document).ready(function() {
	$('#loginFrm').submit( function(e){
		e.preventDefault();
		$.ajax({
			url: "data.php",
			type: "POST",
			data: $(this).serialize(),
			dataType: "json",
			success: function(data){
						if(data.hasErrors){
							msg = "";
							$.each(data.msgErrors, function(app){
								msg += "- " + app + "\n";
							});
							alert(msg);
						}
					  }
		});
	});
});

Men du får "lösningen" ändå :)

Just det... stort tack för hjälpen! Det blir nog inte soporna för jQuery iaf.. ger det här en chans, verkar ju bra :)

MickeA.com skrev:

Just det... stort tack för hjälpen! Det blir nog inte soporna för jQuery iaf.. ger det här en chans, verkar ju bra :)

Låter rätt ;) gillar jQuery och det är enkelt när man väl har kommit igång med det ;)

Nu är det lite offtopic, men det rör ju jQuery..

Det här använder jag för att byta klassnamn på formulärsfält om valideringen inte går igenom:

function throwError(data){
	$.each(data.fldError, function(){
		$('input:text[name=' + this + ']').addClass('error');
		var nxt = $(this).next('img');
		alert(nxt);
	});

	msg = "";
	$.each(data.msgError, function(){
		msg += "- " + this + "\n";
	});
	alert(msg);
}

Tanken är också att byta source för en bild i det efterföljande element. Just nu fungerar det så långt att klassnamnet byts ut, men bilden ändras inte. När jag kör alert på next får jag object [object] men förstår inte hur jag ska använda det.

Förslag?

/r

HTML koden ser ut såhär:

<h2>Report settings</h2>
<table cellpadding="0" cellspacing="0">
<tr class="row-odd">
<td class="form-topic">Report e-mail address</td>
<td class="form-field"><input type="text" name="report_email" value="<?php echo $report_email;?>" /></td>
<td class="form-error"><img src="<?php echo ABSPATH;?>images/spacer.gif" style="width: 24px; height: 24px;" alt="image: warning.png" /></td>
</tr>
</table><br />

Är det den strukturen du ha så måste du upp två nivåer från din input:text[name...] bit och hitta bilden och ändra dess img,
$(this).next(); är elementet brevid this, vilket inte är 100% korrekt heller, för data.fldError är väl en vanlig JSON objekt?

Just, data.fldError är just name för min input, så jag måste alltså backa till <td class="form-field"> och sen ta next td img?

Eller bör jag göra på något annat sätt?

Du få tänka dig med noder

<td><input type=".... /><img class="bob" /></td>
<td><img class="bob" /></td>

$("input").next("img.bob") kommer inte retunera två st img eftersom den andra ligger i en annan nod, du måste gå upp en nod (parent()), skall se om jag kan skriva ihop ett snabbt exempel på lunchen

	$.each(data.fldError, function(){
		var $input = $('input:text[name=' + this + ']').addClass('error');
		var $img = $input.parent().parent().find('img:first');
		$img.attr("src","newImage.png");
	});

Så jävla snyggt, tack!

Lånar den här tråden eftersom jag nu har ett litet problem. Har ett formulär med en <input type="file" /> och den hänger inte med när jag postar formuläret.

Koden:

$('#updateFrm').submit( function(e){
	$('.form-field input:text,input:password,input:radio,textarea').each(function(){
		$(this).removeClass('error');
		var $img = $(this).parent().parent().find('img:first');
		$img.attr("src","/pics/spacer.gif");
	});
	$.blockUI({ theme: true, title: $('div#loadMsg p#loadTitle').html(), message: $('div#loadMsg p#loadBody') });
	$('.large-button').attr('disabled', 'disabled');
	e.preventDefault();
	$.ajax({
		url: "/ajax/ajax.account.settings.php",
		enctype: "multipart/form-data",
		encoding: "multipart/form-data",
		type: "POST",
		data: $(this).serialize(),
		dataType: "json",
		success: function(data){
			if(data.hasError){
				throwError(data);
				
			}else{
				alert(data.returnMsg);
				window.location.reload();
			}
			$('.large-button').attr('disabled', '');
			$.unblockUI();
		}
	});
});

På serversidan har jag testat att skriva ut både $_POST och $_FILES för att se vad resp. array innehåller, men $_FILES kommer inte med av någon anledning.

Har testat flera olika saker med det verkar inte som om $_FILES skickas med alls.

Hur löser man det här?