ugrás a tartalomhoz

Ajax töltés..

kriszrap · 2011. Május. 12. (Cs), 23.44
Sziasztok!!!
Ajaxba szeretném azt megoldani hogy amikor pl rányomnak egy gombra és be ugrik egy töltés gif közbe adatbázisbol kérdezle ha meg van a lekérdezés akkor eltunik a gif és meg jelenik az eredmény. Egy ilyen ajax loadingot szeretnék csinálni ha értik hogy mirol beszélek??:)
‹ EcmaScript 5 Object.create() Object.defineProperties Link hozzáadási lehetőség látogatónak ›
 ■
1

Hol

janoszen · 2011. Május. 13. (P), 07.50
Hol akadtál el? Tegyél fel kérdést.
2

A szerencséd ez ügyben, hogy

bb0072 · 2011. Május. 13. (P), 11.50
A szerencséd ez ügyben, hogy az ajax kérés aszinkron. Tehát, miután elindítod az ajax kérést, láthatóvá teszed a gifet. Ott egészen addig forog a pörgettyű vagy a homokóra, míg le nem fut az callback függvény. A callback függvény első dolga, hogy eltűnteti a gifet.

jQueryvel például:

$.get('/xxx.php?param=value', function(data) {
    $('#ajaxload').hide();
    doSomething(data);
});
$('#ajaxload').show();
Ehhez kell egy ajaxload id-jű div, benne a giffel:

<div id="ajaxload" style="display:none;">
    <img src="/ajaxload.gif" alt="loading..." title="loading..." />
</div>
3

proclub igazából még else

kriszrap · 2011. Május. 13. (P), 13.24
proclub igazából még else keztem csak honlapokon ládtam :) Azt it megérdeklötem hogy lehet ilyet csinálni:)
4

Miért van erre szükséged,

Hidvégi Gábor · 2011. Május. 13. (P), 13.33
Miért van erre szükséged, azon kívül, hogy látványos (lehet)?

Az állandóan bevillanó töltésjelző animációk inkább zavarják a felhasználót, mivel információt nem hordoznak, ha csak rövid időre tűnnek fel.
5

hát sztem azért jó mert vagy

kriszrap · 2011. Május. 13. (P), 14.20
hát sztem azért jó mert vagy egy like gombom és ha rányomnak akkor dislájk lesz belöle . Na de ebbe van egy hiba lehet hogy én hibáztam de ha sok szor nyomokrá akkor néha 2 küldi fel az adatbázisnak:( és ez a loding ki küszöböli mert csak akkor tutsz még egyszer rányomni ha befejezödöt a folyamat ha jól tom nem??:)
6

Nem, az AJAX, amiben az első

Hidvégi Gábor · 2011. Május. 13. (P), 14.25
Nem, az AJAX, amiben az első A betű az aszinkron rövidítése, esetünkben azt jelenti, hogy egymás mellett párhuzamosan el tudsz indítani több kérést.
7

gyógymód van rá??:)

kriszrap · 2011. Május. 13. (P), 15.05

<script language="javascript">
function example_ajax_request() {
  $('#example-placeholder').html('<p><img src="/images/ajax-loader-2.gif" width="220" height="19" /></p>');
  setTimeout('example_ajax_request_go()', 2000);
}
function example_ajax_request_go() {
  $('#example-placeholder').load("/examples/ajax-loaded.html");
}
</script>
igy müködni fog??:) nem a példábol dolgoztam:)
8

Van. Kell egy változó, ami

bb0072 · 2011. Május. 13. (P), 15.05
Van. Kell egy változó, ami mind az ajaxot meghívó függvényben (ez gondolom valami onclick eseménykezelő), mind a callback függvényben látható. Ez például egy globális változó, de biztos van ennél szebb megoldás is. Lényegében egy flag, amit true-ra vagy false-ra kapcsolgatsz. Ha true, elindítod az ajax kérést, és false-ra kapcsolod. A callback függvény visszakapcsolja true-ra. Amíg false, nem indulhat újabb ajax kérés -> az onclick akkor nem csinál semmit.
9

