Giphy Ajax

Giphy Ajax
2019-05-06T09:45:04+02:00
2019-05-06T12:40:43+02:00
2022-10-15T21:31:16+02:00
Zoltán Illó
Sziasztok!

Van egy Ajax chatem. Épp egy Giphy plugint csinálok hozzá. A lényeg hogy rákeres egy témára. Listáz 10-15 GIF-et a Giphy-ről. Ha rákattint beküldi a képet mysql adatbázisba.

$( "#target" ).keyup(function() { var query = $(this).val(); $.ajax({url: 'https://api.giphy.com/v1/gifs/search?api_key=742c6d0ea5bb420bbd4c8f134245fa87&limit=21&rating=g&lang=hu&q='+query}).done(function(e) { $('.giphyimages').html(''); $.each(e.data, function(k, v) { var url = v.images.fixed_width.url; $('.giphyimages').append('<form><input id="giphymessage" name="message" type="text" style="display: none;" value="'+v.images.fixed_width.url+'"><img src="'+url+'" onclick="return clickGiphyButton();" style="float:left;width:100px;height:120px;margin-left:5px;" /></form>'); }); }); });
A v.images.fixed_width.url a link.

Ha rákattint a képre akkor elküldi ajax POST-al az adatbázisba. (clickGiphyButton())

function clickGiphyButton(){ var message=document.getElementById('giphymessage').value; $.ajax({ type:"post", async: true, contentType: 'application/x-www-form-urlencoded', url:"chat_message.php?roomid=<?php echo $_GET["id"]?>", data: { 'message' :message } }); return false; }
A probléma az, hogy mindig az első képet szúrja be, nem pedig azt amire rákattintottam. Ötlet esetleg?

A válaszokat előre is köszönöm.
Mutasd a teljes hozzászólást!
Csatolt állomány
Az id="giphymessage" minden egyes input elemnél ugyanaz, ezért a getElementById csak az elsőt fogja visszaadni. Hagyd ki a formot és az input mezét, a képed meg legyen valami ilyesmi:

$('.giphyimages').append('<img src="'+url+'" onclick="clickGiphyButton(\'' + v.images.fixed_width.url + '\');" style="..." />');
A függvényed meg átveheti az url-t paraméterként:

function clickGiphyButton(message){ $.ajax({...}); }
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd