Forum PHP.pl > Komunikacja między kilkoma plikami w ajax

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Komunikacja między kilkoma plikami w ajax

lmdl

8.01.2009, 12:45:33

Witam.

Mam taki problem. Może zacznę od razu od specyfikacji technicznej.
Mam dwa pliki w projekcie main.php oraz menu.php.

Plik menu.php jest "includowany" przy pomocy mintajax do main.php. Jest to menu główne.

W pliku main.php znajduje się okno logowania które pojawia się przy użyciu jquery, po naciśnięciu odpowiedniego przycisku w menu.
Problem w tym że funkcja pokazująca to okienko znajduje się w pliku main.php natomiast przycisk wywołujący znajduje się w menu czyli w innym pliku. Funkcja nie może chyba odnaleźć tego elementu skoro jest w innym pliku.

Wiecie jak zrobić żeby to działało ?

Rafal Filipek

8.01.2009, 14:21:17

pozaz jakis kod ( funkcje + kod menu ).

lmdl

8.01.2009, 20:34:31

Wygląda to mniej więcej tak:

Kod

Plik menu:

Kod

<ul>
     <li><a href="#">Start</a></li>
       <li><a href="#">Zarejestruj się</a></li>
     <li><a href="#">Kontakt</a></li>
     <li style="position:absolute; left:800px; border-right:none"><a id="login_show_hide" href="#">Zaloguj się</a></li>
</ul>

Wszystko powinno działać w taki sposób że ładuje menu z zewnętrznego pliku, i po kliknięciu w zaloguj się ma mi wyjechać okienko logowania przy pomocy jquery. Kiedy wszystko jest w jednym pliku to działa prawidłowo, natomiast kiedy jest w 2 to nie działa. Może macie inny pomysł jak się powinno ładować menu przy pomocy ajaxa żeby można było je w dowolnym momencie przeładować bez przeładowania całej strony ?

Rafal Filipek

8.01.2009, 20:46:01

http://docs.jquery.com/Ajax/load#urldatacallback - metoda load moze przyjąc callback jako 3 argument. zobacz jak to jest w zakladce examples ( ostatni przykład )

lmdl

8.01.2009, 20:59:33

Niestety nic to nie daje. Albo nie potrafię tego użyć. A poza tym dlaczego w moim kodzie źródłowym nie ma tej zaimportowanej treści, pomimo tego że na stronie jest.

Rafal Filipek

8.01.2009, 21:01:07

No to pokaż jak tego używasz. Jak weźmiesz np w FF Ctrl+U to nie będziesz tego widział. Zaznacz myszką fragment strony i kliknij "pokaż źródło zaznaczenia".

lmdl

8.01.2009, 21:08:59

Właściwie to teraz zgłupiałem już, i sam nie wiem jak tego użyć. skopiowałem przedtem tą funkcję i wstawiłem pod swoje nazwy stron. Co do kodu źródłowego to o tym wiem że jak to zaznaczę to widać wtedy kod, ale myślałem że ma się też pokazać w ogólnym kodzie strony bez zaznaczania danego fragmentu. Nie wiem jak sprawdzić onClick elementu zaimportowanego.
Wkleję może jeszcze raz cały ten kod jak to teraz wygląda:

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="main.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<script>


     $(document).ready(function(){


            $("button").click(function () {
            $("#menu").load("menu.php");
            });


            $("#login_show_hide").click(function () {
            $("#login_panel").slideToggle("slow");
            });

     });

</script>

</head>

<body>

<button>Load</button>

<div id="container">

    <div id="header">
        <div id="logo" style="background-image:url(logo.jpg); background-repeat:no-repeat; height:86px; margin-top:50px; width:383px"></div>
    </div>

    <div id="menu"></div>

    <div id="main">

        <h1>O co w tym wszystkim chodzi?</h1>

      </div>

    <div id="login_panel" style="display:none; position:absolute; top:20px; right:<?php print("$panel_x"); ?>; border:1px solid; width:220px; height:100px; background-color:white; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;">

    <form action="" method="post">
    <p align="center" style="margin-top:5px; margin-bottom:10px;"><strong>Logowanie do panelu:</strong></p>

    <div style="display:inline">
        <p style="display:inline; margin-left:10px">Login:</p>
        <input type="text" name="login" style="position:absolute; left:50px;">
    </div>

    <div style="margin-top:5px;">
    <p style="display:inline; margin-left:10px">Hasło:</p>
    <input type="password" name="pass" style="display:inline; position:absolute; left:50px;"></div>

    <input type="hidden" name="login_form" value="1"/>
    <center><input type="submit" value="Zaloguj" style="clear:both; margin-top:15px;"></center>
        </form>
    </div>


</div>
</body>
</html>

Rafal Filipek

8.01.2009, 21:14:46

Kod

$("button").click(function () {
    $("#menu").load("menu.php",{},function(){
        $("#login_show_hide").click(function () {
            $("#login_panel").slideToggle("slow");
        });
    });
});

nie wiem gdzie miales problem. #login_show_hide i #login_panel sa w menu.php wiec dopiero jak pojawi sie menu mozesz dodawac do nich eventy.

lmdl

8.01.2009, 21:22:58

Faktycznie teraz działa. Myślałem że to są zupełnie dwie niezależne funkcje i jedna importuje menu a druga zajmuje się tylko animacją. Widocznie problem wynika z mojej małej wiedzy na temat ajaxa i jquery.

Dzięki wielkie za pomoc.

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.