<html> <head> </head> <script

kriszrap · 2011. Május. 13. (P), 15.09

<html>
<head>
</head>
<script language="javascript">  
function example_ajax_request() {  
  $('#example-placeholder').html('<p><img src="ajaxload.gif" width="220" height="19" /></p>');  
  setTimeout('example_ajax_request_go()', 2000);  
}  
function example_ajax_request_go() {  
  $('#example-placeholder').load("siker.php");  
}  
</script>  
<body>
</p>
<p><input type="button" value="Click Me!" onclick="example_ajax_request()" /></p>
<div id="example-placeholder">
<p>Placeholding text</p>
</div> 
</body>
</html>
itt van megirtam csak valamiért nem jó:(
10

Szerintem előbb az alapokat

Hidvégi Gábor · 2011. Május. 13. (P), 15.13
Szerintem előbb az alapokat kéne tisztába tenned, mielőtt ilyen fejlesztésekbe belekezdesz.

Íme, a Javascript 1.3 referencia, ezt vágd be, addig ne kezdj semmi másba. Ha megvagy, szólj.
11

Hát megnéztem de nagyon nem

kriszrap · 2011. Május. 13. (P), 15.41
Hát megnéztem de nagyon nem jutodtam elöbre . Hát ajax al probálkosztam de ugyse hozza be:(
kliens oldal:

<html>
<head>
</head>
<script language="javascript">  
function example_ajax_request()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("example-placeholder").innerHTML = xmlhttp.responseText;  
    }
  }
xmlhttp.open("GET","ajax_loading.php",true);
xmlhttp.send();
}
</script>  
<body>
</p>
<p><input type="button" value="Click Me!" onclick="example_ajax_request()" /></p>
<div id="example-placeholder">
<p>Placeholding text</p>
</div> 
</body>
</html>
ajax 

<html>
<head>
</head>
<script language="javascript">
function example_ajax_request() {
  $('#example-placeholder').html('<p><img src="ajaxload.gif" width="220" height="19" /></p>');
  $('#example-placeholder').load("/examples/ajax-loaded.html");
}
setTimeout('example_ajax_request()', 2000);
</script>  
<body>
<div id="example-placeholder">
</div> 
</body>
</html>
12

Mit nem hoz be?

Poetro · 2011. Május. 13. (P), 16.14
Kérlek fogalmazz már tisztábban, mert amíg nem teszed, nem lesz megoldás. Mindkét esetben AJAX-ot valósítasz meg, egyikben natív kérésekkel, másikban jQuery-vel, anélkül, hogy egyáltalán betöltötted volna a jQuery-t. Így a második nem fog működni. Használj már valamilyen debug eszközt, ami megmondja neked, melyik sorban volt a hiba. A setTimeout-nak nem egy stringet kell átadni, hanem egy függvényt. Például:
setTimeout(example_ajax_request, 2000);
És addig ne írj le semmit, amíg a fenti kérdésekre nem válaszolsz.
13

szarkazmus?

Totti 1986 · 2011. Május. 13. (P), 16.21
Íme, a Javascript 1.3 referencia, ezt vágd be, addig ne kezdj semmi másba. Ha megvagy, szólj.


Ez azt jelentette, hogy tanuld meg a Javascript-et használni, és majd csak utána, ha már vannak begyakorolt, használható eljárásaid problémák kezelésére, és már abszolut nincs ötleted, na akkor írj ide. Remélem, jól tolmácsoltam. Nem, belenézni kell (megjegyzem, a link nem is jó, tehát, nem tudom hogy nézhettél bele), hanem elkezdeni megtanulni.

Ahogy látom, és láttam eddig, minden problémára egy kész megoldást dobsz ide, amit valahonnan másoltál, és nem érted a működését. Ha megtanulnád a Javascript-et, akkor saját megoldásaid lennének, amiben pontosan el tudnád magyarázni, h melyik rész nem működik.

