Loss of collapsible functionality within InfoWindow revisited
I'm using JQM to develop a tide and weather app - (single page - multiple #pageId's)
Example view: ( http://www.kingfishermobile.rez72.net/index.php)
On pages #two and #three, I have select drop-down delivering tide and weather data where collapsible functionality works with a little help from additional code: Example:
$( document ).on( 'pageshow', '#three', function() {
$('#resultContainerMX').hide();
$('#selectMX').on('change', function() {
var location = $('#selectMX option:selected').val();
$('#resultContainerMX').load('locations-report.php?location='+location);
$.getScript( 'js/jquery.mobile-1.4.5.min.js', function( data, textStatus, jqxhr ) { $('[data-role="collapsible"]').collapsible(); });
}); // on change
$('#resultContainerMX').show(4000);
}); // on pagecreate or pageshow or mobileinit event
The getScript function is the additional help needed for collapsible functionality, and that's the code in full for the tide and weather delivery .
On page #four I'm using the google maps plugin gmaps, from jQueryMobile thirdParty examples, trying to customize this for my purposes. On this page there are toggled views: List and Map.
In list-view, the presented buttons toggle nicely as popup dialogs and collapsibility is functional with no additional help.
In map-view, ( image above ) using markers to plot approx 30 locations that when toggled open an info window (infobox.js) also delivering tide and weather data, but collapsible functionality fails. I've tried the same code help on this page as on pages #two and #three, with the outcome being either,
1.) getScript here delivers additional collapsible containment to existing containment, and functions, but containment box only opens a few pixels, like a head-fake, and looks awful. NOTE: Curiously, the collapsible set and collapsible containment do have classes added to them, with an anchor tag added to the heading toggle, even when I do not add code help.
2.) As an alternative, using properly set up cachedScript call, nothing collapsible happens within the info window, but the collapsible functionality on pages #two and #three then fails. And as another curiosity, on the list-view popup, the dialog opens and after a few seconds goes to home page in a redirected manner.
A jsfiddle: ( http://jsfiddle.net/sL9ttf20/) has been created, using a button at the bottom that when clicked again loads jquery.mobile-1.4.5.min.js and collapsibility is returned. NOTE: the button here is a helper, but will not do for the real setup. So, the question is, how to get collapsible functionality to take place without the button, and without messing with collapsible functionality now existing on pages #two and #three.
Example code snip from jquery.gmaps.js with most relevant section being the 'each'(data functionality:
addMarkers: function(data) {
var config = `$`(this).data(pluginName);
var map = `$`(this).data(pluginName + '.map');
var bounds = new google.maps.LatLngBounds();
var info = new InfoBox({
disableAutoPan: false, // myAdds
maxWidth: 360, // myAdds
pixelOffset: new google.maps.Size(-440,-340), // myAdds
boxStyle: {
border: "1px solid #b30000",
background: "white",
width: "350px",
padding: "5px"
},
closeBoxURL: " http://kingfishermobile.rez72.net/css/images/close.gif",
pane: "floatPane",
enableEventPropagation: true
}); // infobox
var lat="";
var lon = "";
if (lat && lon) {
var myLocation = new google.maps.LatLng(lat, lon);
new google.maps.Marker({ map:map, position:myLocation, icon:" http://kingfishermobile.rez72.net/css/images/mm_20_green.png" });
bounds.extend(myLocation);
} //if
`$`.each(data, function(i) {
var icon = " http://kingfishermobile.rez72.net/css/images/genericon-location.png";
var marker = new google.maps.Marker({ map:map, position:this.position, title:this.title, icon:icon });
var content = this.content;
if (content) {
google.maps.event.addListener(marker, 'click', (function(map, marker, content) { return function() {
info.setContent(`$`(content).html());
info.open(map, marker);
`$`.getScript( ' http://kingfishermobile.rez72.net/js/jquery.mobile-1.4.5.min.js', function( data, textStatus, jqxhr ) { `$`('[data-role="collapsible"]').collapsible(); });
// `$`.cachedScript( "js/jquery.mobile-1.4.5.min.js" ).done(function( script, textStatus ) { console.log( textStatus ); `$`('[data-role="collapsible"]').collapsible(); }); // cached script
};})(map, marker, content)); //add listener
} //if content
bounds.extend(this.position);
}); //each
return bounds;
}
}; // addmarkers
From index.php#four an HTML code snip as one of 30 list items (representing markers in the map view, and the fully functional buttons in the list-view:
HTML structure:::::::::: This is two of 11 collapsibles within each li's collapsible-set
<ul><li class="ui-li-has-count" data-marker-info="23.1330200,-82.3830400">
<div class="silent" style="display:none;">
<div class="ui-gmap-marker-info" data-theme="a">
<div data-role="collapsible-set">
<div id="smt" class="col" data-role="collapsible">
<h3 class="selector">Sun and Moon Times:</h3>
<div>php functionality goes here</div>
</div>
<div id="tt" class="col" data-role="collapsible">
<h3 class="selector">Tide Times:</h3>
<div>php functionality goes here</div>
</div>
</div>
</div>
</div>
<a role="button" class="ui-link ui-btn ui-btn-a ui-icon-carat-r ui-btn-icon-right ui-shadow ui-corner-all ui-mini" href="showDetails.php?location=36" data-role="button" data-icon="carat-r" data-iconpos="right" data-theme="a" data-mini="true" data-rel="dialog" data-transition="pop">
<h1 class="ui-gmap-marker-title wrap" data-mini="true">Havana, Cuba</h1>
<div class="ui-li-count ui-body-inherit">
<span>Get Tides and Weather</span>
</div>
</a>
</li> </ul>
Example view: ( http://www.kingfishermobile.rez72.net/index.php)
On pages #two and #three, I have select drop-down delivering tide and weather data where collapsible functionality works with a little help from additional code: Example:
$( document ).on( 'pageshow', '#three', function() {
$('#resultContainerMX').hide();
$('#selectMX').on('change', function() {
var location = $('#selectMX option:selected').val();
$('#resultContainerMX').load('locations-report.php?location='+location);
$.getScript( 'js/jquery.mobile-1.4.5.min.js', function( data, textStatus, jqxhr ) { $('[data-role="collapsible"]').collapsible(); });
}); // on change
$('#resultContainerMX').show(4000);
}); // on pagecreate or pageshow or mobileinit event
The getScript function is the additional help needed for collapsible functionality, and that's the code in full for the tide and weather delivery .
On page #four I'm using the google maps plugin gmaps, from jQueryMobile thirdParty examples, trying to customize this for my purposes. On this page there are toggled views: List and Map.
In list-view, the presented buttons toggle nicely as popup dialogs and collapsibility is functional with no additional help.
In map-view, ( image above ) using markers to plot approx 30 locations that when toggled open an info window (infobox.js) also delivering tide and weather data, but collapsible functionality fails. I've tried the same code help on this page as on pages #two and #three, with the outcome being either,
1.) getScript here delivers additional collapsible containment to existing containment, and functions, but containment box only opens a few pixels, like a head-fake, and looks awful. NOTE: Curiously, the collapsible set and collapsible containment do have classes added to them, with an anchor tag added to the heading toggle, even when I do not add code help.
2.) As an alternative, using properly set up cachedScript call, nothing collapsible happens within the info window, but the collapsible functionality on pages #two and #three then fails. And as another curiosity, on the list-view popup, the dialog opens and after a few seconds goes to home page in a redirected manner.
A jsfiddle: ( http://jsfiddle.net/sL9ttf20/) has been created, using a button at the bottom that when clicked again loads jquery.mobile-1.4.5.min.js and collapsibility is returned. NOTE: the button here is a helper, but will not do for the real setup. So, the question is, how to get collapsible functionality to take place without the button, and without messing with collapsible functionality now existing on pages #two and #three.
Example code snip from jquery.gmaps.js with most relevant section being the 'each'(data functionality:
addMarkers: function(data) {
var config = `$`(this).data(pluginName);
var map = `$`(this).data(pluginName + '.map');
var bounds = new google.maps.LatLngBounds();
var info = new InfoBox({
disableAutoPan: false, // myAdds
maxWidth: 360, // myAdds
pixelOffset: new google.maps.Size(-440,-340), // myAdds
boxStyle: {
border: "1px solid #b30000",
background: "white",
width: "350px",
padding: "5px"
},
closeBoxURL: " http://kingfishermobile.rez72.net/css/images/close.gif",
pane: "floatPane",
enableEventPropagation: true
}); // infobox
var lat="";
var lon = "";
if (lat && lon) {
var myLocation = new google.maps.LatLng(lat, lon);
new google.maps.Marker({ map:map, position:myLocation, icon:" http://kingfishermobile.rez72.net/css/images/mm_20_green.png" });
bounds.extend(myLocation);
} //if
`$`.each(data, function(i) {
var icon = " http://kingfishermobile.rez72.net/css/images/genericon-location.png";
var marker = new google.maps.Marker({ map:map, position:this.position, title:this.title, icon:icon });
var content = this.content;
if (content) {
google.maps.event.addListener(marker, 'click', (function(map, marker, content) { return function() {
info.setContent(`$`(content).html());
info.open(map, marker);
`$`.getScript( ' http://kingfishermobile.rez72.net/js/jquery.mobile-1.4.5.min.js', function( data, textStatus, jqxhr ) { `$`('[data-role="collapsible"]').collapsible(); });
// `$`.cachedScript( "js/jquery.mobile-1.4.5.min.js" ).done(function( script, textStatus ) { console.log( textStatus ); `$`('[data-role="collapsible"]').collapsible(); }); // cached script
};})(map, marker, content)); //add listener
} //if content
bounds.extend(this.position);
}); //each
return bounds;
}
}; // addmarkers
From index.php#four an HTML code snip as one of 30 list items (representing markers in the map view, and the fully functional buttons in the list-view:
HTML structure:::::::::: This is two of 11 collapsibles within each li's collapsible-set
<ul><li class="ui-li-has-count" data-marker-info="23.1330200,-82.3830400">
<div class="silent" style="display:none;">
<div class="ui-gmap-marker-info" data-theme="a">
<div data-role="collapsible-set">
<div id="smt" class="col" data-role="collapsible">
<h3 class="selector">Sun and Moon Times:</h3>
<div>php functionality goes here</div>
</div>
<div id="tt" class="col" data-role="collapsible">
<h3 class="selector">Tide Times:</h3>
<div>php functionality goes here</div>
</div>
</div>
</div>
</div>
<a role="button" class="ui-link ui-btn ui-btn-a ui-icon-carat-r ui-btn-icon-right ui-shadow ui-corner-all ui-mini" href="showDetails.php?location=36" data-role="button" data-icon="carat-r" data-iconpos="right" data-theme="a" data-mini="true" data-rel="dialog" data-transition="pop">
<h1 class="ui-gmap-marker-title wrap" data-mini="true">Havana, Cuba</h1>
<div class="ui-li-count ui-body-inherit">
<span>Get Tides and Weather</span>
</div>
</a>
</li> </ul>
Topic Participants
stephenrez72.net
jtara-jquery