Forum PHP.pl

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"?

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/ Opcjonalnie może być http://api.jquery.com/toggle/ lub http://api.jquery.com/slideToggle/ .

jQUERY pięknie działa:

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

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

[HTML] pobierz, plaintext 
 <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 
<input type="button" name="submit" value="submit" onClick="ajaxget()" id="submit"/>
....
      <p style="display: none"><img src="loading.gif" border="0"></p>
<script>
    //$("button").click(function () {
    $('#submit').click(function(){
 
    $("p").show("slow");
    });
    </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 
echo "<script>";
echo     " $(\"p\").hide(\"slow\"); ";
echo "</script> ";
[PHP] pobierz, plaintext 

powyższy kod nie działa

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

to jest mój cały plik php:

[PHP] pobierz, plaintext 
<?
    //echo"<script src=\"jquery-latest.min.js\"></script>";
    function checkDomain($domain,$server,$findText){
        // Open a socket connection to the whois server
        $con = fsockopen($server, 43);
        if (!$con) return false;
 
        // Send the requested doman name
        fputs($con, $domain."\r\n");
 
        // Read and store the server response
        $response = ' :';
        while(!feof($con)) {
            $response .= fgets($con,128); 
        }
 
        // Close the connection
        fclose($con);
 
        // Check the response stream whether the domain is available
        if (strpos($response, $findText)){
            return true;
        }
        else {
            return false;   
        }
    }
 
    function showDomainResult($domain,$server,$findText){
       if (checkDomain($domain,$server,$findText)){
 
          echo "<tr><td>$domain</td> <td>&nbsp;&nbsp;&nbsp;</td> <td><B>DOSTĘPNA</B><br /></td></tr>";
       }
       else echo "<tr><td>$domain</td> <td>&nbsp;&nbsp;&nbsp;</td> <td>ZAJĘTA<br /></td></tr>";
    }
 
$domena = $_GET['txtname'];
 
echo "<TABLE>";
showDomainResult($domena.".eu",'whois.eu','No match for');
showDomainResult($domena.".pl",'whois.dns.pl','No information about');
showDomainResult($domena.".com",'whois.crsnic.net','No match for');
showDomainResult($domena.".net",'whois.crsnic.net','No match for');
showDomainResult($domena.".org",'whois.publicinterestregistry.net','NOT FOUND');
showDomainResult($domena.".info",'whois.afilias.net','NOT FOUND');
echo "</TABLE>";
 
 
echo "<script>";
echo     " $(\"p\").hide(\"slow\"); ";
echo "</script> ";
 
?>
[PHP] pobierz, plaintext 

