I'm trying to load check boxes on a page before it is clicked on. I have a function that create the check boxes and works great. I just trying to work out how to load the check boxes on a separate page before you click on it.
$(document).on('pageshow', function() {
$.mobile.activePage.find("div [data-role=tabs] ul li:first-child a").click();
});
**//THIS IS THE PAGE I WANT THE CHECK BOX CREATED BEFORE LOADED**
$('#fragment-2').on('pagebeforeload', function(){
createCheckboxes()
});
**//HERE IS HOW THE CHECK BOX ARE CREATED**
function createCheckboxes(){
var players_names = playerCal("ars", 7, 5);
$("#createBtn").remove();
$(".content").append('<fieldset class="cbFieldSet" data-role="controlgroup">');
var length = players_names[0].length;
$(".cbFieldSet").append("<ul data-role='listview' data-inset='true' data-theme='d' data-divider-theme='e' data-count-theme='b'><li data-role='list-divider'><span>Select players in the next line up2</span></li></li>");
for(var i=0;i<length;i++){
$(".cbFieldSet").append('<li><input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="'+players_names[0][i]+'"/><label for="cb-'+i+'">'+players_names[0][i]+'</label></li>');
}
$(".cbFieldSet").append("</ul>");
$(".content").trigger("create");
$("#showBtn").css("visibility","visible");
console.log(players_names);
}
You can do it in several different ways.
Lets say you have two separate pages #index and #second.
Do it before page is even active, of course this solution will work only if you are using multi page template, where every page is inside one HTML file:
$(document).on('pageshow', '#index', function(){ createCheckboxes(); }); $(document).on('click', '#test', function(){ alert('Automated Click'); }); $(document).on('pageshow', '#second', function(){ $.mobile.activePage.find("#test").trigger( "click" ); }); function createCheckboxes(){ $('#second').find(".content").append('<fieldset class="cbFieldSet" data-role="controlgroup">'); $(".cbFieldSet").append("<ul data-role='listview' data-inset='true' data-theme='d' data-divider-theme='e' data-count-theme='b'><li data-role='list-divider'><span>Select players in the next line up2</span></li></li>"); for(var i=0;i<5;i++){ $(".cbFieldSet").append('<li><input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="Meh"/><label for="cb-'+i+'">BEh</label></li>'); } $(".cbFieldSet").append("</ul>"); $(".content").trigger("create"); $("#showBtn").css("visibility","visible"); }
Working example: http://jsfiddle.net/Gajotres/vds2U/52/
Do it during second page pagecreate event:
$(document).on('pagecreate', '#second', function(){ createCheckboxes(); }); $(document).on('click', '#test', function(){ alert('Automated Click'); }); $(document).on('pageshow', '#second', function(){ $.mobile.activePage.find("#test").trigger( "click" ); }); function createCheckboxes(){ $('#second').find(".content").append('<fieldset class="cbFieldSet" data-role="controlgroup">'); $(".cbFieldSet").append("<ul data-role='listview' data-inset='true' data-theme='d' data-divider-theme='e' data-count-theme='b'><li data-role='list-divider'><span>Select players in the next line up2</span></li></li>"); for(var i=0;i<5;i++){ $(".cbFieldSet").append('<li><input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="Meh"/><label for="cb-'+i+'">BEh</label></li>'); } $(".cbFieldSet").append("</ul>"); $(".content").trigger("create"); $("#showBtn").css("visibility","visible"); }
Working example: http://jsfiddle.net/Gajotres/vds2U/53/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.