A simplified version of my problem is at github.
I'm using mobiscroll 2.6.2 (since that's the last free version on github. Later versions up to 2.11 exists but are on different license).
Basically, I have an index page that does nothing but contains a link to a jQM dialog page. dialog.html is the jQM dialog page that has a single input, which the mobiscroll library turns into a pop-up scroller for selecting numbers.
The mobiscroll works. The pop-up scroller appears when I select the input. I can select a number from the scroller and it populates the input with my selection. So I'm pretty sure my initialization of mobiscroll is fine. I'll repeat it here for easier review:
$('#mobiInput').mobiscroll()
.scroller({
theme: 'ios',
mode: 'scroller',
display: 'bubble',
wheels: [ // Wheel groups array
[ // First wheel group
{
label: 'Number',
values: ['9','8','7','6','5','4','3','2','1']
}
]
],
onSelect: function(valueText, inst) {
}
});
The function that I'm trying to use is mobiscroll's setValue function
I set it to the value of "2".
var valueArray = ["2"];
$('#mobiInput').mobiscroll('setValue', valueArray, true);
This actually works... the first time I open the dialog page. The input shows a value of 2, and when I pop-up the scroller, the value of 2 is selected.
However, when I close the dialog (by clicking cancel button, ok button, or close icon) and reopen the dialog, the setValue function doesn't seem to be working. The value of 2 is not in the input. And when I pop-up the scroller, it defaults to the first value of 9.
My guess is that it's not a bug in mobiscroll, but rather my misunderstanding of jQM ajax navigation.
The problem is Mobiscroll style sheet and JS library are being loaded each time you open the dialog. Although the external dialog is removed from DOM, libraries related to Mobiscroll aren't removed.
Solution 1:
Load all libraries related to Mobiscroll as well as initialization code in <head> of index/first page.
<!-- index/first page -->
<head>
<!-- Mobiscroll style sheet -->
<!-- MobiScroll JS library -->
<script>
$(document).on("pagecreate", "#dialogID", function () {
/* initialize Mobiscroll and setValue */
});
</script>
</head>
Solution 2:
Load all libraries related to Mobiscroll in <head> of index/first page. For initialization code, place it inside dialog div. However, you need to unbind pagecreate and bind it again.
<!-- index/first page -->
<head>
<!-- Mobiscroll style sheet -->
<!-- MobiScroll JS library -->
</head>
<!-- external dialog -->
<div data-role="page" id="dialogID" data-dialog="true">
<script>
$(document).off("pagecreate", "#dialogID").on("pagecreate", "#dialogID", function () {
/* initialize Mobiscroll and setValue */
});
</script>
</div>