Części javascript nie działają :-( co muszę zmienić?

Ten post edytował cent4 2.09.2010, 20:22:54

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

http://api.jquery.com/jQuery.ajax/


zamiast ALERT masz dac ukrycie diva

Wstawiłem taki kod na końcu index.html i dalej nie działa:

[HTML] pobierz, plaintext 
<script>
    $.ajax({
    url: 'index.html',
    success: function(data) {
    $('.result').html(data);
    $("p").hide("slow");
    }
    });
    </script>
[HTML] pobierz, plaintext 

Ten post edytował cent4 2.09.2010, 20:42:30

Bo to jest przykład! Człowieku myśl i czytaj dokumentacje!

Przestudiowałem dokumentację - stworzyłem skrypt ale coś dalej mi nie działa:

[HTML] pobierz, plaintext 
$('#loading').hide();
$('#submit').click(function(){
    $.ajax({
        url: 'basicform.php',
        success: function(data) {
            $('.result').html(data);
            $('#loading').hide("slow");
        },
        beforeSend: function(){
            $('#loading').show();
        };
 
    })
};
[HTML] pobierz, plaintext 

plik html:

[HTML] pobierz, plaintext 
<p id="loading" ><img src="loading-mini.gif" alt="" /> pobieranie...</p>
[HTML] pobierz, plaintext 

kurde.... ale jakie "coś" ci nie działa. Nie pokazuje sie? Nie chowa sie? komputer dymi?

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

<p id="loading" style="display:none;">....
i juz. No nie robcie wszystkiego na js.

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

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.

to jest mój przycisk submit:

<input type="button" name="submit" value="submit" onClick="ajaxget()" id="submit"/>

Ł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ś.

Oto cały kod;

[HTML] pobierz, plaintext 
<html>
    <head>
        <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">
        <title>PHP using AJAX</title>
        <script type="text/javascript" src="google_ga.js"></script>
        <script type="text/javascript" src="jquery-1.4.min.js"></script>
 
            <script type="text/javascript">
            function ajaxRequest(){
             var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
             if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
              for (var i=0; i<activexmodes.length; i++){
               try{
                return new ActiveXObject(activexmodes[i])
               }
               catch(e){
                //suppress error
               }
              }
             }
             else if (window.XMLHttpRequest) // if Mozilla, Safari etc
              return new XMLHttpRequest()
             else
              return false
            }
 
            function ajaxget(){
            var mygetrequest=new ajaxRequest()
            mygetrequest.onreadystatechange=function(){
            if (mygetrequest.readyState==4){
            if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
            document.getElementById("result").innerHTML=mygetrequest.responseText
            }
            else{
            alert("An error has occured making the request")
            }
            }
            }
            var txtnamevalue=encodeURIComponent(document.getElementById("txtname").value)
            mygetrequest.open("GET", "basicform.php?txtname="+txtnamevalue, true)
            mygetrequest.send(null)
 
            }
        </script>
 
 
 
 
 
 
    <script type="text/javascript">
        $('#loading').hide();
        $('#submit').click(function(){
            $.ajax({
                url: 'basicform.php',
                success: function(data) {
                    $('.result').html(data);
                    $('#loading').hide("slow");
                },
                beforeSend: function(){
                    $('#loading').show();
                }
 
            })
        };
    </script>
 
    <style type="text/css">
    #loading {
        position: absolute;
        width: 150px;
        padding: 5px;
        background: white;
        border: 1px solid gray;
        font-family: Courier New, Verdana;
        font-size: 40%; 
 
    }
    #loading img {
        vertical-align: middle;
    }
    </style>
 
    </head>
 
    <body>
        <form action="" method="get" id="target">
            <table>
                <tr>
                    <td>Sprawdź czy domena jest dostępna</td>
                    <td>
                        <input type="text" name="txtname" id="txtname" />
                    </td>
                </tr>
 
                <tr>
                    <td colspan="2">
                        <CENTER>
                            <input type="button" name="submit" value="submit" onClick="ajaxget()" id="submit"/>
                        </CENTER>
                    </td>
                </tr>
            </table>
 
 
        </form>
 
        <p id="loading" style="display:none;"><img src="loading-mini.gif" alt="" /> pobieranie...</p>
 
        <span id="result"></span>
 
    </body>
</html>
[HTML] pobierz, plaintext 

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 
<html>
    <head>
        <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">
        <title>PHP using AJAX</title>
        <script type="text/javascript" src="google_ga.js"></script>
        <script type="text/javascript" src="jquery-1.4.min.js"></script>
     <script type="text/javascript">
        $('#loading').hide();
        $('#submit').click(function(){
            $.ajax({
                url: 'basicform.php',
                success: function(data) {
                    $('#result').html(data);
                    $('#loading').hide("slow");
                },
                beforeSend: function(){
                    $('#loading').show();
                }
 
            })
        };
    </script>
 
    <style type="text/css">
    #loading {
        position: absolute;
        width: 150px;
        padding: 5px;
        background: white;
        border: 1px solid gray;
        font-family: Courier New, Verdana;
        font-size: 40%; 
 
    }
    #loading img {
        vertical-align: middle;
    }
    </style>
 
    </head>
 
    <body>
        <form action="" method="get" id="target">
            <table>
                <tr>
                    <td>Sprawd� czy domena jest dost�pna</td>
                    <td>
                        <input type="text" name="txtname" id="txtname" />
                    </td>
                </tr>
 
                <tr>
                    <td colspan="2">
                        <CENTER>
                            <input type="button" name="submit" value="submit" id="submit"/>
                        </CENTER>
                    </td>
                </tr>
            </table>
 
 
        </form>
 
        <p id="loading" style="display:none;"><img src="loading-mini.gif" alt="" /> pobieranie...</p>
 
        <span id="result"></span>
 
    </body>
</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.

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