+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: JS ? (/thread-js)
Strony:
1
2
JS ? - SanKylo - 25-12-2011
Załóżmy mam plik html i php , działający na zasadzie from action
W pliku html są pola "input "oraz przycisk do wygnerowania kodu.
Chciałbym aby kod pojawiał się na tej samej stronie na takiej zasadzie jak na Facebook
http://developers.facebook.com/docs/reference/plugins/like/
: Czyli kilkamy GET CODE i pokazuję się okienko.
O ile się nie mylę to jest to JS , poproszę o rady/skrypt do takiego gadżetu
RE: JS ? - szym - 25-12-2011
http://jqueryui.com/demos/dialog/#default
a swoją drogą jeśli masz zakładać nowy temat za każdym razem jak czegoś szukasz to może daruj sobie i załóż jeden zbiorczy. Wystarczy skorzystać z google.
RE: JS ? - Raalsky - 25-12-2011
Ogólnie zasada tego jest taka. Po kliknięciu przycisku wysyłającego w formularzu JavaScript musi przechwycić to zdarzenie i przy użyciu XMLHTTPRequest przesłać dane poprzez metodę GET do serwera. Sprowadza się to do odczytu pliku z odpowiednio sformułowanym adresem np. plik.php?pole1=wartosc1 itp. Po pobraniu przy wykorzystaniu metod DOMu JavaScript powinien zaktualizować formularz. Trzeba też pamiętać, aby na koniec zdarzenia dodać "return: false;" - dlaczego? w przeciwnym razie skrypt przeładuje nas dalej do pliku zawartego w formularzu.
jQuery UI to trochę przesada. Jednak jQuery powinno jak najbardziej wystarczyć.
Oto mój przykład:
plik index.html:
Kod PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX test</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#submit").click(function() {
var text = $("#text").attr("value");
$.ajax({
url: "get.php?text="+text,
success: function(data) {
$('#result').html(data);
}
});
return false;
});
});
</script>
</head>
<body>
<form method="get" action="get.php">
<input type="text" id="text" name="text" />
<input type="submit" id="submit" />
</form>
<div id="result"></div>
</body>
</html>
Kod PHP:
<?php echo("You sended me: ".$_GET['text']); ?>RE: JS ? - szym - 25-12-2011
Raalsky ale zauważ że kolega chciał aby wyskakiwało "nowe okienko" a nie tylko użyć AJAX do przesłania danych do PHP więc chyba najprościej będzie dla kogoś kto jest dopiero na samym początku nauki użyć jQuery UI albo też może dodać dodatkowego diva ustawić go na środku ekranu i za pomocą z-index dać go ponad inne elementy. Jak kto woli
RE: JS ? - Kartofelek - 25-12-2011
Hmm. Koledzy mącicie że hej
Przecie tutaj żadnego submita nie ma.
Kod:
$('#guzik').click(function() {
var text = $('#jakis_input').val() + 'kawalek kodu'+ $('#jakis_inny_input').val() + ......
alert(text);
})Oczywiście alert to tylko przykład, tak samo jak "jakis_input". Po prostu po kliknieciu na przycisk pokazujący kod (niby wysylajacy)
pokazujesz kod który składasz ze zmiennych z ustawionych pól. To mogą być radio, tekstowe itp. PODSTAWY JS.
Pokazanie popupa to też prosta sprawa. Tworzysz taki w css (dokładnie 4 elementy - z zamykaniem włącznie) i do jego wnętrza wrzucasz html który jest twoją zmienną text
Kod:
if (!$('#popupCode:visible').length) {
$('body').append('<div class="popup" id="popupCode"><div class="container"><span class="close">x</span><div>'+text+'</div></div></div>').fadeIn();$('#popupCode > div > div').empty().html(text);
}
[/code]
Reszta to tylko stylowanie
Podany kod oczywiście jest w jQuery tylko po to by był krótszy
RE: JS ? - SanKylo - 25-12-2011
Panie Raalsky , wytłumacz mi tutaj pan to najlepiej , z racji gotowego kodu . Jednak nie o to mi tutaj chodziło , ponieważ chciałbym aby tekst pojawiał się tak jak na FaceBoku , czyli W " nowym okienku " .
A Pana wyżej nie zrozumiałem , jeśli było by można poproszę o index.html i .php , czyli taki przykład . Z góry dziękuje za pomoc.
Przepraszam , ale jestem początkujący : *
RE: JS ? - Raalsky - 25-12-2011
SanKylo. Mój przykład jest praktycznie bardzo podobny do tych Facebookowych. Wystarczy jedynie odpowiednio sformatować tego diva, co tam dałem przy użyciu CSS. Nie pisałem tego z racji czystości samego kodu i braku miejsca. Skupiłem się na samym pobraniu danych. Wystarczy, że teraz dodasz jeszcze w kodzie trochę formatowania dla tego elementu, aby przypominał wyglądem okienko. Oto mój przykładowy kod:
Kod PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX test</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$('#result').css('display','none');
$("#submit").click(function() {
var text = $("#text").attr("value");
$.ajax({
url: "get.php?text="+text,
success: function(data) {
$('#result').html(data);
$('#result').show('slow');
}
});
return false;
});
});
</script>
<style>
#result {
background-color: #fff;
border: 1px solid #00f;
width: 200px;
height: 100px;
position: absolute;
margin-left: 100px;
margin-top: 25px;
}
</style>
</head>
<body>
<form method="get" action="get.php">
<input type="text" id="text" name="text" />
<input type="submit" id="submit" />
</form>
<div id="result"></div>
</body>
</html>
Jest to ten sam kod, co wcześniej, ale dodany styl dla tego elementu i na początku kodu JavaScript ukrycie go. Po otrzymaniu danych od serwera okienko "wyskoczy". Na takiej zasadzie działa facebook.
@SanKylo: Dziękuję ;-)
RE: JS ? - SanKylo - 25-12-2011
Dziękuje , oczywiście pozytyw już dałem
.Właśnie o to mi chodziło : *
RE: JS ? - SanKylo - 26-12-2011
Mam nowy problem , otóż dotyczny on poprawnego działania skryptu , skrypt nie działa poprawnie jeśli otwiera się na tej samej stronie , działa tylko jak otworzy na swojej :C
Na 100% to w pliku HTML .
Kod:
<form method="get" action="get.php">
<br>Nazwa serwera
</br> <input type="text" name="nazwa" size="60" />
<br>Strona serwera
</br> <input type="text" name="strona" size="60" />
<br>Rejestracja
</br> <input type="text" name="reg" size="60" />
<br>Client
</br> <input type="text" name="client" size="60" />
<br>Ranking
</br> <input type="text" name="rank" size="60" />
<br>Item Shop
</br> <input type="text" name="is" size="60" />
<br>Adres IP serwera
</br> <input type="text" name="ip" size="60" />
<br>Status serwera
</br> <input type="text" name="status" size="60" />
<br>Spolszczenie
</br> <input type="text" name="pl" size="60" />
<br>Skan spolszczenia
</br> <input type="text" name="skan" size="60" />
<br>Sieci :
</br> <input type="text" name="sieci1" size="60" />
</br> <input type="text" name="sieci2" size="60" />
</br> <input type="text" name="sieci3" size="60" />
</br> <input type="text" name="sieci4" size="60" />
<br>Haslo do sieci
</br> <input type="text" name="hasԯ" size="60" />
<br>Handlarze
</br> <input type="text" name="img" size="60" />
<br>Na start (podaj link do obrazka)
</br> <input type="text" name="start" size="60" />
<br>Ulepszacze
</br> <input type="text" name="ulepszacze" size="60" />
<br>GamePlay
</br> <input type="text" name="yt" size="60" />
<br>Iloݦ zdobywanego doݷiadczenie
</br> <input type="text" name="exp" size="60" />
<br>Szanse na drop przedmiotu
</br> <input type="text" name="drop" size="60" />
<br>Iloݦ zdobywanych yang
</br> <input type="text" name="yang" size="60" />
<br>Kontakt z administratorem serwera
</br> <input type="text" name="kontakt" size="60" />
<br>Dodatkowe informacje o serwerze
</br> <input type="text" name="info" size="60" />
<br><input type="submit" id="submit" /></br>
<div id="result"></div>
</form><input type="submit" id="submit" /> na <input type="value="GET CODE" />
skrypt , czyli generowania kodu działa , ale nie otwiera się w nowym oknie ( Karcie )
i nie działa ten JS.
Próbowałem zmienić $("#submit").click(function() {
na $("#value").click(function() {
ale nic nie dało , bo nie bierze pod wzgląd result. :X
Tutaj , poprawnie działająca :
http://sv.xaa.pl/test.html , ale w nowym oknie
Natomiast tutaj
http://sv.xaa.pl/test2.html
Tak jak powinno być , lecz bez działąjącego skryptu :C
Co zmienić ? Wiem że coś w JS.
RE: JS ? - Kartofelek - 26-12-2011
id="submit" w jquery #submit
id="value" w jquery #value
czyli na logikę u ciebie jest fatalnie źle. Pomylileś wszystko dlatego ci nie działa. Spójrz spokojnie raz jeszcze na to co napisałeś...
PS. co to jest w ogóle <input type="value="GET CODE" />???