Script for populating html elements with content from a .json file not working on mobile

JavaScript
1

On THIS page I have a bunch of “placeholders” for phone numbers in the form: 07xxxxxxxx. Upon clicking the green button “VEZI TELEFON”, the placeholder in each green box is replaced with a real phone number from a JSON file, via $.ajax. The console strangely shows 2 different things on desktop and mobile. The value of index is different it seams… Desktop:

0: 0743127315
1: 072245875
3: 0756129668
4: 0724153333
Uncaught TypeError: Cannot read property 'tel' of undefined

Mobile:

1: 072245875
2: 0756129458
4: 0724153333
Uncaught TypeError: Cannot read property 'tel' of undefined

{
  "telefoane": [{
    "id": 1,
    "tel": "0743127315"
  }, {
    "id": 2,
    "tel": "072245875"
  }, {
    "id": 3,
    "tel": "0756129458"
  }, {
    "id": 4,
    "tel": "0756129668"
  }, {
    "id": 5,
    "tel": "0724153333"
  }]
}

The JS code:
function showTel() {
    $(".telefon").on('click', function(){
        var index = $(this).closest(".imobil").index();
        var $element = $(this);
        $.ajax({
            url: 'telefoane.json',
            dataType: 'json',
            type : 'get',
            cache : 'false',
            success: function(data){
                var tel = data.telefoane[index].tel;
                console.log(index + ": " + tel);
                $element.parent().find('.telefon .tel').text(tel);
            }
        });
    });
}
showTel();

// Arata telefon
$('.telefon').on('click', function(){
    $(this).children('.vezi').hide();
    $(this).children('.tel').show();
});

What is wrong with this code? Thank you!

2

You rely on index() what is unsafe, because its result may differ due to page layout.
Seems like you have some additional DOM element that shows only on mobile.
This element affects index().

To avoid that I’d assign an index to each element explicitly, during the HTML generation.
For example, using custom data-id attribute.

3

I have replaced

 var index = $(this).closest(".imobil").index();

with

var index = $(this).closest(".imobil").data("id");

It looks like it is ok. Thank you!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.