A témára rátérve, először is végig kéne gondolnod, mit szeretnél.
Dicséretes, hogy ajax-szal akarod megoldani a like gombot, csak ezzel pont a script lefutásának aszinkronitásába futsz bele mint probléma.
Nem küszöbölted ki, h ha még egyszer rányomnak a gombra, mialatt éppen fut a kérés, azalatt nyomhassanak.

HA működik az ajax-os like gombod, és rendesen be is irja adatbázisba a szükséges adatot, akkor 1 lépés választ csak el attól, h úgy működjön, ahogy szeretnéd.

Deklarálj egy változót, ami engedélyezi, hogy lehet-e a gombra nyomni. Alapértelmezetten lehet. Aztán a js fgv.-nek, amelyik végrehajtja a like-olást, az első sorában írd át ennek a változónak az értékét, majd ha a kérés lefutott, írd vissza. Így ez idő alatt nem lehet a gombra nyomni.
A gombra meg tegyél egy feltételt, h csak akkor lehet rányomni, ha ez a változó engedi.
14

óóó tényleg köszönöm:) :)

kriszrap · 2011. Május. 14. (Szo), 21.13
Vagy valami más modszer hogy azt ellenorizni hogy még nem töltöt be az oldalt vagy képet vagy iesmi??:) vagy ennek van értelme ilyet csinálni vagy csak jól mutat??:)
15

felhasználói élmény

solkprog · 2011. Május. 14. (Szo), 21.36
Felhasználó élmény javítása miatt szokták kitenni. Akkor tedd oda ha úgy gondolod hogy az nem fogja megzavarni a felhasználót, és érteni fogja. (én szeretem kitenni ).
Szerkesztve: lehet félreértem a kérdésed, de a nap folyamán már több mint 3 szor átszerkesztetted a kérdésed...
16

de amugy ha lassab a net

kriszrap · 2011. Május. 14. (Szo), 22.19
de amugy ha lassab a net akkor tovább lesz ott a animácio??:)
17

igen

solkprog · 2011. Május. 15. (V), 10.56
igen, tovább lesz ott az animáció.
18

hát valahogy nem jön össze.:(

kriszrap · 2011. Május. 21. (Szo), 23.34
hát valahogy nem jön össze.:( A fönti kódót használom de nem jön össze.:( Pedig minden honlapot végig néztem ami erröl szol de más megodást nem tok:(
19

Pontosan mi is?

solkprog · 2011. Május. 22. (V), 00.47
Szerintem én ezt már párszor eljátszottam veled (de nosza újra harapófogózunk):
Pontosan mi nem össze?
20

Na hát egy scriptet találtam

kriszrap · 2011. Május. 22. (V), 08.57
Na hát egy scriptet találtam ez a kódja:

Amugy müxik csak mégsem:D
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js""></script>  //<--- na de ennélkül nem müködik:(
<script>
function loadingAjax(div_id)
{
	$("#"+div_id).html('<img src="ajax-loader.gif"> saving...');
	$.ajax({
		type: "POST",
		url: "script.php",
		data: "name=John&id=28",
		success: function(msg){
			$("#"+div_id).html(msg);
		}
	});
}
</script>

<a href="javascript:void(0);" onclick="loadingAjax('myDiv');">save page</a>

<div id="myDiv"></div>
21

jQuery jQuery nélkül nem megy

solkprog · 2011. Május. 22. (V), 10.25
hát ez ilyen. jQuery kód jQuery kódbázisának betöltése nélkül nem fog menni.

(jQuery-tel JavaScript programozást lehet megkönnyíteni, mert nem kell annyira figyelni a böngészők különböző JavaScript implementálásaira. Pl. XMLHttpRequest vagy az Microsoft féle ActiveXObject("Microsoft.XMLHTTP") )

vagy félreértettelek és más a probléma?
22

vagy is ajaxal csináljam??:)

kriszrap · 2011. Május. 22. (V), 11.14
vagy is ajaxal csináljam??:) ha jól értelmezem nem??:)
jól értelmezted :)
mert ha nem a rakom ezt a kódba:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js""></script> //

