Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML][PHP]Div widoczny po naciśnięciu przycisku
Forum PHP.pl > Forum > Przedszkole
cent4
1.09.2010, 19:17:22
Witam.
Mam przycisk i po jego naciśnięciu wykonuje się pewien javascript (który wywołuje pewne zdarzenia z pliku php)
1. Jak zrobić (co do tego java scriptu dopisać) żeby po naciśnięciu przycisku pojawił się pewien div np. z treścią - "wykonuję skrypt"?
2. A po wykonaniu skryptu - jak zrobić, żeby po wypisaniu pewnych danych z php na jego końcu - ukryć tego div'a z treścią "wykonuję skrypt"?
IceManSpy
1.09.2010, 19:59:48
Nie wiem jak zrobić to w czystym JS ale w jQuery masz do tego funkcję show: http://api.jquery.com/show/ A co do chowania do hide: http://api.jquery.com/hide/ smile.gif Opcjonalnie może być http://api.jquery.com/toggle/ lub http://api.jquery.com/slideToggle/ .
Skie
1.09.2010, 20:04:45
Kod
document.getElementById(id_diva).style.display = "block"; // pokazuje div'a
document.getElementById(id_diva).style.display = "none"; // chowa div'a
cent4
1.09.2010, 21:56:06
jQUERY pięknie działa:

[HTML] pobierz, plaintext 
  1. <button>Show it</button>
  2.  
  3.       <p style="display: none">Hello  2</p>
  4. <script>
  5.     $("button").click(function () {
  6.     $("p").show("slow");
  7.     });
  8.     </script
[HTML] pobierz, plaintext


tylko, że ja bym chciał, żeby to działało z przyciskiem z formularza:

[HTML] pobierz, plaintext 
  1.  <input type="button" name="submit" value="submit" onClick="ajaxget()" />
[HTML] pobierz, plaintext


a nie z przyciskiem: <button>Show it</button>

?

pojawianie się diva już zrobiłem:
[HTML] pobierz, plaintext 
  1. <input type="button" name="submit" value="submit" onClick="ajaxget()" id="submit"/>
  2. ....
  3.       <p style="display: none"><img src="loading.gif" border="0"></p>
  4. <script>
  5.     //$("button").click(function () {
  6.     $('#submit').click(function(){
  7.  
  8.     $("p").show("slow");
  9.     });
  10.     </script>
[HTML] pobierz, plaintext


a teraz wykonuje się skrypt php i jak na jego końcu po wypisaniu danych ukryć ponownie tego diva?

[PHP] pobierz, plaintext 
  1. echo "<script>";
  2. echo     " $(\"p\").hide(\"slow\"); ";
  3. echo "</script> ";
[PHP] pobierz, plaintext


powyższy kod nie działa sciana.gif
kamil4u
2.09.2010, 13:15:34
Możliwości jest kilka:
- DOM nie został załadowany (w jQuery to chyba $(document).ready )
- w ogóle nie wczytałeś pliku jQuery

