The code manipulation that I am doing in Javascript at the bottom does not happen unless I manually refresh the page. Is there any way to prevent this? If not, how can I dynamically refresh the page as soon as it is loaded? Thanks for your help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Universal Travel Flights</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="js/form_validation.js"></script>
<script src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div data-role="page" id="passenger">
<div data-theme="a" data-role="header">
<h3>
</h3>
</div>
<div data-role="content">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="index.html" data-transition="fade" data-theme="" class="ui-btn-active ui-state-persist">
Book
</a>
</li>
<li>
<a href="deals.html" data-transition="fade" data-theme="">
Deals
</a>
</li>
<li>
<a href="contact.html" data-transition="fade" data-theme="">
Contact
</a>
</li>
</ul>
</div>
<form id="inputform" name="inputform" method="get" action="payment.html">
<input type="hidden" name="flightID" id="flightID" />
<div data-role="collapsible-set" id="passengers">
</div>
<br/>
<input type="submit" value="Continue" data-theme="b" data-icon="arrow-r" data-iconpos="right"/>
</form>
<a data-role="button" data-transition="fade" data-theme="c" href="details.html" data-icon="arrow-l" data-iconpos="left">
Back
</a>
</div>
<div data-theme="a" data-role="footer">
<h3>
</h3>
</div>
</div>
<script>
$( document ).on( "pageinit", "#passenger", function() {
var arrArgs = location.search.substring(1).split("&");
document.getElementById("flightID").value = arrArgs[2].substring(arrArgs[2].indexOf("=")+1);
var text = "";
for(var i = 0; i < arrArgs[0].substring(arrArgs[0].indexOf("=")+1); i++)
{
text += "<div data-role='collapsible' data-collapsed='false'><h4>Adult</h4><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
"<input name='fname' id='fname' placeholder='First name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
"<input name='mname' id='mname' placeholder='Middle name' value='' type='text' /></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>"+
"<input name='lname' id='lname' placeholder='Last name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><select name='gender' data-mini='true' id='gender' class='required'>" +
"<option value=''>Gender*</option><option value='female'>Female</option><option value='male'>Male</option></select></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
"<input name='dob' id='dob' placeholder='Date of Birth (mm/dd/yyyy)*' value='' type='text' class='required'/></fieldset></div></div>";
}
for(var i = 0; i < arrArgs[1].substring(arrArgs[1].indexOf("=")+1); i++)
{
text += "<div data-role='collapsible' data-collapsed='false'><h4>Child</h4><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
"<input name='fname' id='fname' placeholder='First name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
"<input name='mname' id='mname' placeholder='Middle name' value='' type='text' /></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'><input name='lname' id='lname' placeholder='Last name*' value='' type='text' class='required'/>" +
"</fieldset></div><div data-role='fieldcontain'><select name='gender' data-mini='true' id='gender' class='required'><option value=''>Gender*</option><option value='female'>Female</option><option value='male'>Male</option></select>" +
"</div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'><input name='dob' id='dob' placeholder='Date of Birth (mm/dd/yyyy)*' value='' type='text' class='required'/></fieldset></div></div>";
}
document.getElementById("passengers").innerHTML = text;
});
</script>
</body>
</html>
Ok I think I figured it out...Wrap your Script with this:
<script>$(document).ready(function( ...Place all that code in here...
); <<<you need to close it.
</script>
That should do it.
Related
I am a beginner in ASP.NET MVC.
I am working on a project in which the navbar of my partial view for shared layout fits to screen even though I added .container class from bootstrap.
I want my navbar to be in the default size that .container class sets its content into.
If you refer the _Layout.cshtml script, you will see that the #RenderBody() is used to render the contents present in the body.
But the output of it is not what I expected. Why could this be happening?
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewBag.Title - BBC Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Links to other CSS-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-expand-sm navbar-light fixed-top z-depth-1" style="background-color: #F5F5F5">
<!--Navbar toggle button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Logo-->
<a class="navbar-brand" href="#">
<img src="~/Content/Images/BBCLogo.png" height="50" width="50" />
</a>
<!--Links-->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Home</a>
</li>
<li class="divider-vertical">
</li>
<li class="nav-item">
<a class="nav-link hoverable" href="#">About Us</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Login</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
<footer class="footer">
<div class="container">
<span class="text-muted">© Copyright 2017 Big Boy Cars #DateTime.Now </span>
</div>
</footer>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Index.cshtml:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewBag.Title - Index</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="MyCarousel" data-slide-to="1"></li>
<li data-target="MyCarousel" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
</body>
</html>
Your partial view should include only what you want to have in place of the RenderBody helper. You are including the head and body tags again, which is just breaking everything apart.
So your Index.cshtml should be:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="MyCarousel" data-slide-to="1"></li>
<li data-target="MyCarousel" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
EDIT
In regards to the navbar. You have to wrap it in a .container:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
..
</nav>
</div>
It's on the docs
I am trying to use Fine-Uploader in a asp.net mvc core project, but nothing is being displayed, besides a box, In the inspector in google chrome , I am getting qq is not defined.
I am adding the js,css in _Layout.cshtml
CSS
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/azure.fine-uploader/fine-uploader- gallery.min.css" />
<link rel="import" href="~/lib/azure.fine-uploader/templates/gallery.html" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/azure.fine-uploader/fine-uploader-gallery.min.css" />
<link rel="import" href="~/lib/azure.fine-uploader/templates/gallery.html" />
</environment>
JS
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/lib/azure.fine-uploader/azure.fine-uploader.min.js"> </script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
<script src="~/lib/azure.fine-uploader/azure.fine-uploader.min.js"></script>
</environment>
I have the gallery added in a cshtml as per the example on the fine-uploader site, if I remove the first script tag I get the fine-uploader box showing(See image below), but nothing else is shown.
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
<title>Fine Uploader Gallery UI</title>
<div id="uploader"></div>
<script>
var uploader = new qq.azure.FineUploader({
element: getElementById("uploader")
})
</script>
qq is not defined.
This indicates that you are not loading the fine uploader js file correctly onto your page. I suggest looking at your network requests. You will likely see that either the js file isn't loading at all, or the contents are incorrect.
I was missing a #section Scripts surrounding my script tag
<title>Fine Uploader Gallery UI</title>
<div id="uploader"></div>
#section Scripts{
<script type="text/javascript" src="~/lib/azure.fine-uploader/dist/azure.fine-uploader.min.js"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<script>
var uploader = new qq.azure.FineUploader({
debug: true,
element: document.getElementById("uploader"),
template: 'qq-template'
})
</script>
}
I am using jquery mobile .I am facing a problem that my header is going down .When i touch screen downword direction> i already used data-position="fixed" data-tap-toggle="false"
in header ..Here is my full index .html .Please press down .Like scrolling a list then check
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
<link rel="stylesheet" href="css/base.css">
<!-- Extra Codiqa features -->
<!-- jQuery and jQuery Mobile -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="cordova-2.7.0.js"></script>
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/index.js"></script>
<script src="js/PopupScript.js"></script>
<script src="js/CasePadDatabase.js"></script>
<script type="text/javascript" src="js/websocket.js"></script>
<script src="js/BackButtonImplentation.js"></script>
<script src="js/fontSizeFunctionality.js"></script>
<script src="js/CreateFolder.js"></script>
<!--script src="js/emailcomposer.js"></script-->
<script>
$(document).ready(function() {
$("#Home").css({ 'padding-top': '0px' });
$("#myFixedHeader").fixedtoolbar({ tapToggle: false });
});
</script>
</head>
<body>
<!--**********************************Home page Star******************************-->
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" id="myFixedHeader">
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- **************Case Information Pop up Start*******************-->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;" >Case Date:</label>
<input name="text-12" id="text-12" value="" type="date" class="caseDate_h">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h"></textarea>
</div>
</div>
</div>
<!--Case Information Pop up End************************-->
<!-- User setting Pop up Start-->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="content">
<div><img src="img/settings.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text"/>
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option>Select size</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15">15 px</option>
<option value="16">16 px</option>
<option value="17">17 px</option>
</select>
</div>
</div>
</div>
<!-- User setting Pop up End-->
</div>
<script>
/*var mySocket = new GapSocket("192.168.1.3", 8101);
$(document).on('pagebeforeshow', '#Home', function() {
console.log("Home Page")
mySocket.onopen = function(){ alert("option") };
mySocket.onmessage = function(msg){alert(msg);};
mySocket.onerror = function(msg){alert("Oh Shit! " + msg);};
mySocket.send("some data here");
mySocket.onclose = function(){ alert("close") };
});*/
$("#headerButtons").on("click", "a", function() {
if ($(this).attr("id") == "Add") {
isUpdaterequired=false;
$('.caseName_h').val('');
$('.caseDate_h').val('');
$('.caseTextArea_h').val('');
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + day;
} else if ($(this).attr("id") == "Setting") {
} else if ($(this).attr("id") == "Edit") {
//alert("Edit Button click ");
$(".ctrl").toggleClass("togg");
}
});
</script>
</div>
<!--Home Page End-->
<!--DocumentScreen Page Start-->
<div data-role="page" id="DocumentScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<div><img src="img/Connect-Realtime.png" id="realTimeImaage" class="realTime_h"/></div>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderInside_Data" >
</ul>
</div>
<script>
$(document).on('pagebeforeshow', '#DocumentScreen', function() {
console.log("DocumentScreen Page");
//loadFolderContent();
});
$(document).on('click', '.documentRowID', function() {
$.mobile.changePage($("#realTimeScreen"));
/* $.mobile.changePage($("#realTimeScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});*/
console.log(this.id)
});</script>
<!--Document Pop up Start-->
<div data-role="popup" id="documentPopUpScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b">
Cancel
<h1>Document Information</h1>
Ok
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="documentName_h">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;" >Date:</label>
<input name="text-12" id="text-12" value="" type="date" class="documentDate_h">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Notes:</label>
<textarea cols="40" rows="15" name="textarea-12" id="text-12" class="documentTextArea_h"></textarea>
</div>
</div>
</div>
<!--Document Pop up End-->
</div>
<!--DocumentScreen Page End-->
<div data-role="page" id="realTimeScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
Back
<h1 class="ui-title" id="" style="text-align:left;margin-left: 100px;">Document name</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<a><img src="img/Follow-Realtime.png" id=""/></a>
<a><img src="img/Stop-Realtime.png" id=""/></a>
<a><img src="img/Email-Document.png" id="" class="email_h"/></a>
<a><img src="img/search.png" id="" class="search_h" /></a>
<a><img src="img/zoom-in.png" id="" class ="zoomIn_h"/></a>
<a><img src="img/Export-Realtime.png" id=""/></a>
</div>
</div>
<div data-role="content" data-theme="d">
<textarea cols="40" rows="80" name="textarea-12" id="textarea-12" class="test_h"></textarea>
<!--div id="realTimeContents"></div-->
</div>
<!--script>
$(document).on('pagebeforeshow', '#realTimeScreen', function() {
console.log("DocumentScreen Page");
var socket = new WebSocket('ws://192.168.12.171:8101/');
socket.onopen = function() {
socket.send('Hello World')
};
// alerts message pushed from server
socket.onmessage = function(msg) {
console.log("TTTTT"+JSON.stringify(msg));
$(".test_h").val(JSON.stringify(msg));
// $('#realTimeContents').append(JSON.stringify(msg)).listview('refresh');
// $('#realTimeContents').append('<br>');
/*var message=JSON.stringify(msg)
$('#realTimeContents').append(
'<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">'message '</span>' + '<br>' + '<br>' + '<br>'
).listview('refresh');*/
};
// alert close event
socket.onclose = function() {
alert('closed');
};
});
// push a message after the connection is established.
/* for (i = 0; i < 400; i++) {
$('#realTimeContents').append(
'<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">' + 'I was deputy canine devision' + '</span>' + '<br>' + '<br>' + '<br>'
);
}*/
</script-->
<div data-role="popup" id="searchPopupScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Edit Contact</h1>
Search
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Text:</label>
<input name="text-12" id="text-12" value="" type="text" class="seachText_h">
</div>
</div>
</div>
</div>
</body>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
//<-------------------Ready Functionality-->
// $.mobile.loading('hide');
// onDeviceReady();
//document.ontouchmove = function(e){ e.preventDefault(); }
/*$('#select-choice-1').on('change', function () {
var style;
var font = $(this).val();
if ($('head').find('style.font').length === 0) {
style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
$('head').append(style);
$('body *').addClass('font');
} else {
$('body *').removeClass('font');
$('style.font').empty();
style = '.font { font-size: ' + font + 'px !important; }';
$('style.font').append(style);
$('body *').addClass('font');
}});*/
//<-------------------Ready Functionality End----------------------------------------->-->
</script>
</html>
Try this script if your data-attributes don't work.
$(document).ready(function() {
$("#yourHeaderId").fixedtoolbar({ tapToggle: false });
});
Try to call this after your script file links, like this.
...
...
<script src="js/BackButtonImplentation.js"></script>
<script src="js/fontSizeFunctionality.js"></script>
<script src="js/CreateFolder.js"></script>
<!--script src="js/emailcomposer.js"></script-->
<script type="text/javascript">
$(document).ready(function() {
$("#Home").css({ 'padding-top': '0px' });
$("#yourHeaderId").fixedtoolbar({ tapToggle: false });
});
</script>
</head>
<body>
<!--**********************************Home page Star******************************-->
<div data-role="page" id="Home" >
<div id="myFixedHeader" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
...
...
Aldy check on iPhone.
I'm building my first JQM site so I think I'm missing some simple little thing that's causing me a bunch of problems.
I have setup the page, header, content and footer and a panel for the menu. Then I have I have a js file with the following:
$(document).on('pageinit', function (event) {
alert('this works every time you navigate to another page');
$("#menu-panel").panel("open");//this works the first time only
$("#new-lump-sum").popup("open");//this never works
});
Can anyone tell me why I'm getting this behaviour instead of both the panel and the popup opening every time you navigate to another page?
I also can't open them programmatically from the browser console (using chrome)
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cashflow - IFA Portal</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="/Styles/System.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
<script src="/Scripts/highcharts.js"></script>
<script src="/Scripts/System.js"></script>
</head>
<body class="computer android">
<div id="page-wrapper">
<div data-role="page" class="page ui-responsive-panel"><!-- Start Page -->
<div data-role="panel" id="menu-panel" data-position="left" data-display="reveal" data-theme="a" data-dismissible="false" class="">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Items..." data-theme="a" data-filter-theme="a">
<li><img src="/Images/Icons/home.png" alt="" class="ui-li-icon"/>Home</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Tools</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Cashflow</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Clients</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Proposals</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Funds</li>
</ul>
</div>
<div id="header" data-role="header" data-theme="d">
<div id="top-border"></div>
<div class="floatleft">
</div>
<div id="logo">
<img src="/Images/AllanGray-Logo.png" />
</div>
<div class="floatleft header-toolbar" data-role="controlgroup" data-type="horizontal">
Favourites
<img src="/Images/Icons/179-notepad.png" class="ui-li-icon small-icon" />Notes
Display Settings
</div>
<div id="logout">
<section id="login">
Log In
</section>
</div>
<div id="display-options" data-role="popup" class="ui-content">
Close
<form>
<fieldset id="theme-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Theme</legend>
<input type="radio" name="theme" id="theme-1" value="android" checked="checked" />
<label for="theme-1" class="theme-option">Android</label>
<input type="radio" name="theme" id="theme-2" value="apple" />
<label for="theme-2" class="theme-option">Apple</label>
<input type="radio" name="theme" id="theme-3" value="windows" />
<label for="theme-3" class="theme-option">Windows</label>
</fieldset>
<br />
<fieldset id="size-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Screen Size</legend>
<input type="radio" name="size" id="size-1" value="computer" checked="checked" />
<label for="size-1" class="size-option">Computer</label>
<input type="radio" name="size" id="size-2" value="tablet" />
<label for="size-2" class="size-option">Tablet</label>
<input type="radio" name="size" id="size-3" value="phone" />
<label for="size-3" class="size-option">Phone</label>
</fieldset>
</form>
</div>
</div>
<div id="content" data-role="content">
<h2>Cashflow Calculator</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="padding-right:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Investment Assumptions</h3>
<div data-role="fieldcontain" class="narrow">
<label for="time">Time horizon (years)</label>
<input type="range" name="time" id="time" value="20" min="0" max="100" data-highlight="true" style="width"/>
<label for="nominal">Nominal return after unit trust fees (%)</label>
<input type="text" name="nominal" id="nominal" value="" />
<label for="inflation">Inflation rate p.a. (%)</label>
<input type="text" name="inflation" id="inflation" value="" />
<label for="administration-fees">Net platform administration fees (%)</label>
<input type="text" name="administration-fees" id="administration-fees" value="" />
<label for="advisor-fees">Financial advisor fees (%)</label>
<input type="text" name="advisor-fees" id="advisor-fees" value="" />
</div>
</div>
Add Contributions or Withdrawals
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Contributions & Withdrawals </h3>
<ul id="lump-sums" data-role="listview" data-split-icon="delete" data-split-theme="d">
<li>
<a>
<h3>Contribution: R20 000</h3>
<p class="topic"><strong>Recurres: 6 times</strong></p>
<p class="ui-li-aside"><strong>Start Date: 01/08/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Contribution: R5000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Withdrawal: -R25 000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
</ul>
</div>
<div data-role="popup" id="new-lump-sum" class="ui-content">
Close
<form>
<fieldset id="lump-sum-type" data-role="controlgroup" data-type="horizontal">
<legend>Add New</legend>
<input type="radio" name="lump-sum-type" id="contribution" value="contribution" checked="checked" />
<label for="contribution" class="">Contribution</label>
<input type="radio" name="lump-sum-type" id="withdrawal" value="withdrawal" />
<label for="withdrawal" class="">Withdrawal</label>
</fieldset>
<label for="lump-sum-amount">Amount (R)</label>
<input type="text" name="lump-sum-amount" id="lump-sum-amount" value="" />
<label for="lump-sum-date">Date</label>
<input type="text" name="lump-sum-date" id="lump-sum-date" value="" />
<a data-role="button" data-theme="b" onclick="addLumpSum()">Add</a>
</form>
</div>
</div>
<div class="ui-block-b" style="padding-left:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Future Value Graph</h3>
<div id="container" style="width:100%; height:400px;">fgjfjfgjh</div>
<script type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer">
<div id="bottom-border"></div>
<p>Copyright © 2013 Allan Gray. All Rights Reserved.</p>
</div>
<div data-role="panel" id="right-panel" data-position="right" data-display="overlay" data-theme="b">
<h3>Favourites</h3>
<div id="search-box">
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" placeholder="Search..." />
</div>
</div>
<script>
</script>
</div><!-- End Page -->
</div>
</body>
</html>
Popups and dialogs are tricky when it comes to opening them right after a page event occurs. To fix this issue, you need to use setTimeout to open a dialog or a popup.
$(document).on('pageinit', function() {
setTimeout(function () {
$('#new-lump-sum').popup('open');
}, 100); // delay above zero
});
So, if you take a look at the jsfiddle (I posted the code below for consistency) you will see that the input text is centered. However, if I visit the jsfiddle (and on my testing site) on my iPhone (iOS5) the text is just left-aligned. So, am wondering do you guys maybe know is this a know issue (googled - seems not) and do you know of a workaround.
css:
.centerText{
text-align: center;
}
js:
$(document).ready(function(){
$( "#popupLogin" ).popup( "open" );
});
html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
Here some tinkering from your jsFiddle: http://jsfiddle.net/Twisty/jb8Jx/2/ Just shows you some ways to try and move the placeholder about.
HTML
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="content">
<label>Left Align</label><input type="text" placeholder="email" class="leftText">
<label>Right Align</label><input type="text" placeholder="email" class="rightText">
<label>Center Text</label><input type="text" placeholder="email" class="centerText">
<label>Pad Left</label><input type="text" placeholder="email" class="leftPadText">
</div>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a" style="text-align: center;"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
CSS
input.centerText{
text-align: center;
}
input.leftText {
text-align: left;
}
input.rightText {
text-align: right;
}
input.leftPadText {
padding-left: 220px;
}