akkor nem jó ennyi csak azt nem tudtam miért.
23

fogalomzavaraid vannak

solkprog · 2011. Május. 22. (V), 11.30
El kéne olvasnod valami JavaScript könyvet.. mert kevered a szezont a fazonnal.

JavaScript: ez egy nyelv
Ajax: aszinkron JavaScript és XML rövidítéséből van. Vagyis ez egy technika hogy aszinkron kéréseket küldj és fogadj a szervertől. (Ajax alatt sokan beleértik a szinkron kéréseket és persze nemcsak az XML adattal)
jQuery: egy JavaScript nyelven írt függvénykönyvtár/keretrendszer.
24

de ajaxal is megoldhato?:)

kriszrap · 2011. Május. 22. (V), 12.49
de ajaxal is megoldhato?:)
25

szerinted?

solkprog · 2011. Május. 22. (V), 12.55
20. hozászolásodban a kódod szerinted mi? hmmm?

egy jQuery keretrendszerrel írt AJAX kérés:)

légyszíves olvas el még egyszer a 23. hozászolásomban azt hogy mi micsoda.
26

áá vagy is az ajax az

kriszrap · 2011. Május. 22. (V), 13.31
akkor az ajax kódját hogy lehet fel ismerni ? ajaxot kevernem kel a Queryvel??
27

AJAX

Poetro · 2011. Május. 22. (V), 13.32
Valami még mindig nem tiszta úgy látom. Az AJAX-nak, mint eszköznek semmi köze az adatbázishoz. Az alkalmazásodnak, ami kiszolgálja az AJAX kérésekre a választ lehet kapcsolata az adatbázissal, de ez már akkor is közvetett kapcsolat. Úgyhogy nem jól értelmezed. Előbb legjobb lenne, ha megértenéd azt, mi fut a szerver oldalon, mi fut a böngészőben, és hogyan. Erre létezik rengeteg könyv.
28

na itt egy megoldás ami jó is

kriszrap · 2011. Május. 22. (V), 13.44
na itt egy megoldás ami jó is csak nem tom hogy biztosra jó de sztem nem.(

function like()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("like").innerHTML=xmlhttp.responseText;
    location.href='like.php';
    }else{
    document.getElementById("like").innerHTML = '<img src="ajaxload.gif">';
    }
  }
xmlhttp.open("GET","like_like.php",true);
xmlhttp.send();
}
29

el tudod mondani?

Totti 1986 · 2011. Május. 22. (V), 20.03
Már nem akarok olyan kicsibe összehúzott hsz-t írni, szal nem választ nyomtam, de ez a 28-as hsz-re válasz.

El tudod mondani, h az a kód, amit oda beírtál, sorról sorra mit csinál?
Ha igen, rájössz, h működik-e vagy sem (h úgy működik-e, ahogy te szeretnéd), ha nem, akkor sztem ne is törd magad azon, h bármikor célhoz érsz.

Nos?
30

function like() //funkcio

kriszrap · 2011. Május. 23. (H), 14.28

function like() //funkcio neve
{  
var xmlhttp;  // xmlhttp változó
if (window.XMLHttpRequest)  
  {// code for IE7+, Firefox, Chrome, Opera, Safari  
  xmlhttp=new XMLHttpRequest(); //xmlhttp -nek értéket adunk  
  }  
else  másikor (mert nem minden böngészö kezelei le a window.XMLHttpRequest)
  {// code for IE6, IE5  
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  //xmlhttp -nek értéket adunk.
  }  
xmlhttp.onreadystatechange=function()  
  {  
  if (xmlhttp.readyState==4 && xmlhttp.status==200) //ha van adat akkor ki iratjuk az adatot like divebe. xmlhttp.responseText tartalmazza az adatot
    {  
    document.getElementById("like").innerHTML=xmlhttp.responseText;   
    location.href='like.php';  // hát itt vissza irányitom az elözö oldara 
    }else{ // és ha még nincs adat akkor képet rakunk ki
    document.getElementById("like").innerHTML = '<img src="ajaxload.gif">';  
    }  
  }  
xmlhttp.open("GET","like_like.php",true); // ezzel elinditunk vagy is meg nyitjuk a like_like.php
xmlhttp.send();  
}
31

