Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [ZendFramework] JQUERY UI Autocomplete, Ajax i baza danych
Krisu
post
Post #1





Grupa: Zarejestrowani
Postów: 211
Pomógł: 0
Dołączył: 30.03.2006
Skąd: Żary

Ostrzeżenie: (0%)
-----


Witam,
próbuję w swojej aplikacji opartej o zend framework zaimplementować Autocomplete z JQuery UI z użyciem AJAX-a http://jqueryui.com/autocomplete/

Posiadam formularz przez który dodaję rekordy do bazy danych.
Opisują go takie pola jak
nazwa użytkownika,
opis zadania,
oraz ukryte pole id użytkownika.

Chciałbym tak użyć autocomplete by przez Ajaxa podczas wprowadzania nazwy pobierał dane z bazy i wyświetlał podpowiedzi już istniejących osób. Zaś po wybraniu konkretnej do ukrytego pola ma zwracać informację o jego id.

W poniższy sposób w widoku wyświetlam dane użytkowników i nie ma tu żadnych problemów

  1. foreach ($this->clients as $k => $client):
  2. <tr>
  3. <td><?php echo $client['client_id'] ?></td>
  4. <td><?php echo $client['full_name'] ?></td>
  5. </tr>
  6. endforeach;


Nie mam jednak pomysłu jak przypisać dane do źródła w JQUERY UI

  1. $(function() {
  2. function log( message ) {
  3. $( "<div>" ).text( message ).prependTo( "#log" );
  4. $( "#log" ).scrollTop( 0 );
  5. }
  6. $( "#city" ).autocomplete({
  7. source: function( request, response ) {
  8. $.ajax({
  9. url: "? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?",
  10. dataType: "jsonp",
  11. data: {
  12. q: request.term
  13. },
  14. success: function( data ) {
  15. response( data );
  16. }
  17. });
  18. },
  19. minLength: 3,
  20. select: function( event, ui ) {
  21. log( ui.item ?
  22. "Selected: " + ui.item.label :
  23. "Nothing selected, input was " + this.value);
  24. },
  25. open: function() {
  26. $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
  27. },
  28. close: function() {
  29. $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  30. }
  31. });
  32. });


Ten post edytował Krisu 29.06.2014, 14:20:56
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Krisu
post
Post #2





Grupa: Zarejestrowani
Postów: 211
Pomógł: 0
Dołączył: 30.03.2006
Skąd: Żary

Ostrzeżenie: (0%)
-----


Kombinuję cały dzień i za nic nie mogę rozkminić dlaczego jest jak jest, a mianowicie, po wpisaniu frazy pojawiają się puste podpowiedzi (wiele pól, ale bez żadnej treści), proszę o pomoc bo nie mam już pomysłów.

Application_Model_DbTable_Client
Kod
    public function readFullDataClients() {
        
        $select = $this->select()
                ->from(array('c' => 'client'),
                       array('c.client_id', 'c.full_name'))
                ->order('client_id ASC');
        
                return $this->fetchAll($select);
    }


autocompleteAction()
Kod
    public function autocompleteAction()
    {
        $this->_helper->layout()->disableLayout();
        $this->_helper->viewRenderer->setNoRender(true);
        
        $DbTable = new Application_Model_DbTable_Client();
        $objects = $DbTable->readFullDataClients();

        $valuesJson = Zend_Json::encode($objects);
        echo $valuesJson;
    }


public/client/autocomplete
Kod
[{"client_id":"1","full_name":"Krzysztof"},{"client_id":"2","full_name":"null"},{"client_id":"3","full_name":null},{"client_id":"4","full_name":"Ireneusz"},{"client_id":"5","full_name":"Leszek"},{"client_id":"6","full_name":"Jaros\u0142aw "},{"client_id":"7","full_name":"Marcin"},{"client_id":"8","full_name":"\u0141ukasz"},{"client_id":"9","full_name":"Krzysztof"}]


Layout - sekcja header
Kod
<script>
$(function() {    
        $( "#peliculas" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "<?php echo $this->url(array('controller' => 'client', 'action' => 'autocomplete'), 'default')?>",
                    dataType: "json",
                    data: {terms: request.term},
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.label,
                                value: item.value
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });
</script>


client.phtml
Kod
<div class="ui-widget">
  <label for="peliculas">Peliculas: </label>
  <input id="peliculas" />
</div>

<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


Możliwe, że problem jest banalny, ale już nie mam siły... :/




EDIT

Udało mi się co nie co zrobić
Kod
$( "#project" ).autocomplete({
    minLength: 0,
    source: "<?php echo $this->url(array('controller' => 'client', 'action' => 'autocomplete'), 'default')?>",
    dataType: "jsonp",
    focus: function( event, ui ) {
        $( "#project" ).val( ui.item.full_name );
        return false;
    },
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.full_name );
        $( "#project-id" ).val( ui.item.client_id );
        return false;
    }
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};
});


Kod się trochę różni, ale mniejsza z tym, teraz w jedno okineko wstawiam pełną nazwę użytkownika, w w drugiego inputa wstawiam jego id, czyli wszystko działa jak chciałem...
poza jednym szczegółem, nie działa filtracja w autocomplete nie ważne co wpiszę, zawsze wyświetla wszystko, a okienka nadal są puste, ale gdy się cokolwiek zaznaczy z myszki lub klawiatury to dane wprowadza.
Teraz już naprawdę nie wiem jak to ogarnąć... problem pojawia się tylko w chwili gdy odwołuję się do źródła danych json po przez adres akcji, gdy jednak dane są odkodowane w js w tym samym pliku nie ma żadnego problemu... trochę to dziwne :/


Działa
Kod
var projects = [
{
value: "jquery",
label: "jQuery"
},
{
value: "jquery-ui",
label: "jQuery UI"
},
{
value: "sizzlejs",
label: "Sizzle JS"
}
];


Nie działa
Kod
[{"client_id":"1","full_name":"Krzysztof"},{"client_id":"2","full_name":"null"},{"client_id":"3","full_name":null},{"client_id":"4","full_name":"Ireneusz"},{"client_id":"5","full_name":"Leszek"},{"client_id":"6","full_name":"Jaros\u0142aw "},{"client_id":"7","full_name":"Marcin"},{"client_id":"8","full_name":"\u0141ukasz"},{"client_id":"9","full_name":"Krzysztof"}]


UWAGA to nie wina nazw kluczy, gdyż podczas testowania ustawiłem właściwe.

Ten post edytował Krisu 29.06.2014, 23:21:42
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 17.10.2025 - 05:57