[JavaScript] Resource do dodawanego elementu HTML, i kilka innych pytań związanych z jQuery. Opcje

[Adi32]

Witajcie.

Przejdę do rzeczy:

Mamy powiedzmy akcję ajaxową:

Kod

                $.ajax({
                    type: "POST",
                    url: "index.php?module="+moduleName+"&action=getSearchView&noView=1&field="+val
                }).done(function( data ) {
                    forField.html( data );
                });

Do pola <div class="forField"> zostało wrzuconekolejne pole wyszukiwania. Widok:

Kod

<div class="searchFields">
    <div class="forField">
        <select>Lista pól po których mozna szukac</select>
        <select>Warunki (=|!=|>|<|in|not in itd)</select>
        <input or select or checkbox> Wartość

        <plus i minus> (aby dodać kolejne pole forField takie samo jak to)
    <div/>

    <div class="forField">
    <div/>

    ....
</div>

Tak to mniej więcej wygląda i działa ale mogłoby działać wiele lepiej.

Po pierwsze, nie działa jQuery.live, zalecany jest jQuery.on, ale on nie działa... Przynajmniej tak jak powinien.
<plus i minus> mają .on("click" function(){ ... }) ale te przyciski działają tylko przy tych polach, które są aktualnie wczytane. Nie działają dla tych, których pola zostały wczytane za pomocą przycisku "plus" przy innym polu.

Po drugie, poza akcjami podpiętymi pod plus i minus mam poprzypinane inne akcje tj.
// zapewniam, że składnia w kodzie jest w porządku ($(<input or select or checkbox>) używam tylko dla pokazania ze może tam być różne pole)
$(<input or select or checkbox>).on("keyup || change", function(){....}) też działa tylko dla pierwszego pola, inne pola dodane za pomocą plusa nie działają.

Te pola są dodawane za pomocą AJXA który wkleiłem na samej górze. Jeśli nie da się użyć tego ".on()" normalnie, to może da się zrobić coś takiego:

Kod

                $.ajax({
                    type: "POST",
                    url: "index.php?module="+moduleName+"&action=getSearchView&noView=1&field="+val
                }).done(function( data ) {
                    forField.html( data );
                    initPlusMinus( data );
                    initChangeAndKeyup( data );
                });

ale zmienna"data" to nie referencja do htmlowego obiektu który właśnie został wstawiony tylko zwykły ciąg, string. Jak uzyskać referencje do właśnie wstawionego obiektu htmlowego z danej zmiennej? Biorąc pod uwagę, że może się znajdować nieskończenie wiele dokładnie identycznych pól.

Ten post edytował Adi32 13.05.2013, 11:41:10

[Arcioch]

Mógłbyś pokazać jak używasz tego ON w jQuery (IMG:style_emoticons/default/smile.gif) bo coś mi się wydaje, że źle go używasz (IMG:style_emoticons/default/smile.gif)

[Adi32]

Mógłbyś pokazać jak używasz tego ON w jQuery (IMG:style_emoticons/default/smile.gif) bo coś mi się wydaje, że źle go używasz (IMG:style_emoticons/default/smile.gif)

Zapewne chodzi Ci o to, że .on() na elementach dynamicznych używamy w taki sposób:

$(nieDynamicznyElement).on(event, elementDynamiczny, funkcja);

To powiedz mi jak użyć tej konstrukcji jeżeli nie wiemy jakim obiektem będzie element dynamiczny, wiemy jedynie, że będzie to drugi element w obiekcie "forField". Próbowałem tak:

Kod

        $('.forField').each(function(){
            $(this).children().next().on('keyup || change', $(this) , function(){

                var form = $('form[name="search"]');
                var sform = (form.serialize());

                $.ajax({
                    type: "POST",
                    url: "index.php?module="+moduleName+"&action=saveSearchToSession",
                    data: {result: sform}
                }).done(function( data ) {
                    ListView.refreshListTable();
                });

                return false;
            })

        })

[Arcioch]

Pokaż strukturę html (IMG:style_emoticons/default/smile.gif)

[Adi32]

[HTML] pobierz, plaintext 
                <form method="post" name="search" action="">
 
                    <ul>
                    {if $filter}
                        {foreach $filter as $fieldName => $fieldNum}
                            {foreach $fieldNum as $fieldDetails}
                            <li>
                                <table>
                                    <tr>
                                        <td>
                                            <select class="search" name="">
                                                <option></option>
                                                {foreach $searchFields as $field}
                                                    {if $field['name'] == $fieldName}
                                                        {assign var="selected" value="selected"}
                                                    {else}
                                                        {assign var="selected" value=""}
                                                    {/if}
                                                    <option {$selected} value="{$field['name']}">{$field['vname']}</option>
                                                {/foreach}
                                            </select>
                                        </td>
                                        <td>
                                            <div class="forField">{eval var=$fieldDetails}</div>
                                        </td>
                                        <td>
                                            <div class="quantityManager" style="display: inline;">
                                                <span id="" class="plus"></span>
                                                <span id="" class="minus"></span>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </li>
 
                            {assign var=key value=$key+1}
 
                            <script type="text/javascript">
                                maxKey = {$key};
                            </script>
                            {/foreach}
                        {/foreach}
                    {/if}
 
                    <li>
                        <table>
                            <tr>
                                <td>
                                    <select class="search" name="">
                                        <option></option>
                                        {foreach $searchFields as $field}
                                            <option value="{$field['name']}">{$field['vname']}</option>
                                        {/foreach}
                                    </select>
                                </td>
                                <td>
                                    <div class="forField"></div>
                                </td>
                                <td>
                                    <div class="quantityManager" style="display: inline;">
                                        <span id="" class="plus"></span>
                                        <span id="" class="minus"></span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </li>
 
                    </ul>
                    <input type="submit" name="submit[search]" value="Szukaj" />
                    <input type="submit" name="clear[search]" value="Wyczyść" />
 
                </form>
