Question

I am developing a mobile application with jquery mobile and html5. One Part of the application is an event calendar which should have the possibility to iterate through the months by clicking on the next and previous buttons.

The iterating function works without problems, but when the month has been changed, the button’s content and functions should be updated to display the previous and next buttons of the new month.

if (month == 11) {
  var next_month = '<input id="next" onclick = "callMonth(' + 0 + ',' + (year + 1) 
    + ');" type="button" data-icon="arrow-r" data-inline="true" value="' 
    + monthNames[0] + ' ' + (year + 1) + '" />';
} else {
  var next_month = '<input id="next" onclick="callMonth(' + (month + 1) + ',' 
    +  year + ');" type="button" data-icon="arrow-r" data-inline="true" value="' 
    + monthNames[month + 1] + ' ' + (year) + '" />';    
}

// previous month
if (month == 0) {
  var prev_month = '<input id="next" onclick = "callMonth(' + 11 + ',' 
    + (year - 1) + ');" type="button" data-icon="arrow-l" data-inline="true" value="'
    + monthNames[11] + ' ' + (year - 1) + '" />';
} else {
  var prev_month = '<input id="next" onclick="callMonth(' + (month - 1) + ',' 
    + year + ');" type="button" data-icon="arrow-l" data-inline="true" value="' 
    + monthNames[month - 1] + ' ' + (year) + '" />';
}

I am using the onclick parameter of the input button, because the jQuery mobile function $("#next").click() is not working inside of the if-else-block. It’s also important to mention that the function callMonth(y,m) itself will call this code. The code displayed above is part of the function calendarWidget() which is being called by the function callMonth(). So the onclick parameter function triggers the function that builds the button again.

Now to my problem: the first time the button is generated, it has the correct style that it should have (jQuery mobile, next/prev icons). When the button is clicked – no matter if previous or next – the next or previous month is displayed correctly with all of its contents. The problem is: the button resets its style to the browser’s default, that means no jQuery mobile ui, no icons. As indicated before, the functionality update works with no problems that means it is possible to continue iterating through the months.

How can i prevent the changing of the button’s style? How should i implement the button’s functionality (without reloading the page?)

I am sorry for my lack of experience in jQuery mobile and English. I couldn’t find any sources to document this error, maybe the problem is the use of the onclick but it is not possible to define the click-event-trigger inside of the if-else-statement. I would gladly appreciate any hints, helps or clues on how to solve this problem.

Thanks a lot in advance!

Answer 1

Well since there hasn’t been enough detail on my problem or maybe because it has been too specific, I couldn’t find a simple solution and now I have written a simple workaround to fix the problem.
I already tried to call .trigger("create") with the two buttons, after the change has been made, but it wouldn’t work. So I simply added a page reload after all changes have been done:

var callMonth = function(m, y) {
    $("#calendar").calendarWidget({month: m, year:y});
     eventData = eventFeedReader.read(function(eventData) {
                evalCalendar(m, y, eventData);
            });
    $('#events').page('destroy').page();
    }

The callMonth-Function is still being called by the onclick-parameter of the button:

<input id="next" onclick="callMonth(' + (month + 1) + ',' 
    +  year + ');" type="button" data-icon="arrow-r" data-inline="true" value="' 
    + monthNames[month + 1] + ' ' + (year) + '" />';    

so no changes here.

Even though I expected that the command .page("destroy").page() would also undo all the changes that have been made to the calendar widget, it didn’t. The content and the functionalities are working fine after the page has been destroyed and rebuilt. I don’t know why it was impossible to trigger a recreation of the buttons but anyhow – now everything works fine.
Anyway thanks to everyone who has tried to guess a solution and good luck to those who stumble upon this while having a similar problem!