jQuery Mobile - Search Filter placeholder text change

If you are developing Multilanguage (or more dynamical) jQuery Mobile apps, the first thing you figure out is that Search Filter Placeholder on the of the Views is very much static and all you can do with it is to define its text directly in you HTML Code.

That was really bad if you needed to change this text dynamically (translation purposes etc.) but with the jQuery Mobile version 4.0 there is way to access this Property from the code. You are still not able to bind it but it is definitely better then having it static.

All you need to do is following:

//
// Bind your function on ‘pagechange’ document event
$(document).bind('pagechange', function () {
    //Changes the Filter Placeholder text
    changeFilterPlaceholder($('.ui-page-active').attr('id'));
});

//
// Changes the Filter Placeholder Text
changeFilterPlaceholder = function (id) {

    var filterText = "";

    if (id == "Home") {
        filterText = "Home or whatever you want";
    } else if (id == "Settings") {
        filterText = "Settings of whatever you want";
    } 

    $('.ui-input-search > .ui-input-text')
         .attr('placeholder', filterText);
}

In the next Posts I will be addressing more typical “Problems” developing
jQuery Mobile apps like Optimizing Performance on iPhone 4 or less,
Translating the jQuery Mobile apps etc. so stay tuned!