CODEWITHSUNDEEP
jquery-mobile
rory
rory

Reputation: 1438

jQuery Mobile messing up my classes

I'm creating the below which is doing fine except for one problem:

function showDevices() {
    for (var i = 0; i < devices.length; i++) {
        var value = devices[i].Value;
        var geraete_id = devices[i].Key;
        if (value.Name != "") { // if name exists, use that as heading, else, use UDID
            $("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5>" + value.Name + "</h5>"
            + "<p>" + value.LastUsedBy + "</p>"
            + "<p id='geraete_DID'>" + geraete_id + "</p>"
            + "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
            + "<a href='#confirm_device_removal' class='deleteListItem' data-rel='dialog'></a></li>");
        }
        else {
            $("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5 id='geraete_DID'>" + geraete_id + "</h5>"
                + "<p>" + value.LastUsedBy + "</p>"
                + "<p>Anonymous User</p>"
                + "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
                + "<a href='#confirm_device_removal' class='deleteListItem' data-rel='dialog'></a></li>");

        }
    }
    $("#geraete-list").listview("refresh");
}

The problem is that class='deleteListItem'gets turned into class='deleteListItem ui-btn ui-btn-icon-notext ui-icon-delete'

Is this just the way Chrome is reading it or is jQuery Mobile adding this into my class?

The problem is I want to run the below code but the getDeviceIDforRemoval() isn't doing anything...

function getDeviceIDforRemoval(){
    $(".device_to_remove").text($("#geraete_DID").text()); // sends the device ID into confirm submission dialog
}

function removeDevices(){
    var geraetID =  $(this).find('span').text(); //retrieves the DID inserted by above function
    removeDevice(geraetID,loadDevices);
}

function removeDevice(udid,onSuccess){
    Server.removeDevice(udid,onSuccess);
}

Upvotes: 0

Views: 59

Answers (1)

El Ronnoco
El Ronnoco

Reputation: 11922

Elements can have multiple classes and when these are shown in the HTML they appear as

class="class1 class2 class3"

Order is largely unimportant.

This code...

 $(".device_to_remove").text($("#geraete_DID").text());

...will select all elements with class device_to_remove regardless of whether other classes are also applied to those elements. It will then attempt to set the text of those elements to the text of the element with id geraete_DID.

Which of your elements actually has the class device_to_remove? I see no other reference to this in your code?

Upvotes: 1

Related Questions