Spr. co zawiera konsola błędów
cent4
2.09.2010, 20:21:37
to jest mój cały plik php:
[PHP] pobierz, plaintext 
  1. <?
  2.     //echo"<script src=\"jquery-latest.min.js\"></script>";
  3.     function checkDomain($domain,$server,$findText){
  4.         // Open a socket connection to the whois server
  5.         $con = fsockopen($server, 43);
  6.         if (!$con) return false;
  7.  
  8.         // Send the requested doman name
  9.         fputs($con, $domain."\r\n");
  10.  
  11.         // Read and store the server response
  12.         $response = ' :';
  13.         while(!feof($con)) {
  14.             $response .= fgets($con,128); 
  15.         }
  16.  
  17.         // Close the connection
  18.         fclose($con);
  19.  
  20.         // Check the response stream whether the domain is available
  21.         if (strpos($response, $findText)){
  22.             return true;
  23.         }
  24.         else {
  25.             return false;   
  26.         }
  27.     }
  28.  
  29.     function showDomainResult($domain,$server,$findText){
  30.        if (checkDomain($domain,$server,$findText)){
  31.  
  32.           echo "<tr><td>$domain</td> <td>&nbsp;&nbsp;&nbsp;</td> <td><B>DOSTĘPNA</B><br /></td></tr>";
  33.        }
  34.        else echo "<tr><td>$domain</td> <td>&nbsp;&nbsp;&nbsp;</td> <td>ZAJĘTA<br /></td></tr>";
  35.     }
  36.  
  37. $domena = $_GET['txtname'];
  38.  
  39. echo "<TABLE>";
  40. showDomainResult($domena.".eu",'whois.eu','No match for');
  41. showDomainResult($domena.".pl",'whois.dns.pl','No information about');
  42. showDomainResult($domena.".com",'whois.crsnic.net','No match for');
  43. showDomainResult($domena.".net",'whois.crsnic.net','No match for');
  44. showDomainResult($domena.".org",'whois.publicinterestregistry.net','NOT FOUND');
  45. showDomainResult($domena.".info",'whois.afilias.net','NOT FOUND');
  46. echo "</TABLE>";
  47.  
  48.  
  49. echo "<script>";
  50. echo     " $(\"p\").hide(\"slow\"); ";
  51. echo "</script> ";
  52.  
  53. ?>
[PHP] pobierz, plaintext


Części javascript nie działają :-( co muszę zmienić?
nospor
2.09.2010, 20:27:07
przekombinowales.
Skoro skrypt php jest wczytany ajaxem i po jego wczytaniu chcesz ukryc diva to musisz to zrobic w zdarzeniu ajaxa a nie w skrypcie który ajaxem wczytales smile.gif

http://api.jquery.com/jQuery.ajax/
Cytat
success is called if the request succeeds. It is passed the returned data, a string containing the success code, and the XMLHttpRequest object.

Cytat
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});

zamiast ALERT masz dac ukrycie diva
cent4
2.09.2010, 20:41:09
Wstawiłem taki kod na końcu index.html i dalej nie działa:

[HTML] pobierz, plaintext 
  1. <script>
  2.     $.ajax({
  3.     url: 'index.html',
  4.     success: function(data) {
  5.     $('.result').html(data);
  6.     $("p").hide("slow");
  7.     }
  8.     });
  9.     </script>
[HTML] pobierz, plaintext
Wicepsik
2.09.2010, 20:43:31
Bo to jest przykład! sciana.gif Człowieku myśl i czytaj dokumentacje!
cent4
3.09.2010, 10:46:30
Przestudiowałem dokumentację - stworzyłem skrypt ale coś dalej mi nie działa:

[HTML] pobierz, plaintext 
  1. $('#loading').hide();
  2. $('#submit').click(function(){
  3.     $.ajax({
  4.         url: 'basicform.php',
  5.         success: function(data) {
  6.             $('.result').html(data);
  7.             $('#loading').hide("slow");
  8.         },
  9.         beforeSend: function(){
  10.             $('#loading').show();
  11.         };
  12.  
  13.     })
  14. };
[HTML] pobierz, plaintext


plik html:

[HTML] pobierz, plaintext 
  1. <p id="loading" ><img src="loading-mini.gif" alt="" /> pobieranie...</p>
[HTML] pobierz, plaintext
nospor
3.09.2010, 10:49:15
Cytat
ale coś dalej mi nie działa:
kurde.... ale jakie "coś" ci nie działa. Nie pokazuje sie? Nie chowa sie? komputer dymi?
cent4
3.09.2010, 10:57:11
podczas otwierania strony:
<p id="loading" ><img src="loading-mini.gif" alt="" /> pobieranie...</p>
jest widoczny - ładuje się - widać animację pobieranie danych, a ma być nie widoczny - widoczny ma być dopiero po naciśnięciu buttona i ma zniknąć jak ajax pobierze dane z pliku php
nospor
3.09.2010, 11:00:59
<p id="loading" style="display:none;">....
i juz. No nie robcie wszystkiego na js.
cent4
3.09.2010, 11:05:56
A toś mnie teraz zaskoczył...

Myślisz, że nie próbowałem z style="display:none;"...

Nie działa - tzn. element jest ukryty podczas startu ale javascript nie komunikuje się poprawnie z tym elementem - tzn. nie pokazuje go po naciśnięciu przycisku i nie ukrywa go po otrzymaniu odpowiedzi od ajaxa...
mortus
3.09.2010, 11:25:29
A czy ten przycisk ma atrybut id o wartości submit (id="submit"), bo $('#submit').click(...) przechwytuje zdarzenie kliknięcia na czymś, co ma id o wartości submit.
cent4
3.09.2010, 11:28:48
to jest mój przycisk submit:

<input type="button" name="submit" value="submit" onClick="ajaxget()" id="submit"/>
mortus
3.09.2010, 11:32:17
Łudząco podobny do tego sprzed kilku postów tyle, że tam nie było id ustawione. Proponuję, abyś pokazał cały kod, bo wydaje mi się, że trochę przedobrzyłeś.
cent4
3.09.2010, 11:42:12
Oto cały kod;

[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">
  4.         <title>PHP using AJAX</title>
  5.         <script type="text/javascript" src="google_ga.js"></script>
  6.         <script type="text/javascript" src="jquery-1.4.min.js"></script>
  7.  
  8.             <script type="text/javascript">
  9.             function ajaxRequest(){
  10.              var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
  11.              if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
  12.               for (var i=0; i<activexmodes.length; i++){
  13.                try{
  14.                 return new ActiveXObject(activexmodes[i])
  15.                }
  16.                catch(e){
  17.                 //suppress error
  18.                }
  19.               }
  20.              }
  21.              else if (window.XMLHttpRequest) // if Mozilla, Safari etc
  22.               return new XMLHttpRequest()
  23.              else
  24.               return false
  25.             }
  26.  
  27.             function ajaxget(){
  28.             var mygetrequest=new ajaxRequest()
  29.             mygetrequest.onreadystatechange=function(){
  30.             if (mygetrequest.readyState==4){
  31.             if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
  32.             document.getElementById("result").innerHTML=mygetrequest.responseText
  33.             }
  34.             else{
  35.             alert("An error has occured making the request")
  36.             }
  37.             }
  38.             }
  39.             var txtnamevalue=encodeURIComponent(document.getElementById("txtname").value)
  40.             mygetrequest.open("GET", "basicform.php?txtname="+txtnamevalue, true)
  41.             mygetrequest.send(null)
  42.  
  43.             }
  44.         </script>
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.     <script type="text/javascript">
  52.         $('#loading').hide();
  53.         $('#submit').click(function(){
  54.             $.ajax({
  55.                 url: 'basicform.php',
  56.                 success: function(data) {
  57.                     $('.result').html(data);
  58.                     $('#loading').hide("slow");
  59.                 },
  60.                 beforeSend: function(){
  61.                     $('#loading').show();
  62.                 }
  63.  
  64.             })
  65.         };
  66.     </script>
  67.  
  68.     <style type="text/css">
  69.     #loading {
  70.         position: absolute;
  71.         width: 150px;
  72.         padding: 5px;
  73.         background: white;
  74.         border: 1px solid gray;
  75.         font-family: Courier New, Verdana;
  76.         font-size: 40%; 
  77.  
  78.     }
  79.     #loading img {
  80.         vertical-align: middle;
  81.     }
  82.     </style>
  83.  
  84.     </head>
  85.  
  86.     <body>
  87.         <form action="" method="get" id="target">
  88.             <table>
  89.                 <tr>
  90.                     <td>Sprawdź czy domena jest dostępna</td>
  91.                     <td>
  92.                         <input type="text" name="txtname" id="txtname" />
  93.                     </td>
  94.                 </tr>
  95.  
  96.                 <tr>
  97.                     <td colspan="2">
  98.                         <CENTER>
  99.                             <input type="button" name="submit" value="submit" onClick="ajaxget()" id="submit"/>
  100.                         </CENTER>
  101.                     </td>
  102.                 </tr>
  103.             </table>
  104.  
  105.  
  106.         </form>
  107.  
  108.         <p id="loading" style="display:none;"><img src="loading-mini.gif" alt="" /> pobieranie...</p>
  109.  
  110.         <span id="result"></span>
  111.  
  112.     </body>
  113. </html>
