I'm trying to get the bootstrap dropdown work. The same code works perfectly when executed in standalone manner, however when I integrate it with my existing code, it doesn't work. The button displays, but doesn't dropdown!
The files required for bootstrap and jquery are installed locally, not using CDN.
this.renderLaunchJobs = function( data ) {
var allData = myModel.getMetaData();
workingJobData = {};
backupJobData = {};
var html = '<table style="width:70%"';
html += '<tr>';
html += '<td> Build # </td>';
html += ' <td> <input type="text" name="firstname" style="width:50%;"> </td>';
html += '<td> </td>'
html += '<td> <input type="radio" name="group" id="production" checked>';
html += '<label for="production"> Production</label> </td>';
html += '<td> <input type="radio" name="group" id="private">';
html += '<label for="private">Private</label> </td>';
html += '</tr>';
//adding transfer method
html += '<tr>';
html += '<td> Transfer method </td>';
html += '<td>';
html += myUtils.getDropDownBox("transfermethod_id","width:50%;", workingSubJobData.transfermethod_id, allData['transfermethods'], "id", "nickname" );
html += '</td>';
html += '</tr>';
//adding nested dropdown
html += '<tr>';
html += '<td>';
html += '<div class="container">';
// html += ' <h2>Multi-Level Dropdowns</h2>';
// html += ' <!--<p>In this example, we use jQuery to open multi-level dropdowns on click (see script section below).</p>-->';
html += ' <div class="dropdown">';
html += ' <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials';
html += ' <span class="caret"></span></button>';
html += ' <ul class="dropdown-menu">';
html += ' <li><a tabindex="-1" href="#">HTML</a></li>';
html += ' <li><a tabindex="-1" href="#">CSS</a></li>';
html += ' <li>';
html += ' <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>';
html += ' <ul class="dropdown-menu">';
html += ' <li><a tabindex="-1" href="#">2nd level dropdown</a></li>';
html += ' <li><a tabindex="-1" href="#">2nd level dropdown</a></li>';
html += ' <li>';
html += ' <a class="test" href="#">Another dropdown <span class="caret"></span></a>';
html += ' <ul class="dropdown-menu">';
html += ' <li>3rd level dropdown</li>';
html += ' <li>3rd level dropdown</li>';
html += ' </ul>';
html += ' </li>';
html += ' </ul>';
html += ' </li>';
html += ' </ul>';
html += ' </div>';
html += '</div>';
html += '</td>';
html += '</tr>';
html += '</table>';
var jobs = data;
if( jobs.length == 0 ) {
html += " <br> <font color='red' size='3'> <strong> No Jobs found to Launch. Please add a Job profile. </strong> </font> <br>";
} else {
html += '<br> <br> <br>';
html += myJobs.getJobsHtmlTable( jobs, allData );
}
$('#page_holder').html( html );
$('.tree2').treegrid({
expanderExpandedClass: 'icon-minus-sign',
expanderCollapsedClass: 'icon-plus-sign',
initialState: 'collapsed'
});
}
Index.html file
<!DOCTYPE html>
<html lang="en" class=" js no-touch rgba hsla backgroundsize cssanimations csstransforms csstransforms3d csstransitions fontface generatedcontent svg inlinesvg svgclippaths boxsizing lastchild js no-touch rgba hsla backgroundsize cssanimations csstransforms csstransforms3d csstransitions fontface generatedcontent svg inlinesvg svgclippaths boxsizing lastchild js no-touch rgba hsla backgroundsize cssanimations csstransforms csstransforms3d csstransitions fontface generatedcontent svg inlinesvg svgclippaths boxsizing lastchild">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE7">
<title>A Bootstrap Project</title>
<!-- bootbox -->
<!--
<script src="js/bootbox/bootstrap.min.js"></script>
<script src="js/bootbox/bootbox.min.js"></script>
-->
<link href="treegrid/bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="js/bootbox/bootstrap.min.css">
<!--Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Style -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="css/customize.css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="stylesheets/ie_lt9.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/ie_not.css">
<!--<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/highlight.pack.js"></script> <!-- syntax highlighting -->
<script src="js/fastclick.js"></script> <!-- remove 300ms delay on tap -->
<script src="js/pagify.js"></script><!-- dynamic page loading -->
<script src="js/jquery.ba-hashchange.min.js"></script> <!-- monitor hashchanges -->
<script src="js/jquery.tooltipster.min.js"></script> <!-- tooltips -->
<script src="js/jquery-ui.widget.min.js"></script> <!-- for selective tables -->
<script src="js/select2.js"></script> <!-- select2 -->
<script src="js/scripts.js"></script> <!-- all custom scripts -->
<script src="js/screenshot.js"></script> <!-- all custom scripts -->
<script src="js/utils.js"> </script>
<script src="js/model.js"> </script>
<script src="js/render.js"> </script>
<script src="js/reports.js"> </script>
<script src="js/comments.js"> </script>
<script src="js/settings.js"> </script>
<script src="js/jobs.js"> </script>
<!-- auto complete -->
<script src="js/autocomplete/jquery-1.7.1.min.js"></script>
<script src="js/autocomplete/jquery.ui.core.min.js"></script>
<script src="js/autocomplete/jquery.ui.widget.min.js"></script>
<script src="js/autocomplete/jquery.ui.position.min.js"></script>
<script src="js/autocomplete/jquery.ui.autocomplete.min.js"></script>
<link rel="stylesheet" href="js/autocomplete/jquery-ui-1.8.16.custom.css"/>
<!-- date Picker -->
<!-- <script src="datepicker/jquery.min.js"></script> -->
<script src="datepicker/jquery.plugin.js"></script>
<script src="datepicker/jquery.datepick.js"></script>
<link rel="stylesheet" href="datepicker/jquery.datepick.css">
<!-- Boot Box -->
<script src="js/bootbox/bootstrap.min.js"></script>
<script src="js/bootbox/bootbox.min.js"></script>
<!--- Tree Grid -->
<link rel="stylesheet" href="treegrid/css/jquery.treegrid.css">
<script type="text/javascript" src="treegrid/js/jquery.treegrid.js"></script>
<script type="text/javascript" src="treegrid/js/jquery.treegrid.bootstrap2.js"></script>
<!--
<link rel="stylesheet" href="js/bootbox/bootstrap.min.css">
-->
<!--
<link rel="stylesheet" href="datepicker/jquery-ui.css">
<script src="datepicker/jquery-1.10.2.js"></script>
<script src="datepicker/jquery-ui.js"></script>
-->
<!--
<link rel="stylesheet" href="datepicker/style.css">
-->
<link href="fileupload/uploadfile.min.css" rel="stylesheet">
<script src="fileupload/jquery.uploadfile.min.js"></script>
<script type="text/javascript" >
$(document).click(function() {
$("#globalwarningdiv").removeClass("visible");
$("#globalinfodiv").removeClass("visible");
});
$(document).keypress(function(e) {
$("#globalwarningdiv").removeClass("visible");
$("#globalinfodiv").removeClass("visible");
});
$("#globalwarningdiv").click(function(e) {
e.stopPropagation();
});
$("#globalinfodiv").click(function(e) {
e.stopPropagation();
});
$(document).ready( function() {
myModel.getAllData();
});
</script>
</head>
<body>
<div class="content_wrapper">
<div class="logo"><img src="images/logo.png"></div>
<div id='login-menu' style='display:block;' >
<!--
<div class="mobile_menu_toggle"><a class="icon_arrow_down" href="#">Menu</a></div>
<ul class="sidenav">
<li class="" id="menu-login"> Log-in </li>
</ul>
-->
</div>
<!--
<div id='logout-menu' style='display:none;' >
<div class="mobile_menu_toggle"><a class="icon_arrow_down" href="#">Menu</a></div>
<ul class="sidenav">
<li class="" id="menu-login"> Log-in </li>
</ul>
</div>
-->
</div>
<div class="content" style="display:block;">
<div id="page_holder" style="display: block;">
<h3> Welcome. </h3>
<!-- <script src="js/components.js"></script> -->
</div>
</div>
</div>
</div>
</body>
</html>
I have checked to make sure there is no problem with dependencies. Bootstrap and jquery are perfectly loaded into the page. Other bootstrap components except dropdown works well.
What am I missing? :(
Related
i tried to make a select element in html using materialize css library, and when i try to add dynamic options to the select (for example, a list which each element in the list is an option of the select) and i can't find out why its only adding the first element
here is my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
jQuery(document).ready(function($){
add_options_to_select();
function add_options_to_select(){
for (i = 0; i < 10; i++)
{
$('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}
}
});
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id='mySelect'></select>
<label>Assignment</label>
</div>
</div>
</div>
<script>
$('select').formSelect();
$('.datepicker').datepicker();
</script>
</body>
</html>
It works fine if you initialize formSelect() after calling add_options_to_select();
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
jQuery(document).ready(function($){
add_options_to_select();
$('select').formSelect();
function add_options_to_select(){
for (i = 0; i < 10; i++)
{
$('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}
}
});
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id='mySelect'></select>
<label>Assignment</label>
</div>
</div>
</div>
<script>
// $('select').formSelect();
$('.datepicker').datepicker();
</script>
</body>
</html>
my accordion menu seems to work on firefox, but not on chrome. When clicking on it it doesn't expand. This is the error using chrome inspect: Uncaught ReferenceError: myAccFunc is not defined at HTMLButtonElement.onclick. I used the code from w3.css.
Here is the html:
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>
My Homework Site
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src = "js/Site.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "css/style.css"/>
<div id="container" class = "row" style="height: 9000px;">
<div id="menu" class = "col" style ="max-width: 210px; height: 100%;">
<div class="menu">
</div>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">
Labs <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card">
Lab3<br />
Lab4<br />
Lab5<br />
Lab6<br />
Lab7<br />
Lab8<br />
Lab9<br />
Lab10<br />
</div>
Here is the Javascript:
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}
There are multiple methods you can try to load script before the DOM is ready.
You can use window.functionName = function(){} or $(document).ready(function() {}
window.myAccFunc = function() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>
My Homework Site
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src = "js/Site.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "css/style.css"/>
<div id="container" class = "row" style="height: 9000px;">
<div id="menu" class = "col" style ="max-width: 210px; height: 100%;">
<div class="menu">
</div>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">
Labs <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card">
Lab3<br />
Lab4<br />
Lab5<br />
Lab6<br />
Lab7<br />
Lab8<br />
Lab9<br />
Lab10<br />
</div>
this is because your script is running after your html is load, you need to do something like this:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>
My Homework Site
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css" />
<body>
<p> some html</p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="js/Site.js"></script>
</html>
Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.
I am writing a jQuery mobile app that contains two HTML pages. When user navigates from index.html page to search.html page, jQuery should load elements into search.html page.
However, things seems to gone wrong. The script doesn't work as expected.
index.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova sh*ts -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from name
<input id="filterBoxList" data-type="search" placeholder="Type here to search from department list">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxList" id="list_dept">
</ul>
</div>
</div>
</body>
search.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta charset="utf-8"></meta>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova shits -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
<style>
#listie small{
color: #ccc !important;
}
</style>
</head>
<body>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from dept. list
<input id="filterBoxName" data-type="search" placeholder="Type here to search from name">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxName" id="listie">
</ul>
</div>
</div>
</body>
default.js (loaded the last)
$(document).on("pageshow","search.html",function(){
var chx = 0;
var m="";
var k=[];
$.mobile.loading( "show", {
text: 'Loading',
textVisible: true
});
if(loaded == false) // This will prevent event triggering more then once
{
for (var t in JSON.parse(localStorage.getItem('hr')))
{
m += "<li><a href='#view?id=" + t + "'>" + JSON.parse(localStorage.getItem('hr'))[t].Name + " <small>" + JSON.parse(localStorage.getItem('hr'))[t].Surname + "</small></a></li>";
}
$('#listie').append(m).listview('refresh');
loaded = true;
}
$.mobile.loading( "hide" );
});
Things seems to be nice when the "search" page div is placed inside index.html (and the code is linked in single page, not two). However it does break when I tried splitting up the files into two files.
Anything I can do to fix this?
Well, solved...
Even though the div is on the same file, when using $(document).on("pageshow",src,function(){...}); to point to src, makes sure that src points to the div ID, not the file itself.
In this case, it's $(document).on("pageshow","#search",function(){...});.
Basically I'm trying to make my jquery-mobile application as dynamic as possible so therefore it takes as much variables as possible from a JSON file. I've set up a javascript method that takes in the JSON file, has a series of link buttons with different names and they link to pages which I'm trying to create dynamically and display information on via collapsible elements.
I'll concede that it's a faily ambitious method but it is valid unerrored javascript but I feel that jquery-mobile just won't be able to handle it.
If someone could take a look over my code and tell me if it is possible to do and if so what am I doing wrong? Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" value="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="Page1">
<div data-role="header" data-theme="c">
<a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back">Back</a>
Info
<h2>Skin & Soft Tissue</h2>
</div>
<div data-role="content" data-theme="c" id="Page1_Content">
<p class="infotext"><b>Clinical Condition:</b></p>
<div id="texts"></div>
<script type="text/javascript">
$(document).on("pageinit", "#Page1", function () {
var info = "";
var dpages = "";
var pageno = 1;
var imp = "Json/empirical.json";
$.getJSON(imp, function (data) {
$.each(data.tcontent, function (i, item) {
if (item.Name == 'Skin and Soft Tissue Infections') {
var search = item.Variations;
$.each(search, function (j, subitem) {
info += '' + subitem.condition + '';
dpages += '<div data-role="page" data-theme="a" id="Paged' + pageno + '"> <div data-role="header" data-theme="c"> <a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back"> Back </a> Info <h2>Skin & Soft Tissue</h2> </div> <div data-role="content" data-theme="c" id="Paged ' + pageno + '_Content"> <div data-role="collapsible-set"><div data-role="collapsible" data-mini="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-iconpos="right" data-theme="d" data-content-theme="d"> <h3> Likely Organisms </h3> <p class="guidelinetext"> ' + subitem.organisms + ' </p></div></div> <div data-role="footer" data-theme="c"> <h2>(c) Darragh O Connor </h2></div> </div></div>';
pageno++;
});
}
$("#texts").empty().append(info).collapsibleset();
$("#pages").empty().append(dpages);
});
});
});
</script>
</div>
<div data-role="footer" data-theme="c">
<h2>(c) Darragh O'Connor </h2>
</div>
</div>
<div id="pages"></div>
</body>
</html>