webForumDet fria alternativet

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

20 svar · 1 601 visningar · startad av Mycodez

MycodezMedlem sedan feb. 2010445 inlägg
#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>

<!-- 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>

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
#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
#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
#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

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

MycodezMedlem sedan feb. 2010445 inlägg
#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
#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
#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
#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
#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
#11

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

MycodezMedlem sedan feb. 2010445 inlägg
#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
#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
#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
#15

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

voigtann1Medlem sedan juni 20019 519 inlägg
#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
#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
#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
#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
#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. :)

132 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)