[HTML] pobierz, plaintext
mortus
3.09.2010, 12:09:35
Jeśli plik jquery-1.4.min.js i plik basicform.php znajdują się w tym samym katalogu, co poniższy plik to wszystko powinno działać prawidłowo.
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">
  4.         <title>PHP using AJAX</title>
  5.         <script type="text/javascript" src="google_ga.js"></script>
  6.         <script type="text/javascript" src="jquery-1.4.min.js"></script>
  7.      <script type="text/javascript">
  8.         $('#loading').hide();
  9.         $('#submit').click(function(){
  10.             $.ajax({
  11.                 url: 'basicform.php',
  12.                 success: function(data) {
  13.                     $('#result').html(data);
  14.                     $('#loading').hide("slow");
  15.                 },
  16.                 beforeSend: function(){
  17.                     $('#loading').show();
  18.                 }
  19.  
  20.             })
  21.         };
  22.     </script>
  23.  
  24.     <style type="text/css">
  25.     #loading {
  26.         position: absolute;
  27.         width: 150px;
  28.         padding: 5px;
  29.         background: white;
  30.         border: 1px solid gray;
  31.         font-family: Courier New, Verdana;
  32.         font-size: 40%; 
  33.  
  34.     }
  35.     #loading img {
  36.         vertical-align: middle;
  37.     }
  38.     </style>
  39.  
  40.     </head>
  41.  
  42.     <body>
  43.         <form action="" method="get" id="target">
  44.             <table>
  45.                 <tr>
  46.                     <td>Sprawd� czy domena jest dost�pna</td>
  47.                     <td>
  48.                         <input type="text" name="txtname" id="txtname" />
  49.                     </td>
  50.                 </tr>
  51.  
  52.                 <tr>
  53.                     <td colspan="2">
  54.                         <CENTER>
  55.                             <input type="button" name="submit" value="submit" id="submit"/>
  56.                         </CENTER>
  57.                     </td>
  58.                 </tr>
  59.             </table>
  60.  
  61.  
  62.         </form>
  63.  
  64.         <p id="loading" style="display:none;"><img src="loading-mini.gif" alt="" /> pobieranie...</p>
  65.  
  66.         <span id="result"></span>
  67.  
  68.     </body>
  69. </html>
[HTML] pobierz, plaintext

Jeśli nie działa polecam zainstalować Firebug'a dla Firefox'a i sprawdzać żądania w zakładce Sieć.

Prześledź zmiany. Skoro używamy jquery, to Twoje funkcje nie są potrzebne.
cent4
3.09.2010, 19:25:27
powyższa treść nie działa - sprawdzam wszystko Firebugiem - tak jak zasugerowałeś

jeszcze jedna uwaga - niewiedzieć czemu jak usunę moje funkcje wogóle mi nic nie działa ajax - klikam w button i nic się niedzieje...
mortus
3.09.2010, 19:55:57
A jquery się w ogóle ładuje?

No oczywiście, że nie działa, bo nie ma prawa działać. Zastąp odpowiedni kod tym:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.   $('#loading').hide();
  4.   $('#submit').click(function(){
  5.     $.ajax({
  6.       url: basicform.php,
  7.       succes: function(data) {
  8.         $('#result').html(data);
  9.         $('#loading').hide('slow');
  10.       },
  11.       beforeSend: function() {
  12.         $('#loading').show();
  13.       }
  14.     });
  15.   });
  16. });
  17. </script>
[HTML] pobierz, plaintext
Brakowało tego, co w jQuery najistotniejsze, czyli $(document).ready(...);. Poza tym nawiasy były źle pozamykane.
cent4
3.09.2010, 20:32:01
Firebugiem nie znajduję żadnych błędów.

dalej nic - nie ma okna animacji podczas działania ajax.

Szukam też metody jak sprawdzić na szybko czy jQUERY się załadowało - bo coś mi się wydaje, że nie.

Wywołałem:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3.     function powitanie()
  4.     {
  5.         alert('Witaj');
  6.     }
  7.  
  8.     var obj = jQuery(document);
  9.     obj.ready(powitanie);
  10.  
  11.     </script>
