Hjälp med javascript/Jquery till min sida :)

20 svar · 1 603 visningar · startad av Mycodez 5 juli 2011

MycodezMedlem sedan feb. 2010445 inlägg

Frågan5 juli 2011 14:12#1

Tjena, till en börja med jag är relativt ny inom detta med javascript och Jquery,

Jag behöver lite hjälp med en chat funktion jag håller på med. Jag undrar hur man räknar ut x antal tecken ur ett textfield vid namn messages med javascript, för jag vill inte få tom data i min databas nämligen plus jag vill slippa spam så hur gör jag så man inte kan skriva på typ 2 sek alltså man får en timeout, hur gör man detta?

Såhära ser min kod ut nu:
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#messages").load('ajaxLoad.php');

$("#userArea").submit(function(){
	
	$.post('ajaxPost.php', $('#userArea').serialize(), function(data){
		$("#messages").append('\<div\>'+data+'\</div\>');
	});
	return false;
});

});
</script>

<div id="messages" style="width:800px; height:400px; overflow:auto;"></div>

<form id="userArea">
<label>Message:</label>
<textarea name="messages"></textarea>
<input type="submit" value="post" />
</form>

Just det plus jag vill att i divtagen messages så vill jag att den automatisk ska scrollas ner när data fylls på när det behövs börjas scrolla.

förstår ni hur jag menar? hoppas det är bara att skriva annars.

/Robin K

voigtann1Medlem sedan juni 20019 519 inlägg

5 juli 2011 14:35#2

Vid din submit leta upp textarean $("textarea", this).val() för att se vad det finns i textarean, om den är > 0 så gör du din Ajax postning

MycodezMedlem sedan feb. 2010445 inlägg

5 juli 2011 14:39#3

Okej, men hur skulle koden se ut för det då? Är lite nollad i javascript om man säger så

voigtann1Medlem sedan juni 20019 519 inlägg

5 juli 2011 15:34#4

<script src="jquery.js"></script>
<script>
	$(document).ready(function(){
		$("#messages").load('ajaxLoad.php');

		$("#userArea").submit(function(){
			
			if($("textarea[name=messages]", this).val() !== "") {
				$.post('ajaxPost.php', $(this).serialize(), function(data){
					$("#messages").append('<div>'+data+'</div>');
				});
			}
			return false;
		});
	});
</script>

<!-- Display -->
<div id="messages" style="width:800px; height:400px; overflow:auto;"></div>

<!-- Post -->
<form id="userArea">
<label>Message:</label>
<textarea name="messages"></textarea>
<input type="submit" value="post" />
</form>

Men jag är lite tveksam på att:

$('#userArea').serialize()

fungera, det är ju alla inputs du vill postar och #userArea har du redan letat upp (därav min this).

Dock så vet jag inte om det är helt optimalt att skicka data på detta sätt, kan du inte få in preview läge utan att postar till servern hela tiden?

Eller är det att du vill skriva hur många tecken man har skrivit hela tiden?

MycodezMedlem sedan feb. 2010445 inlägg

5 juli 2011 16:03#5

Vill du jag lägger upp det så du får testa det??

MycodezMedlem sedan feb. 2010445 inlägg

5 juli 2011 16:04#6

okej, jag lagrar allt på databasen, Är det fel med det eller finns det bättre sätt att göra det på??

voigtann1Medlem sedan juni 20019 519 inlägg

5 juli 2011 16:08#7

Om det är data som skall sparas så är ju en databas rätt, men om det är för en preview del så känns det rätt onödigt att skicka data som php måste behandla innan den skickar tillbaka... sen vet jag inte vad din php kod gör det är kanske ett måste.

MycodezMedlem sedan feb. 2010445 inlägg

5 juli 2011 17:43#8

okej, jag kan lägga upp en lite preview på hur chatboxen ser ut dock demo inte klar alltså, fått den att funka nu men, jag vill kunna tömma textboxen jag skriver i inna njag lägger upp den, men alla mina ajax filer som är följande, ajaxLoad.php, ajaxPost.php ajaxDelete.php.
ajaxDelete.php kommer dock bli bara för dem med adminrättigheter.

men php filerna ser ut

ajaxPost.php

<?php

include("config.php");
//print_r($_POST);
$message = $_POST['messages'];

$db->query("INSERT INTO messages(message) VALUES('$message')");

$id = mysql_insert_id();

//echo $message ."<a href=\"#\" class=\"delete\" rel=\"$id\">Delete</a>";
echo $message;
?>

ajaxLoad.php

