CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Bruno
Bruno

Reputation: 1032

Change css same listview

I have an app (jQuery mobile 1.4.3) with a List View, I'm dynamically loading the list with AJAX. I'm using the same list view to load 2 different types of ajax data, what I need is to remove/change the css so that the buttons and left side space will disappear when click/load the button 2222.

jsfiddle: JSFIDDLE (CLICK the button 2222 to show list)

Some sample code:

function func1111() {
    var $menuList = $("#suggestions-list");

    $menuList.empty();

    var listItem = document.createElement("li");
    var divForButtons = document.createElement("div");
    var anchor = document.createElement("a");
    var buttonAdd = document.createElement("a");
    var buttonDelete = document.createElement("a");
    var header1 = document.createElement("h1");
    var header = document.createElement("h3");
    var paragraph = document.createElement("p");

    anchor.setAttribute("href", "");
    anchor.setAttribute("data-id", "hey");

    header.textContent = "something";
    header1.textContent = "hello";
    paragraph.textContent = "10" + "€";

    buttonAdd.setAttribute("href", "#");
    buttonAdd.setAttribute("id", "btnUserSugAdd");
    buttonAdd.setAttribute("data-id", "1");
    buttonAdd.setAttribute("class", "ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all");

    buttonDelete.setAttribute("href", "#");
    buttonDelete.setAttribute("id", "btnUserSugDel");
    buttonDelete.setAttribute("data-id", "2");
    buttonDelete.setAttribute("class", "ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all");

    divForButtons.setAttribute("class", "editBtns");
    divForButtons.appendChild(buttonAdd);
    divForButtons.appendChild(buttonDelete);

    anchor.appendChild(header);
    anchor.appendChild(header1);
    anchor.appendChild(paragraph);

    listItem.appendChild(anchor);
    listItem.appendChild(divForButtons);

    $menuList.append(listItem);


    $menuList.listview('refresh');

}

I hope I was't too confusing with my question, thanks in advance.

Upvotes: 0

Views: 87

Answers (1)

ezanker
ezanker

Reputation: 24738

In one function add the class has-editBtns to the UL in the other remove it:

function func1111() {
    var $menuList = $("#suggestions-list");
    $menuList.empty().addClass('has-editBtns');
    ...

function func2222() {
    var $menuList = $("#suggestions-list");
    $menuList.empty().removeClass('has-editBtns');
    ...

Updated FIDDLE

Upvotes: 1

Related Questions