[HTML] pobierz, plaintext


i mam informację "Witaj" - więc jquery działa...

już jest prawie ok.
Animacja się ładuje - problem był w:
url: basicform.php,
Miało być url: 'basicform.php',

Animacja się teraz ładuje ale się nie chowa jak już się kończy wszystko.
mortus
3.09.2010, 20:35:11
Bo success pisze się przez dwa s na końcu. Przepraszam za literówkę.
cent4
4.09.2010, 19:51:18
Niestety nie pomogło :-(.

Jak sprawdzam firebugiem to widzę dziwną rzecz:

skrypt jak gdyby startuje dwa razy:
http://localhost/~domena2222222/basicform.php?txtname=domena
i
http://localhost/~domena2222222/basicform.php

1 się zatrzymuje jak już mam pokaz efektów wyszukiwań, a ten drugi ciągle jest przetwarzany.

Wygląda na to, jakby basicform startował 2 razy - nie wiem gdzie leży problem?

Sprawdzam i szukam.
Problem jest chyba w formularzu:
[HTML] pobierz, plaintext 
  1. <form action="" method="get" >
  2.             <table>
  3.                 <tr>
  4.                     <td>Sprawdź czy domena jest dostępna</td>
  5.                     <td>
  6.                         <input type="text" name="txtname" id="txtname" />
  7.                     </td>
  8.                 </tr>
  9.  
  10.                 <tr>
  11.                     <td colspan="2">
  12.                         <CENTER>
  13.                             <input type="button"  value="submit" onClick="ajaxget()" id="submit"/>
  14.                         </CENTER>
  15.                     </td>
  16.                 </tr>
  17.             </table>
  18.  
  19.  
  20.         </form>
[HTML] pobierz, plaintext


Problem z: onClick="ajaxget()"

ale nie jestem pewien i nie wiem jak to rozwiązać...

Już wiem - problem leży po stronie ajaxu:

url: 'basicform.php',

ale nadal nie wiem jak go usunąć :-(

Ktoś ma jakiś pomysł?

Rozwiązałem to w "dziwny sposób":

zmieniłem poniższy kod i działa ok:

[HTML] pobierz, plaintext 
  1. function ajaxget(){
  2.             var mygetrequest=new ajaxRequest()
  3.             mygetrequest.onreadystatechange=function(){
  4.             if (mygetrequest.readyState==4){
  5.             if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
  6.             document.getElementById("result").innerHTML=mygetrequest.responseText ; 
  7.             $('#loading').hide();
  8.             }
  9.             else{
  10.             alert("An error has occured making the request")
  11.             }
  12.             }
  13.             }
  14.             var txtnamevalue=encodeURIComponent(document.getElementById("txtname").value)
  15.             mygetrequest.open("GET", "basicform.php?txtname="+txtnamevalue, true)
  16.             mygetrequest.send(null)
  17.  
  18.             }
  19.         </script>
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.     <script type="text/javascript">
  27.     $(document).ready(function() {
  28.       $('#loading').hide();
  29.       $('#submit').click(function(){
  30.         $.ajax({
  31.           url: 'basicform.php',
  32.           //cache: false,
  33.           timeout: '500',
  34.           success: function(data) {
  35.             $('#result').html(data);
  36.             $('#loading').hide('slow');
  37.           },
  38.           beforeSend: function() {
  39.             $('#loading').show();
  40.           }
  41.         });
  42.       });
  43.     });
  44.     </script>
  45.  
[HTML] pobierz, plaintext


W funkcji: function ajaxget() - w drugim ifie dopisałem: $('#loading').hide();

W javascript odpowiedzialne za jquery - dopisałem: timeout: '500',

W Firebug'u dostaję info, że
skrypt startujący dwa razy:
http://localhost/~domena2222222/basicform.php?txtname=domena
i
http://localhost/~domena2222222/basicform.php

ten drugi zwraca błąd po pół sekundzie i się wywala, a jak skończy się pierwsze wywołanie basicform (z parametrem) - animacja znika.

Wszystko działa teraz ok, ale czy takie rozwiązanie, które gdzieś tam ma błąd może być ok?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.