<script src="jquery.js"></script>
<script>
$(document).ready(function(){
	$(".delete").click(function(){
		
		var item = $(this).parent();
		var id = $(this).attr('rel');
		
		$.post('ajaxDelete.php', {'id' : id}, function(data){
			$(item).hide();
		});
	});
});	
</script>

<?php

include("config.php");

// Run a Query:
$db->query('SELECT * FROM messages');

$data =  $db->Get();

foreach($data as $key => $value)
{
	echo '<div>' . $value['message'] . '<a href="#" class="delete" rel="'.$value['id'].'">Delete</a></div>';	
}

?>

ajaxDelete.php

<?php

include("config.php");

$id = $_POST['id'];

$db->query("DELETE FROM messages WHERE id = '$id'");

?>

MycodezMedlem sedan feb. 2010445 inlägg

5 juli 2011 17:44#9

Ser här nu att det inte är så säkert.

hur kan jag öka säkerheten??

voigtann1Medlem sedan juni 20019 519 inlägg

5 juli 2011 18:07#10

post kommer bara lägga in chatt meddelandet och visar resultatet efter den har lagts in i databasen. men vem som helst verkar ju kunna plocka bort inlägg, du kollar ju inte om man har behörighet att plocka bort inlägget eller inte.

MycodezMedlem sedan feb. 2010445 inlägg

6 juli 2011 18:08#11

Jag jobbar på det just nu :) lägger till administratörsretigheter på sidan nu :)

MycodezMedlem sedan feb. 2010445 inlägg

8 juli 2011 22:48#12

Fixat med chaten, men ligger nere justn u kom på att jag ska använda den funktion till flera chatar sen den funktionen byggs nu:)

men sen detta med räkna av tecken i en textarea så ser hela den koden ut såhär:

<html>
<head>
<script language="javascript" type="text/javascript"> 
var maxAmount = 250;
function textCounter(textField, showCountField) {
    if (textField.value.length > maxAmount) {
        textField.value = textField.value.substring(0, maxAmount);
	} else { 
        showCountField.value = maxAmount - textField.value.length;
	}
}
</script>
</head>
<body>
<form>
<textarea name="ta" rows="6" style="width:340px;" onKeyDown="textCounter(this.form.ta,this.form.countDisplay);" onKeyUp="textCounter(this.form.ta,this.form.countDisplay);"></textarea>
<br>
<input readonly type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
</form>
</body>
</html>

gjorde den i en separat fil för att testa den i början :) men så ska det se ut typ :)
Jag meddelar er när ni kan testa in sidan :)

MycodezMedlem sedan feb. 2010445 inlägg

8 juli 2011 23:00#13

Om ni ville testa min site så går ni in på https://www.blabster.nu username: guest password:guest

OBS! guest kontot försvinner under söndagen! om ni vill se chaten som den är nu till nya version är uppe så kan ni registrera er på sidan tar 2 min att fylla i allt, sen kan emailet vara segt, men det brukar ta från 0sek till 10min som max.

voigtann1Medlem sedan juni 20019 519 inlägg

9 juli 2011 05:54#14

varför inte bara köra maxlength på din textarea? http://jsbin.com/epuyet/2/edit och bara köra JS för att visa hur många tecken de har kvar att skriva.

MycodezMedlem sedan feb. 2010445 inlägg

9 juli 2011 08:39#15

vet inte kanske är bra att se hur många tecken man har kvar att skriva?

voigtann1Medlem sedan juni 20019 519 inlägg

9 juli 2011 08:43#16

Kollar du ens vad jag skriver i koderna? Det ända du behöver i JS kod är att den räknar ner, vilket koden i förra inlägget gör

Edit, det är väl bra att veta det om man har JS aktiverat, annars märker man det rätt snabbt

MycodezMedlem sedan feb. 2010445 inlägg

9 juli 2011 08:51#17

oj jag som läste fel. Nu får man skämmas här. Men jag ser att ditt kanske funkar lite bättre än mitt :)

voigtann1Medlem sedan juni 20019 519 inlägg

9 juli 2011 08:53#18

Är ju nästan samma kod, men om man inte ha JS aktiverad så har man standard beteende ifrån HTML-element men du behöver lägga in 250 tecken kollen i din php kod också

MycodezMedlem sedan feb. 2010445 inlägg

9 juli 2011 08:55#19

jag får ha kvar den jag gjorde tills jag har designat om sidan till det jag vill verkligen ha:)

MycodezMedlem sedan feb. 2010445 inlägg

9 juli 2011 09:00#20

jaa det får jag göra. Men dock om man inte har JS aktiverat så kommer inte dem senaste meddelanden i chaten fram för all sker med JS och Jquery nämligen. :)