Na látod

Totti 1986 · 2011. Május. 23. (H), 14.51
megy ez.
Annyi az én észrevételem, hogy a like_like.php vajon miért nem kap egyetlen GET változót sem? Akkor az a php fájl honnan tudja, hogy mit lájkoltak? Emiatt biztos nem jön vissza értelmes adatod.
32

hát ugye van 3 féle gombom

kriszrap · 2011. Május. 23. (H), 15.01
hát ugye van 3 féle gombom ami 2 liek gomb a másik pedig dislike :D.
Az egyik lájk gomb hogy ha még ö nem lájkolt ot akkor uj sort csinál az adatbázisnak és feltölti (INSERT INTO).
A második like az pedig (update) parancsot használ ha érti mit irok?:)
és ami fent van kód abbol külön külön meg csináltam :D
igy 

<script type="text/javascript">
function like()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("like").innerHTML=xmlhttp.responseText;
    location.href='like.php';
     }else{  
    document.getElementById("like").innerHTML = '<img src="ajax-load.gif" height="30" weight="45">';  
    }  
  }
xmlhttp.open("GET","like_like.php",true);
xmlhttp.send();
}
function like2()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("like").innerHTML=xmlhttp.responseText;
    location.href='like.php';
    }else{  
    document.getElementById("like").innerHTML = '<img src="ajax-load.gif" height="30" width="45">';  
    }  
  }
xmlhttp.open("GET","like_like2.php",true);
xmlhttp.send();
}

function unlike()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("like").innerHTML=xmlhttp.responseText;
    location.href='like.php';
    }else{  
    document.getElementById("like").innerHTML = '<img src="ajax-load.gif" height="30" width="45">';  
    }  
  }
xmlhttp.open("GET","like_unlike.php",true);
xmlhttp.send();
}
</script>
33

és mit lájkol?

Totti 1986 · 2011. Május. 23. (H), 15.48
És azt hol adod át, hogy mit lájkol?
34

<div

kriszrap · 2011. Május. 23. (H), 16.00

<div id="like">
<?php
session_start();
ob_start();
include "config.php";
$nick_nevem= "".$_SESSION['nick'];
$cim = "".$_SESSION['honlapcim'];

$result = mysql_query("SELECT * FROM vidlike where cim='$cim' AND nick='$nick_nevem'");

$likeok_tablazat =  mysql_query("SELECT * FROM vidlike where cim='$cim' AND `like`='1'");
$likeok = mysql_num_rows($likeok_tablazat); 

$row = mysql_fetch_array($result);
print ('<span style="color: white;">'.$likeok.' Embernek teszik!</span>');

if (mysql_num_rows($result) == '0')
   {
   print '<br><button type="button" Class="like" name="like2" onclick="like2()"></button><br>';
   }

if ($row['like'] =='0')
  {
  print '<br><button type="button" class="like" name="like" onclick="like()"></button><br>';
}

if ($row['like'] == '1')
   {
  print '<br><button type="button" class="unlike" name="unlike" onclick="unlike()"></button><br>';
}




print ('<span style="color: white;">___________________________________________________________</span>');
?>
</div>
35

Hát, ha 1 oldalon 1 videó

Totti 1986 · 2011. Május. 23. (H), 18.18
Hát, ha 1 oldalon 1 videó van, akkor akár működhet is.
Ha a like_like.php-d jól van megírva.
Kipróbáltad, hogy működik-e?
36

persze:) jó minden csak nem

kriszrap · 2011. Május. 23. (H), 19.38
persze:) jó minden csak nem voltam magamba biztos :)