[HTML] pobierz, plaintext 

Search.js:

[HTML] pobierz, plaintext 
function Search() {
 
    this.init = function() {
 
        _this = this;
 
        $('select[class="search"]').change(function(){
            var val = $(this).val();
 
            var forField = $(this).closest('tr').find('.forField');
 
            if (val.length) {
                $.ajax({
                    type: "POST",
                    url: "index.php?module="+moduleName+"&action=getSearchView&noView=1&field="+val
                }).done(function( data ) {
 
                    data = data.replace('{$key}',maxKey);
                    data = data.replace('{$key}',maxKey);
 
                    maxKey = maxKey+1;
 
                    forField.html( data );
//                    _this.initPlusMinus();
//                        search.initRefreshList();
 
                });
                return false;
 
            } else {
                forField.text('')
            }
 
        });
 
        this.initPlusMinus();
        this.initSaveSearch();
        this.initLoadSearch();
        this.initRefreshList();
 
    }
 
    this.initPlusMinus = function() {
        $('span.plus').on('click',function(){
            var li = $(this).closest('li');
            var ul = $(li).closest('ul');
 
            var newTr = $(li).clone();
            newTr.removeAttr('id');
 
            $(ul).append(newTr);
 
        });
 
        $('span.minus').on('click',function(){
            $(this).closest('li').remove();
        });
    }
 
    this.initSaveSearch = function() {
 
        _this = this;
 
        $('a#saveSearch').click(function(){
            var form = $('form[name="search"]');
            var sform = (form.serialize());
            var name = $('input[name="searchName"]').val();
 
            $.ajax({
                type: "POST",
                url: "index.php?module="+moduleName+"&action=saveSearch",
                data: {sform: sform, name: name}
            }).done(function( data ) {
//                _this.rebuildLoadSavedSearch();
            });
 
            return false;
        });
 
    }
 
    this.initLoadSearch = function() {
 
        _this = this;
 
        $('a#loadSearch').click(function(){
 
            var searchId = $('select[name="searchLoader"]').val();
 
            $.ajax({
                type: "POST",
                url: "index.php?module="+moduleName+"&action=loadSearch",
                data: {searchId: searchId}
            }).done(function( data ) {
//                alert(data)
                location.reload();
            });
 
            return false;
        });
    }
 
    this.initRefreshList = function() {
        _this = this;
 
        $('form[name="search"]').on('change || blur', '.forField [name*="search"]:last-child ', function(){
            obj = $(this);
 
            var form = $('form[name="search"]');
            var sform = (form.serialize());
            var name = $('input[name="searchName"]').val();
 
            $.ajax({
                type: "POST",
                url: "index.php?module="+moduleName+"&action=saveSearchToSession",
                data: {result: sform}
            }).done(function( data ) {
                ListView.refreshListTable();
            });
 
            return false;
        })
 
//        $('.forField').each(function(){
//            $(this).children().next().on('keyup || change', $(this) , function(){
//                obj = $(this);
//                
//                var form = $('form[name="search"]');
//                var sform = (form.serialize());
//                var name = $('input[name="searchName"]').val();
//
//                $.ajax({
//                    type: "POST",
//                    url: "index.php?module="+moduleName+"&action=saveSearchToSession",
//                    data: {result: sform}
//                }).done(function( data ) {
//                    ListView.refreshListTable();
//                });
//
//                return false;
//            })
//
//        })
 
    }
 
    this.rebuildLoadSavedSearch = function() {
 
    }
 
}
 
$(function(){
    search = new Search();
    search.init();
 
});
[HTML] pobierz, plaintext 

Zrzucik:

(IMG:http://img803.imageshack.us/img803/7476/szukajka.jpg)

[Arcioch]

Spróbuj tak (IMG:style_emoticons/default/smile.gif) Gdybyś miał to jak spakować i wysłać to bym bardziej mógł pomóc, ponieważ mógłbym po tym przeklinać (IMG:style_emoticons/default/smile.gif)

[HTML] pobierz, plaintext 
        $('.forField').each(function(){
 
			var obj = $(this);
 
            $(document).on('keyup || change', obj.children().eq(1) , function(){
 
                var form = $('form[name="search"]');
                var sform = (form.serialize());
 
                $.ajax({
                    type: "POST",
                    url: "index.php?module="+moduleName+"&action=saveSearchToSession",
                    data: {result: sform}
                }).done(function( data ) {
                    ListView.refreshListTable();
                });
 
                return false;
            })
 
        });
[HTML] pobierz, plaintext 

[Adi32]

Zrobiłem (IMG:style_emoticons/default/smile.gif)

Kod

    this.initRefreshList = function() {
        _this = this;
        
        $('form[name="search"]').on('change || blur', '.forField [name*="search"] ', function(){
            obj = $(this);

            var form = $('form[name="search"]');
            var sform = (form.serialize());

            $.ajax({
                type: "POST",
                url: "index.php?module="+moduleName+"&action=saveSearchToSession",
                data: {result: sform}
            }).done(function( data ) {
                ListView.refreshListTable();
            });

            return false;
        });
        
    }

' obj.children().eq(1) ' raczej by nie przeszło, zdaje mi się, że w tym miejscu dostępna jest tylko stringowa ścieżka jak w CSS.