CODEWITHSUNDEEP
jqueryevent-handlingjquery-mobile
root
root

Reputation: 1583

jQuery Mobile Select Menu opened as dialog

I've a 'pagebeforeshow' handler that clears the value of my text boxes and select menus.

$("#addSchedulePage").live("pagebeforeshow", function(event){
    $("#message", $("#addSchedulePage")).html("");//clear messagebox
    $("#message", $("#addSchedulePage")).hide();//hide messagebox
    $("#startDate", $("#addSchedulePage")).val("");
    $("#time", $("#addSchedulePage")).val("");

   var lstAppliance = $("#lstAppliance", $("#addSchedulePage"));
    var lstScheduleTaskType = $("#lstScheduleTaskType", $("#addSchedulePage"));
    lstAppliance[0].selectedIndex = 0;
    lstScheduleTaskType[0].selectedIndex = 0;

    $("#lstAppliance", $("#addSchedulePage")).selectmenu('refresh');
    $("#lstScheduleTaskType", $("#addSchedulePage")).selectmenu('refresh');

});

Here's the problem. When my select menus options gets too long jqm automatically open a new dialog instead of dropping down the list when i click on it and causing the event to be triggered again when i select a options from the select menu. Is there a workaround or a away to stop the event from triggering?

Upvotes: 3

Views: 2656

Answers (3)

user1707810
user1707810

Reputation: 123

I had the same problem and solved it. This might solve it for you as well:

Stackoverflow link to issue

Upvotes: 0

root
root

Reputation: 1583

Ok. after sitting down and think through the flow of my program i managed to solve this by changing the way i handle things.

This is the flow of the program. schedulePage (click on add button) --> addSchedulePage (clicked on the select menu) --> Dialog with all available options.

schedulePage --> addSchedulePage ('pagebeforeshow' fired)

Select menu dialog --> addSchedulePage ('pagebeforeshow' fired) -- all my values is cleared after i select the options that i want from my select menu.

If you notice in my question i wanted to clear the value when the event 'pagebeforeshow' is fired. So instead of clearing values when the page is shown, i cleared the value when i clicked on the 'add button' in schedulePage. This works because when i closed the addSchedulePage, jquerymobile simply hide it and it's still in the DOM.

I'm not sure if this's the correct way to do things but it definitely solved my problem.

Upvotes: 0

Romain Guidoux
Romain Guidoux

Reputation: 2971

My answer won't help you for your problem, but you can simplify your code :

$("#addSchedulePage").live("pagebeforeshow", function(event){
    $("#message", this).html("").hide(); //clear and hide messagebox
    $("#startDate", this).val("");
    $("#time", this).val("");

    var lstAppliance = $("#lstAppliance", this);
    var lstScheduleTaskType = $("#lstScheduleTaskType", this);
    lstAppliance[0].selectedIndex = 0;
    lstScheduleTaskType[0].selectedIndex = 0;

    lstAppliance.selectmenu('refresh');
    lstScheduleTaskType.selectmenu('refresh');
});

I have :

  • used this which reffers to $("#addSchedulePage").
  • chained .html() and .hide()
  • used your variables lstAppliance and lstScheduleTaskType

Upvotes: 3

Related Questions