Dialog box dla każdego rekordu.

Tworząc stronę www każdy napotka na jakieś trudności. Forumowicze na pewno pomogą!

Dialog box dla każdego rekordu.

Postprzez Undertaker DeadMan » 2012-12-02, 18:02:50

Witam. Mam tablelę z użytkownikami. Na stronie wyświatla się lista wszsytkich użytkowników i przy każdym są 3 przyciski - przeglądaj, edytuj, usun. Gdy klikne na przeglądaj ma wyskoczyć okno dialogowe z dokładniejszymi danymi użytkownika. Nie mam pojęcia co moze byc źle... Oto kod:
Kod: Zaznacz cały
<?php

require('conn.php');
$result = mysql_query("SELECT * FROM klienci ;");


?>
<script type="text/javascript" src="jqSortowanie/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jqSortowanie/jquery.tablesorter.js"></script>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
   
    <script>
    // increase the default animation speed to exaggerate the effect
   $.fx.speeds._default = 1000;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
                     height: "auto",
                  width: "auto"
                     
        });
 
        $( "#opener" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });
    });
    </script>      
      
      
      
      
<script type="text/javascript">
   $(document).ready(function() {
    $("table").tablesorter({
        // pass the headers argument and assing a object
        headers: {
            // assign the secound column (we start counting zero)
            0: {
                // disable it by setting the property sorter to false
                sorter: false
            },
            // assign the third column (we start counting zero)
            4: {
                // disable it by setting the property sorter to false
                sorter: false
            },
                  5: {
                // disable it by setting the property sorter to false
                sorter: false
            },
                  6: {
                // disable it by setting the property sorter to false
                sorter: false
            }
        }
    });
});
</script>

<div class="right_content">   <br>         
                   
                   
<table id="rounded-corner" class="tablesorter {headers: 3:(sorter:false)}}" summary="2007 Major IT Companies' Profit">
    <thead>
       <tr>
           <th scope="col" class="rounded-company"></th>
            <th scope="col" class="rounded">Imie</th>
            <th scope="col" class="rounded">Nazwisko</th>
            <th scope="col" class="rounded">Data dodania</th>
                  <th scope="col" class="rounded">Przegladaj</th>
            <th scope="col" class="rounded">Edytuj</th>
            <th scope="col" class="rounded-q4">Usun</th>
        </tr>
    </thead>
        <tfoot>
       
    </tfoot>
    <tbody>
       
<?php
while ($row = mysql_fetch_assoc($result)) {
echo ('<tr>
           <td>
               
               
               
               <input type="checkbox" value="'.$row['nr_klienta'].'" name="nr_klienta" /></td>
         
            <td>'. $row['imie'].'</td>
            <td>'. $row['nazwisko'].'</td>
            <td>'. $row['data_wprowadzenia'].'</td>
                  
            <td>');
                  ?>
                  
         
 
                  
                  <div id="dialog" title="<?php echo $row['imie'].(' ').$row['nazwisko']; ?>">
                  <table id="rounded-corner" class="tablesorter {headers: 2:(sorter:false)}}">
    <thead>
       <tr>
           <th scope="col" class="rounded-company"></th>
            <th scope="col" class="rounded">Imie</th>
            <th scope="col" class="rounded">Nazwisko</th>
            <th scope="col" class="rounded">Data dodania</th>
                  <th scope="col" class="rounded">Firma</th>
                  <th scope="col" class="rounded">Nr. karty kredyt.</th>
                  <th scope="col" class="rounded">ulica</th>
                  <th scope="col" class="rounded">Nr</th>
                  <th scope="col" class="rounded">miasto</th>
         
        </tr>
    </thead>
        <tfoot>
       
    </tfoot>
    <tbody>
       
<?php
$nr_klienta2=$row['nr_klienta'];
$result2 = mysql_query("SELECT * FROM klienci WHERE `klienci`.`nr_klienta` ='$nr_klienta2' ;");
while ($row2= mysql_fetch_assoc($result2)) {
echo ('<tr>
           <td>
               
               
               
               <input type="checkbox" name="'.$row2['nr_klienta'].'" /></td>
         
            <td>'. $row2['imie'].'</td>
            <td>'. $row2['nazwisko'].'</td>
            <td>'. $row2['data_wprowadzenia'].'</td>
                  <td>'. $row2['firma'].'</td>
                  <td>'. $row2['ulica'].'</td>
                  <td>'. $row2['numer'].'</td>
                  <td>'. $row2['miasto'].'</td>
           
                  
        </tr>');


}
?>

       
          
       
    </tbody>
</table>






                  
                  </div>
                  <button id="opener" value="<?php echo($row['nr_klienta']); ?>" name="nr_klienta"><img src="images/search.png" alt="" title="" border="0">
                  </button>
                  
                  <?php echo ('
                  </td>
                  


                  <form action="edit.php" method="post" class="niceform">
            <td><a href="edit.php?nr_klienta='.$row['nr_klienta'].'"><img src="images/user_edit.png" alt="" title="" border="0" /></a></td>
                  </form>
                  
                  
                  <form action="delete.php" method="post" class="niceform">
            <td>
                  
                  <a href="delete.php?nr_klienta='.$row['nr_klienta'].'" class="ask"><img src="images/trash.png" alt="" title="" border="0" /></a>
               
                  
                  
                  </td>
                  </form>
                  
                  
                  
        </tr>');


}







?>

       
          
       
    </tbody>
</table>

<div align="center" class="sidebarmenu"><br>
<a class="menuitem_green" href="./pdf/generator.php">Generuj PDF</a>
</div>
     
        <div class="pagination">
            
              <span class="disabled"><< poprzedni</span><span class="current">1</span><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a>...<a href="">10</a><a href="">11</a><a href="">12</a>...<a href="">100</a><a href="">101</a><a href="">nastepny >></a>
        </div>
     
     
     </div>



gdy zmienię result2 i row2 na samo result i row tak jak za pierwszym razem to na stronie wyświetla się jeden użytkownik, przysisk przeglądaj działa perfekcyjnie. problem w tym czemu niue wyświetla reszty... Mam nadzieje że pomożecie... Korzystałem z UI jquery z góry dziękuje za zainteresowanie tematem.
Avatar użytkownika
Undertaker DeadManMale
Stały bywalec
Stały bywalec
 
Posty: 76
Dołączył(a): 2010-07-28, 10:41:09
Podziękował : 2 razy
Otrzymał podziękowań: 1 razy

Postprzez junior » 2012-12-02, 19:00:30

to nie ma prawa działać... pierwsza rzecz rozumiem, że okienko dialog po jednym dla klienta ... id nie może być powielone na stronie zastąp atrybutem class to raz ... to samo tyczy się openera
powinno być coś w stylu:
Kod: Zaznacz cały
jQuery('.opener').click(function(){
jQuery(this).siblings(".dialog").dialog( "open" );
return false;
});

zastrzegam, że nie testowałem i nie chciało mi się pobierać bibliotek i tworzyć przykładu testowego
zawsze możesz się nie zgodzić z opinią autora tego postu.
Avatar użytkownika
juniorMale
V.I.P.
V.I.P.
 
Posty: 1446
Dołączył(a): 2008-06-22, 11:07:52
Lokalizacja: Łódź
Podziękował : 0 razy
Otrzymał podziękowań: 4 razy

Postprzez Undertaker DeadMan » 2012-12-02, 21:12:57

Nooooo przecież.... ale banał :mur:
Dodałem pętle i już działa :)Wielkie dzieki za naprowadzenie :)
Kod: Zaznacz cały
<script>
    // increase the default animation speed to exaggerate the effect
   $.fx.speeds._default = 1000;
    $(function() {
        $( "#dialog'.$row['nr_klienta'].'").dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
                     height: "auto",
                  width: "auto"
                     
        });
 
        $( "#opener'.$row['nr_klienta'].'" ).click(function() {
            $( "#dialog'.$row['nr_klienta'].'" ).dialog( "open" );
            return false;
        });
    });
    </script>   
Avatar użytkownika
Undertaker DeadManMale
Stały bywalec
Stały bywalec
 
Posty: 76
Dołączył(a): 2010-07-28, 10:41:09
Podziękował : 2 razy
Otrzymał podziękowań: 1 razy

Postprzez junior » 2012-12-02, 21:36:04

ja bym to uprościł:P no ale jak uważasz... on tego są właśnie polecenia closest, each, jQuery(this),siblings
bo najpewniej to :
Kod: Zaznacz cały
( "#dialog'.$row['nr_klienta'].'").dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
                     height: "auto",
                  width: "auto"
                     
        });

można wrzucić w funkcję otwierającą... i zbindować dla wszystkich obiektów klasy opener otwieranie dialogu dla obiektu dialog znalezionego przez siblings (ja zazwyczaj używam kombinacji parent i chields)
zawsze możesz się nie zgodzić z opinią autora tego postu.
Avatar użytkownika
juniorMale
V.I.P.
V.I.P.
 
Posty: 1446
Dołączył(a): 2008-06-22, 11:07:52
Lokalizacja: Łódź
Podziękował : 0 razy
Otrzymał podziękowań: 4 razy

Postprzez BlueMan » 2012-12-03, 13:42:01

A ja jeszcze inaczej to robię - mam jednego dialog(), a podmieniam w nim zawartość. Aby jak najmniej zdarzeń/elementów JS tworzyć w przeglądarce.

Czyli:
1. w pętli od tabelki (bo i tak się wywołuje) wstawiam jakiegoś
Kod: Zaznacz cały
<div id="jakisElement_666">666 to ID rekordu, a wewnątrz tego diva zawartość jaka ma pojawić się w dialog()</div>

2. Element który ma otwierać dialog() definiuję jako
Kod: Zaznacz cały
<a href="#" class="jOpenDialogPreview" id="whichElement_666">podgląd</a>

3. Tworzę handler dla clicka w jOpenDialogPreview. Pobieram jego element ID
Kod: Zaznacz cały
var iElementID = $(this).attr('id').split("_")[1];

I w dialog podmieniam jego HTML ciągnąć z odpowiedniego DIV zawartość
Kod: Zaznacz cały
$('#jakisElement_'+iElementID).html();


Dzięki czemu mam tylko jeden JS odpowiedzialny za dialog() i tylko event odpowiedzialny za klik w $('.jOpenDialogPreview').click(). Zasoby zaoszczędzone w przeglądarkach - bezcenne :]
Czytaj regulamin - unikniesz wielu problemów.
Korzystajcie z załączników na forum aby pliki nie ginęły w przyszłości w zewnętrznych serwisach!

Obrazek
Avatar użytkownika
BlueManMale
Administrator
Administrator
 
Posty: 19091
Dołączył(a): 2004-05-26, 17:34:59
Lokalizacja: Dabrowa Górn.
Podziękował : 6 razy
Otrzymał podziękowań: 5 razy
Imię: Szymon

Postprzez junior » 2012-12-03, 13:47:35

też tak można ale operacje typu split (ogólnie operacje na ciągach znakowych) są kosztowne z punktu widzenia czasu procesora... Ja czasem w ogóle ładuje ajaxem zawartość takiego boxa (większość stron robię na joomli) więc obsługa autoryzacji itp mi odpada...
zawsze możesz się nie zgodzić z opinią autora tego postu.
Avatar użytkownika
juniorMale
V.I.P.
V.I.P.
 
Posty: 1446
Dołączył(a): 2008-06-22, 11:07:52
Lokalizacja: Łódź
Podziękował : 0 razy
Otrzymał podziękowań: 4 razy

Postprzez BlueMan » 2012-12-03, 13:50:26

junior - 2012-12-03, 12:47 napisał(a):ogólnie operacje na ciągach znakowych

całkowicie się z tym zgadzam :)
Aczkolwiek w zestawieniu - pojedyncza operacja na ciągu znaków, a trzymanie dziesiątek eventów klików i innych funkcji JS, to w tym zestawieniu chyba optymalniej jest zrobić tą operację na ciągu znaków :]
Czytaj regulamin - unikniesz wielu problemów.
Korzystajcie z załączników na forum aby pliki nie ginęły w przyszłości w zewnętrznych serwisach!

Obrazek
Avatar użytkownika
BlueManMale
Administrator
Administrator
 
Posty: 19091
Dołączył(a): 2004-05-26, 17:34:59
Lokalizacja: Dabrowa Górn.
Podziękował : 6 razy
Otrzymał podziękowań: 5 razy
Imię: Szymon

Postprzez Undertaker DeadMan » 2012-12-03, 16:44:13

Akurat w moim przypadku długość kodu nie ma znaczenia :D Ale ciekawe rozwiązanie @Blueman :)
Avatar użytkownika
Undertaker DeadManMale
Stały bywalec
Stały bywalec
 
Posty: 76
Dołączył(a): 2010-07-28, 10:41:09
Podziękował : 2 razy
Otrzymał podziękowań: 1 razy


  • Inne

Powrót do Webmasterka

Kto przegląda forum

Użytkownicy przeglądający ten dział: Google [Bot] i 7 gości