jQuery Mobile- Control clearBtn programmatically

Question

I am using jQuery Mobile 1.3.2. I have a textbox with data-clear-btn=true.

Whenever the user typing the characters in the textbox, once it reaches the end the delete icon hiding the characters in the textbox:

I would like to hide the delete icon, once the user tabs out. I have tried using

$("#elementId").textinput("option", "clearBtn", false);

but it is not hiding the clear button. Why not?

Answer 1

Instead of hiding the control button, by adding the css, I have moved the delete icon outside the textbox, which allows the user the see the content inside the textbox.

$(".ui-input-clear").each(function(element){
            $(this).css("right","-32px");
});

Answer 2

UPDATE based on comments

I believe what's happening is that the variable/attribute (data) is updated but the DOM is not. Binding the blur and focus events using the jQuery .on() method to to the element's textinput, should cause the DOM to refresh/re-read right after the handler fires. Therefore, it should reflect changes that occur within the event handler, i.e. the update to the data attribute.

Option 1:

    $("#elementId").textinput.on("blur", function(){
      $("#elementId").data("clear-btn", false);
    }).on("focus", function(){
      $("#elementId").data("clear-btn", true);
    });

or the following will probably work too:

Option 2:

    $("#elementId").textinput.on("blur", function(){
      $("#elementId").attr("data-clear-btn", false);
    }).on("focus", function(){
      $("#elementId").attr("data-clear-btn", true);
    });

But if you want to adhere most strictly to jQuery and HTML5/canvas, you should probably use option #1

UPDATE## Heading ## I tried a variety of variations - something is resetting the CSS of the inputbox so that the ui-input-clear-hidden is always applied again. The jQuery Mobile javascript uses this to determine whether it's visible... NOT the data-clear-btn value.

I've managed to overhead this using both .css("display","none) and .css("visibility","hidden) on the which is where the actual ui-input-clear-hidden class is applied, the latter being preferably since it doesn't remove the element, only makes it invisible. But, in both cases it affects the clicking functionality. It might be possible with some more playing around... but, after 2 hours already... I can't spend anymore time on it. Good Luck.

$("#elementId").on("blur", function(){

$("#elementId").data("clear-btn", false);
console.log(
    $("#elementId")
    .data("clear-btn")
);
$("#console").append(
    $("#elementId")
    .data("clear-btn").toString() + "</br>"
);

$("#elementId")
    .parent()
    .children("a")
    .addClass(
        "ui-input-clear-hidden"
    );
$("#console").append(
    $("#elementId")
    .parent()
    .children("a")
    .attr("class") + "</br>"
);  
$("#elementId")
    .parent()
    .children("a")
    .css("visibility","hidden")
;



}).on("focus", function(){

$("#elementId").data("clear-btn", true);
$("#elementId")
    .parent()
    .children("a")
    .removeClass(
        "ui-input-clear-hidden"
    );
console.log(
    $("#elementId")
    .data("clear-btn")
);
$("#console").append(
    $("#elementId")
    .parent()
    .children("a")
    .attr("class") + "</br>"
);      
$("#console").append(
    $("#elementId")
    .data("clear-btn").toString() + "</br>"
);
$("#elementId")
    .parent()
    .children("a")
    .css("visibility","visible")
;

});