Jak prawidłowo przekazać parametr do funkcji onlick?

0

Jak prawidłowo przekazać parametr do funkcji onlick żeby obyło się bez błedów? W powyższym przykładzie wyrzuca mi błąd taki, że data nie jest zdefiniowana.

 function showOnMap(id) {
            console.log("Show on map" + id);
            $("html, body").animate({ scrollTop: $('#map').offset().top }, 800);
        }

        function searchResult(data) {
            $("#searchResults").show();
            $("html, body").animate({ scrollTop: $('#search').offset().top }, 800);
            $('#tableResults tbody').html('');
            for (var i in data) {
                if (data.hasOwnProperty(i)) {
                    $('#tableResults tbody').append(
                        "<tr>" +
                        "<td class='nameCompany'>" +
                        data[i].CompanyName +
                        "<br /><button class='showOnMap' onclick='showOnMap(data[i].Id)'>" +
                        "POKAŻ NA MAPIE" +
                        "</button class='showOnMap'></td>" +
                        "</td>" +
                        "<td class='address'>" +
                        data[i].CompanyAddress +
                        "</td>" +
                        "<td class='phoneNumber'>" +
                        "tel. " + data[i].PhoneNumber +
                        "</td>" +
                        "<td class='installationPrice'>" +
                        data[i].PriceInstallation +
                        "</td>" +
                        "</tr>");
                }
            };
        }
<button class='showOnMap' onclick='showOnMap(data[i].Id)'>
0

A co chciałbyś żeby było w tym data? Bo jak na razie tylko korzystasz z tej zmiennej, ale nigdzie jej nie definiujesz (nie ustalasz jej wartości).

0

Ale jak to jest w pętli for to nie jest ona zdefiniowana?

0

Pierwsze primo - od strony HTMLa zmień pojedyncze cudzysłowy na podwójne (tam gdzie nadajesz np. class="showOnMap"). To automatycznie wymusi Ci zamianę w konkatenacji - czyli użycia pojedynczego cudzysłowy z podwójnym.

Następnie wstrzyknij zmienną za pomocą +' tak jak poniżej. Powinno działać.

 '<td class="nameCompany">' +
                        data[i].CompanyName +
                        '<br /><button class="showOnMap" onclick="showOnMap(+'data[i].Id+')">';
0

@hapertown:
Jak już ma dodawać <tr> z jQuery, to już niech to lepiej robi tak:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .addClass('nameCompany')
            .append(data[i].CompanyName)
            .append($('<br>'))
            .append($('<button>')
                .addClass('showOnMap')
                .click(e => showOnMap(data[i].Id))
                .html('POKAŻ NA MAPIE')
            )
        )
        .append($('<td>')
            .addClass('address')
            .append(data[i].CompanyAddress)
        )
        .append($('<td>')
            .addClass('phoneNumber')
            .append(data[i].PhoneNumber)
        )
        .append($('<td>')
            .addClass('installationPrice')
            .append(data[i].PriceInstallation)
        )
    );

Obejdzie się bez sklejania html'a ze stringów

0

To już jest zupełnie odrębna sprawa - można na pewno zrobić to jeszcze inaczej (czytaj: lepiej) bez takich akcji jak tutaj kolega przedstawił ;)

0

Zrobiłem tak jak pisał hapertwon:

'<br /><button class="showOnMap" onclick="showOnMap(+ 'data[i].Id +')">' +

i przy (+ 'data[i].Id +') jest napisane, że wymagany jest średnik.

0

Tak to teraz wygląda:

function searchResult(data) {
            $("#searchResults").show();
            $("html, body").animate({ scrollTop: $('#search').offset().top }, 800);
            $('#tableResults tbody').html('');
            for (var i in data) {
                if (data.hasOwnProperty(i)) {  
                    $('#tableResults tbody').append(
                        '<tr>' +
                        '<td class="nameCompany">' +
                        data[i].CompanyName +
                        '<br /><button class="showOnMap" onclick="showOnMap(+ 'data[i].Id +')">' +
                        "POKAŻ NA MAPIE" +
                        '</button class="showOnMap"></td>' +
                        '</td>' +
                        '<td class="address">' +
                        data[i].CompanyAddress +
                        '</td>' +
                        '<td class="phoneNumber">' +
                        "tel. " + data[i].PhoneNumber +
                        "</td>" +
                        '<td class="installationPrice">' +
                        data[i].PriceInstallation +
                        '</td>' +
                        '<td class="reportError">' +
                        "Napis" +
                        '</td>' +
                        '</tr>');

                    /*let j = i;
                    $(".showOnMap").click(function() {
                        showOnMap(data[j]);
                    });*/
                }
            };
        }

W tej linijce też krzyczy, że średnik jest wymagany mimo, że jest.

 '</tr>');
0

Dzięki TomRiddle za pomoc, Twój kod działa. Jednak zastanawiam się czemu ten zapis, który jest w poście u góry wymagał jeszcze średnika i gdzie jest tam faktycznie błąd.

0

Błąd jest przy deklarowaniu argumentu funkcji, nie tam postawiłeś średnik gdzie trzeba

function searchResult(data) {
            $("#searchResults").show();
            $("html, body").animate({ scrollTop: $('#search').offset().top }, 800);
            $('#tableResults tbody').html('');
            for (var i in data) {
                if (data.hasOwnProperty(i)) {  
                    $('#tableResults tbody').append(
                        '<tr>' +
                        '<td class="nameCompany">' +
                        data[i].CompanyName +
                        '<br /><button class="showOnMap" onclick="showOnMap('+(data[i].Id)+')">' +
                        "POKAŻ NA MAPIE" +
                        '</button class="showOnMap"></td>' +
                        '</td>' +
                        '<td class="address">' +
                        data[i].CompanyAddress +
                        '</td>' +
                        '<td class="phoneNumber">' +
                        "tel. " + data[i].PhoneNumber +
                        "</td>" +
                        '<td class="installationPrice">' +
                        data[i].PriceInstallation +
                        '</td>' +
                        '<td class="reportError">' +
                        "Napis" +
                        '</td>' +
                        '</tr>');

                    /*let j = i;
                    $(".showOnMap").click(function() {
                        showOnMap(data[j]);
                    });*/
                }
            };
        }

@TomRiddle: Coś byśmy jeszcze znaleźli, jakieś sposoby, np. gotowce w jQuery :P

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0