I have a Flask setup serving a template. The data for this can be nicely split across a few different "sets" which can all be rendered with the same template. I have inserted Bootstrap tabs which I would like to handle displaying the data for each separate set. The data my be non-existent or incomplete initially, but will be filled in over time. The hope is that when the user clicks a new Bootstrap tab, it triggers a request for Flask to return the most recent data pertaining to whichever tab was selected.
I have boiled it down to the small example below. I can successfully generate the Flask request when the tab is changed, but the result isn't triggering a new rendering of the template.
Flask route:
#app.route('/test_route', methods=['GET'])
def get_simple():
set_number_str = request.args.get('set', "mydata-1", type=str)
set_number = int(set_number_str.split('-')[-1])
ready = bool(random.getrandbits(1))
if ready:
# get_data_for_set(set_number)
return render_template('simple_template.html',valid=1, data_set=set_number, data_points=[1,2,3])
else:
return render_template('simple_template.html', valid=0, data_set=set_number, data_points=[0, 0, 0])
Html:
<html>
<head>
<link href="{{url_for('static', filename='js/bootstrap-3.3.7-dist/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/bootstrap-3.3.7-dist/js/bootstrap.min.js')}}"></script>
</head>
<body>
<div class="my-tabs">
<ul class="nav nav-tabs" id="set-tabs">
<li class="active" id="data-1">
Set 1
</li>
<li class="" id="data-2">
Set 2
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="mydata-1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="mydata-2">
<p>Placeholder 2</p>
</div>
</div>
</div>
<script type="text/javascript">
if ({{valid}} == 0) {
$('#mydata'+'{{data_set}}').html("Waiting on scenario to start...");
} else {
$('#mydata'+'{{data_set}}').html("Have some data: " + "{{data_points}}");
}
</script>
<script type="text/javascript">
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var set_id = $(e.target).attr("href");
$.ajax({
url: "/test_route",
type: "get",
data: {set: set_id},
success: function(response) {
$('#mydata-'+set_id).replaceWith(response);
},
error: function(xhr) {
console.log(xhr)
}
});
return false;
});
</script>
When I run, the only thing I see is the "Placeholder _" text.
Is this a limitation of Flask/Jinja2 templating or something I'm doing wrong? If it's the former, do you have any alternative approaches you would recommend? My key constraint is needing to re-retrieve the data from the server each time as it will change.
Related
(Solved my issue-this will stay up as a reference to how an Ajax call works)
I am just learning javascript and how to implement Ajax requests. I am creating a webpage and I want to use Ajax to grab data from a JSON file and display it on the page. I have a div element with the id of jsonpetdata and the JSON file is petinformation.json. I am not getting any syntax errors nor errors with javascript in the console so I have no idea why it isn't displaying data. I have a li in an ul with the id of "dog" and I set up a click event handler in jquery to grab data when clicked using ajax. I just want it to display the data in the empty div with the id of "jsonpetdata". Any help is appreciated.
$("#dog").click(function() {
$.ajax({
type: "GET",
url: "petinformation.json",
dataType: "json",
success: function(data) {
$("#jsonpetdata").html("");
$.each(data, function() {
$.each(this, function(key, value) {
$("#jsonpetdata").append (
value.name + "<br>" +
value.title + "<br>" +
value.paragraph + "<br><br>"
);
});
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
<link rel="stylesheet" href="dropkick.css">
<link href="jquery.bxslider.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Little Walker</title>
<script src="jquery-3.4.1.min.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="dropkick.js"></script>
<script src="js12/jquery.bxSlider.js"></script>
<script src="index.js"></script> <!--links the javascript file-->
</head>
<body>
<header>
<div class ="topnav" id="myTab">
<nav>
<ul> <!--Creates navigation bar, sets the information page to the active tab-->
<li>Home</li>
<li> <a class ="active" href = "Information.html" >Information</a></li>
<li><a href = "Appointment.html" >Appointment</a></li>
<li>About</li>
</ul>
</nav>
</div>
</header>
<main>
<h1>Helpful Hints</h1>
<p>This page is dedicated to offer you helpful information depending on what type of animal you have.</p>
<label for="animal" id = "animal_label">Choose an animal to get information(you will be redirected to a webpage)</label>
<br>
<br>
<div class="custom-select" id="custom-select"> <!--creates a drop down menu to select which animal you want more information on-->
<select id="animal" name="animal" class="animal" required size="1" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);"> <!--redirects user to specified webpage on click-->
<option value="">Select</option>
<option value="https://iditarod.com/ten-tips-for-taking-care-of-your-dog/">Dog</option> <!--depending on the selected animal, clicking on the item will re-direct you to a specific web page-->
<option value="https://www.petsafe.net/learn/cats-101-basic-health-care-tips-to-keep-your-cat-healthy">Cat</option>
<option value="https://www.petco.com/content/petco/PetcoStore/en_US/pet-services/resource-center/new-pet/eight-tips-to-keep-your-freshwater-fish-happy-and-healthy.html">Fish</option>
</select>
</div>
<div id = "jsoninformation">
<p>If you would rather not be directed to a website, you can get quick tips on your pets by selecting here.</p>
<ul>
<li id = "dog"><a title="dog">Dog</a></li>
</ul>
</div>
<div id="jsonpetdata"></div>
<div id ="bxslider">
<ul id="slider">
<li><img src = "images/dog.jpg" alt = "dog" ></li>
<li><img src = "images/cat.jpeg" alt = "cat" ></li>
<li><img src = "images/fish.jpg" alt = "fish" height = "300" ></li>
</ul>
<p id="pager"></p>
</div>
<!--<img src="householdpets.jpg" alt = "Household Pets" width = "800" height = "500"/>adds an image to the page-->
</main>
<footer> <p>©littlewalkerco</p></footer>
</body>
JSON: {"pets":[
{
"name": "Dog",
"title": "Caring tips",
"paragraph": "1. Provide a protected and clean living environment for your dog 2. Always keep fresh water available. 3. Feed a quality diet and prevent obesity. 4. Have your pet examined by a veterinarian on a regular basis. 5. Let your dog exercise."
}
]}
So I'm fairly new to AJAX, I have a simple 3 page project which I am using AJAX to transition between pages.
I have an index.html page which loads all the html / body / scripts etc:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax practice</title>
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div class="" id="wrapper">
<div class="overlay"></div>
<header>
<nav>
<ul>
<li><a class="aboutBtn" href="main.html">Home</a></li>
<li><a class="aboutBtn" href="about.html">About</a></li>
<li><a class="aboutBtn" href="#">Menu</a></li>
<li><a class="aboutBtn" href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="page wrapper" id="page">
<div class="circle" id="black"></div>
<div class="circle" id="red"></div>
<div class="circle" id="blue"></div>
<section class="mainSplash main">
<div class="mainSplash__content" id="content">
</div>
</section>
</div> <!-- page -->
</div> <!-- wrapper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
and my 2 pages are:
main.html:
<h1 class="mainSplash__header--h1">Main</h1>
about.html:
<h1 class="mainSplash__header--h1">About</h1>
Here is the AJAX which transitions the pages:
$(document).ready(function() {
var pathname = window.location.pathname; // Returns path only
console.log(pathname);
// $('.mainSplash').css('height',$(window).height() - 60);
$(".aboutBtn").click(function(e) {
e.preventDefault();
var pageTitle = $(this).text();
var pageUrl = $(this).attr('href');
changePage(pageUrl, true, pageTitle);
}); // click
function changePage(url, bool, pageTitle){
$('#page').addClass('fadeOut');
loadContent(url, bool, pageTitle);
}
function loadContent(url, bool, pageTitle){
$.ajax({
url: './' + url,
type: 'get',
contentType: 'html',
success: function(data){
$('#page').one('animationend',
function(e) {
// load content
$('#page').removeClass('fadeOut');
$('#page').addClass('fadeIn');
$('#content').html(data);
//$("html").html(data);
// Change url
if(url != window.location){
window.history.pushState({path: url}, pageTitle, url);
}
});
}
});
}
function removeAnimation(){
$('#page').removeClass('animate');
}
});
So my transitions work fine when I have come from index.html, though when I refresh main.html or about.html, they do not keep the code from index.html (obviously).
My question is:
How do I handle a refresh or back button from my pages without losing the index.html content? Any help or advice is appreciated - thank you in advance.
PS: If anyone knows of any AJAX html page transition examples I would love to know so I can improve my code, as I'm looking for best practice for AJAX transitions!
multi way available to do this but best way is use hash routing. see this plugin 'Routei '.set param in hash route then and get it when click on back button and handel ajax whit this param.
I would suggest using the browser page hash and on navigation check for the given hash and load the corresponding page.
let hash = window.location.hash;
When the hash changes, your browser adds a new history for that page.
On the load of the Site you need to add entry in the history with the command history.pushState and to go back to use the buttons of the browser you will need the EventListener onpopstate
I am building an e-commerce site. Right now it's basically one HTML page that filters in based on page loads and clicks. I did it this because the entire site needed to be dynamic, as I'll be tying in a show shortly.
Everything seems to work fine now that I have placed the script on the actual pages instead of in a main .js file. I get a few hiccups here and there, and I'm hoping this issue will help fix some of them.
Sometimes when I click on the view cart button it throws back a type error saying that $a.mobile.document.on is not a function. This doesn't happen all the time. I can just click the button with the shopping cart open and the cart just refreshes. As I am clicking the button, nothing in the code should be changing, everything should be flowing the exact same. Why do I get the error sometimes? There is no pattern as to how often the error occurs (i.e. every 3rd click, etc...)
My code:
<head>
<meta charset="UTF-8"/>
<title>DATique</title>
<link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/jqm-icon-pack-fa.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="container" data-role="page" data-theme="b">
<div id="header" data-role="header">
<div id="headerGraphic"><img class="menu" src="img/products/DATique.png" alt="" align=center></div>
<!-- todo add tagline back in -->
<div data-role="footer" id="headerTagLine">an adult novelty company</div>
</div>
<div id="mainNavBar">
<div id="mainNav" data-role="navbar">
<ul>
<li class="home ui-icon-home">Home</li>
<li class="about ui-icon-question-circle">About</li>
<li class="contact ui-icon-envelope">Contact</li>
<li class="request ui-icon-lightbulb-o">Requests</li>
<li class="find ui-icon-location-arrow">Find</li>
</ul>
</div>
</div>
<div id="content" data-role="main">
<!-- todo add facebook plugin -->
<div id="sideBar">
<div id="sideNav">
<script>
</script>
</div>
</div>
<div id="productWindow">
<script>
</script>
</div>
</div>
<div data-role="footer" id="footer">
<ul>
<li id="addingItem"></li>
<li id="cartHolder">
<div class="view">View Cart</div>
<div class="cartImg"><img src="lib/png/shopping-cart.png"></div>
<div class="badge ui-corner-all"></div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var initialLoad = $.post('lib/aboutUs.php');
initialLoad.done(function (data) {
$('#productWindow').html(data);
});
var sideBar = $.post('lib/sideNav.php');
sideBar.done(function (data) {
$('#sideNav').html(data);
});
$('#cartHolder').unbind().click(function (data) {
var url = 'lib/cart.php';
var getCart = $.post(url);
console.log(data);
getCart.done(function (data) {
$('#content').html(data);
});
getCart.fail(function (data) {
console.log(data);
});
});
})
</script>
</body>
Here's my cart.php. The only file affected by the click event is the show cart button.
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<?php
session_start();
#$_SESSION = array();
$items = $_SESSION;
echo "<div id='showCart' class='ui-corner-all' style='max-width:400px;'>
<div data-role='header' data-theme='a' class='ui-corner-all' style='margin-top:20px;'>
<h1>Your Cart</h1>
</div>
<div role='main' class='ui-content ui-corner-all'>
<ul data-role='listview' data-split-icon='delete' data-split-theme='d'>";
foreach ($items['cart'] as $list) {
echo "<li ><a href='#'>
<img src = 'img/products/" . $list['itemNum'] . ".png'>
<h3 > " . $list['itemName'] . " </h3 >
<h1 style='text-align:right'> " . $list['price'] . "
</h1 ></a>
<a href='#' class='removeItem' name='" . $list['itemNum'] . "'>Remove Item</a>
</li >";
}
echo "</ul>
</div>
</div>"
?>
<script>
$(document).ready(function() {
console.log ("error ready");
function showCart() {
console.log("showCart Function");
var url = 'lib/cart.php';
var getCart = $.post(url);
getCart.done(function (data) {
console.log("cart received");
$('#content').html(data);
});
}
$('.removeItem').unbind().click(function () {
console.log("remove clicked");
var itemNum = {'itemNum': ($(this).attr('name'))};
var sent = $.post("lib/removeFromCart.php", itemNum);
sent.done(function () {
console.log("item removed from cart");
showCart();
});
});
});
</script>
I also have 2 other pages that have script on them that are loaded onto the home page by $.post.
Sorry if this question is easy, I just hope it isn't a period or brace somewhere. It's almost always a period or a brace. Again, looking to see if someone can tell me why this sometimes throws an error when I hit the view cart button. It seems to be doing it right after the console.log call in the cart.php.
Just a note not an answer
i had all my javascript in a myScript.js file that loaded at the bottom of the html of the main page. but none of the other pages with scipts would read the javascript on the main page for some reason until i loaded the .js file into each page.
$(document).ready(function() {
code 1
....});
$(document).ready(function() {
code 2
....});
code 1 is not able to access code 2 and vice versa, in php this is akin to this
function one(){
code 1
}
function too(){
code 2
}
One way around that is to globalize stuff, by using window. although it's not usually recommended.
var one;
var window.one;
for example( scope resolution ). Other ways involve using the DOM, by attaching to a object on the page, such as how a plugin works. for example using $(element).data('mydata', {foo:'bar'});
not sure if this was what you were saying but the explanation is way to long for a comment.
iam working on mobile app. in my controller i created a json array and iam trying to display the array values into a list in my html page. i want show the list when html page is automatically loaded.
actually my json array contains 'category_id' $ 'category_name' and iam looking forward to next page when click on the 'category_name'
nextPage.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<center>
<body id="category_id">
<div data-role="page" id="catlist">
<div id="loading" > </div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>category</h1>
</div>
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="category">
<li></li>
</ul>
</div>
</div>
</body>
</center>
</html>
nextPage.js
var base_url="http://dev.edfutura.com/nithin/jps/edfuturaMob/";
$(document).on("pageinit","#catlist", function() {
var submitUrl = base_url+"categorylist/get_categorylist";
$("#loading").css("display", "block");
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response)
{
//do something pls
},
error: function()
{
alert("error");
}
});
});
categorylist.php
function get_categorylist()
{
$cat=$this->categorylist_model->get_cat();
echo json_encode($cat);
}
my json array
[{"category_id":"1","category_name":"Academic Analysis"}, {"category_id":"2","category_name":"Teaching Analysis"},{"category_id":"3","category_name":"Skill Analysis"}]
You need to use the response in the $.ajax success function. This response object should be your json object and can therefore easily be accessed via the specified properties category_name and category_id.
$.ajax({
// ...
success: function(response){
// do something with the json response! E.g. generate a new list item and append it to the list.
var categoryList = $('#category');
var category;
for(var i = 0, len = response.length; i < len; i++){
category = response[i];
categoryList.append($('<li>').attr('id', category.category_id).html(category.category_name));
}
},
});
I've created this test page to bring out the issue I'm encountering.
The first time I click on 'Form' tab, the browser shows jQuery Mobile check boxes. Then if I click on 'Home' tab and again 'Form' tab, it shows browser's native check boxes!
What am I doing wrong here? How to fix it?
Thanks in advance!
index.html:
<!doctype html>
<html>
<head>
<title>Form Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
var value1;
var value2;
// remap jQuery to $
(function($) {
})(window.jQuery);
/* trigger when page is ready */
$(document).ready(function() {
initialize();
});
/**
* Initialize the page.
*
*/
function initialize() {
// get server parameters befor making ajax call
getFormValues();
// add click handler to the application navigation menu options
$("nav li").live('click', function(e) {
});
}
/**
* Gets server parameters from the application's configuration file.
*
*/
function getFormValues() {
// get the server URL from external XML file
$.ajax({
type : "GET",
url : "assets/config/formValues.xml",
cache : false,
async : false,
timeout : 5000,
dataType : "xml",
success : function(xml) {
$(xml).each(function() {
value1 = $(this).find('value1').text();
value2 = $(this).find('value2').text();
});
}
});
}
// Listen for any attempts to call changePage()
$(document).bind("pagebeforechange", function(e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if( typeof data.toPage === "string") {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl(data.toPage);
if(u.hash.search(/^#formSection/) !== -1) {
currentContentSection = "formSection";
// We're being asked to display the items for a specific category.
// Call our internal method that builds the content for the category
// on the fly based on our in-memory category data structure.
displayValueFilters();
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
});
/**
* Sets up and displays values.
*
*/
function displayValueFilters() {
var pageSelector = "#formSection";
// Get the page we are going to dump our content into
var $page = $(pageSelector);
// get the div that's expected to have the search fields
var $searchFields = $page.children(":jqmData(role=sclRole)")
// Get the content area element for the page.
var $content = $page.children(":jqmData(role=content)");
// The markup we are going to inject into the content area of the page.
var markup = "";
markup += "<label for='value1'>" + value1 + "</label>";
markup += "<input type='checkbox' name='value1' id='value1' />";
markup += "<label for='value2'>" + value2 + "</label>";
markup += "<input type='checkbox' name='value2' id='value2' />";
$content.empty();
$(markup).appendTo($content).trigger("create");
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Now call changePage() and tell it to switch to the page we just modified.
$.mobile.changePage($page, options);
}
</script>
</head>
<body>
<!-- home page section -->
<section id="homePageSection" data-role="page" data-title="Form Test - Home">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
<a href="#" class="ui-btn-active ui-state-persist" >Home</a>
</li>
<li class="formLineItem">
Form
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<h1>Form - Home Page</h1>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /homePageSection -->
<!-- form section -->
<section id="formSection" data-role="page" data-title="Form Test - Form">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
Home
</li>
<li class="formLineItem">
<a href="#" class="ui-btn-active ui-state-persist" >Form</a>
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /formSection -->
</body>
</html>
assets/config/formValues.xml:
<formValues>
<value1>Videos</value1>
<value2>Images</value2>
</formValues>
Updated code that works:
<!doctype html>
<html>
<head>
<title>Form Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
// data used to generate checkboxes
var value1;
var value2;
// flag that determines the page has already been initialized
var pageInitialized = false;
// flag that determines if the dynamic form has already been created from the loaded data
var formCreated = false;
// remap jQuery to $
(function($) {
})(window.jQuery);
// trigger when page is ready
$(document).ready(function() {
initialize();
});
/**
* Initialize the page.
*
*/
function initialize() {
// get server parameters befor making ajax call
getFormValues();
// set the flag indicating that the page has already been initialized
pageInitialized = true;
}
/**
* Gets server parameters from the application's configuration file.
*
*/
function getFormValues() {
// get the server URL from external XML file
$.ajax({
type : "GET",
url : "assets/config/formValues.xml",
cache : false,
async : false,
timeout : 5000,
dataType : "xml",
success : function(xml) {
$(xml).each(function() {
value1 = $(this).find('value1').text();
value2 = $(this).find('value2').text();
});
}
});
}
// Listen for any attempts to call changePage()
$(document).bind("pagebeforechange", function(e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if( typeof data.toPage === "string") {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl(data.toPage);
if(u.hash.search(/^#formSection/) !== -1) {
currentContentSection = "formSection";
// if the form has not yet been created, proceed to creat it
if(!formCreated) {
// if the page hasn't been initialized (data not loaded), proceed to initialize
// this happens when the user refreshes the page when on 'Form' tab
if(!pageInitialized) {
initialize();
}
// generate the form controls from the loaded data and add them to the page
displayValueFilters();
formCreated = true;
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
}
});
/**
* Sets up and displays values.
*
*/
function displayValueFilters() {
var pageSelector = "#formSection";
// Get the page we are going to dump our content into
var $page = $(pageSelector);
// The markup we are going to inject into the content area of the page.
var markup = "";
markup += "<label for='value1'>" + value1 + "</label>";
markup += "<input type='checkbox' name='value1' id='value1' />";
markup += "<label for='value2'>" + value2 + "</label>";
markup += "<input type='checkbox' name='value2' id='value2' />";
$("#valueCheckboxes").empty();
$(markup).appendTo("#valueCheckboxes").trigger("create");
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Now call changePage() and tell it to switch to the page we just modified.
$.mobile.changePage($page, options);
}
</script>
</head>
<body>
<!-- home page section -->
<section id="homePageSection" data-role="page" data-title="Form Test - Home">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
<a href="#" class="ui-btn-active ui-state-persist" >Home</a>
</li>
<li class="formLineItem">
Form
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<h1>Form - Home Page</h1>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /homePageSection -->
<!-- form section -->
<section id="formSection" data-role="page" data-title="Form Test - Form">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
Home
</li>
<li class="formLineItem">
<a href="#" class="ui-btn-active ui-state-persist" >Form</a>
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<form method="get" action="">
<div data-role="fieldcontain">
<!-- input field for toc search -->
<label id="searchLabel" for="searchInput"><strong>Search terms:</strong></label>
<input type="search" name="searchInput" id="searchInput" value="" />
</div>
<div style="text-align: left">
<fieldset id="valueCheckboxes" data-role="controlgroup" data-type="horizontal"></fieldset>
</div>
<div data-role="fieldcontain">
Search
</div>
</form>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /formSection -->
</body>
</html>
You are including a mess of assets. You need to decide between jQuery Mobile 1.0.1 and 1.1.0 (currently you're including 1.1.0 CSS and 1.0.1 JS).
For jQuery Mobile 1.1.0 your includes should look something like this:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
And for jQuery Mobile 1.0.1 your includes should look something like this:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
Since your code includes jQuery Mobile 1.0.1 it should be including jQuery Core 1.6.4.
I'm not convinced this will fix your problem. So make sure to check your JS console for any errors that occur. If you try to initialize a jQuery Mobile widget after it's already been initialized, you will receive an error.