I am trying to load some external data into a JQTouch app using JSON. My problem is I don't know what js to use and where to put it.
My html is very simple - a few divs for the pages in the app.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script type="text/javascript" src="jqtouch/jqtouch.min.js" charset="utf-8"></script>
<script type="text/javascript"> $.jQTouch(); </script>
<script src="javascripts/cricket.js" type="text/javascript"></script>
<style type="text/css" media="screen">#import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">#import "themes/apple/theme.css";</style>
<title>Cricket</title>
</head>
<body>
<!-- "Main Menu" -->
<div id="home" class="current">
<div class="toolbar">
<h1>Cricket</h1>
</div>
<ul class="rounded">
<li class="arrow">Clubs</li>
<li class="arrow">Fixtures</li>
<li class="arrow">Twitter</li>
</ul>
<ul class="rounded">
<li class="arrow">About</li>
</ul>
</div>
<!-- "Clubs" - Will contain the list of clubs -->
<div id="clubs">
<div class="toolbar">
<h1>Clubs</h1>
<a class="button back" href="#">Back</a>
</div>
<div id="clubslist">
Loading....
</div>
</div>
<!-- "Fixtures" - Will contain the list of fixtures -->
<div id="fixtures">
<div class="toolbar">
<h1>Fixtures</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading....</li>
</ul>
</div>
<!-- "Twitter" - Will contain the tweets -->
<div id="twitter">
<div class="toolbar">
<h1>Twitter</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading tweets....</li>
</ul>
</div>
<!-- "About" - Will contain info about the app/contact -->
<div id="about">
<div class="toolbar">
<h1>About</h1>
Back
</div>
just some text
</div>
Then this is the script that I think I need to use to load the external data (from clubs.php).
<script type="text/javascript">
$.getJSON('http://www.mydomain.com/clubs.php', function(data) {
$.each(data, function(i,item){
$('clubslist').append('<li>' + item.club_name + '</li>');
});
});
</script>
My question is where do I need to putthis and how does it get triggered?
I think I need to put this in a separate JS file (I have already got one called cricket.js which i linked to in the head of the html file). Then I assume I need something to trigger the JS to run... like PageAnimationEnd or similar?
For what it's worth, this is what the clubs.php returns
{"posts":[{"post":{"club_id":"1","club_name":"ABC Cricket Club","club_postcode":"AB12 3DE"}},{"post":{"club_id":"2","club_name":"Beston Cricket Club","club_postcode":"NG1 9XY"}}]}
My ideal situation is that when the user clicks on the 'Clubs' link on the menu page, this fires the page animation where the user then sees 'Loading'. In the background, the Javascript is fired, retrieves the data from clubs.php and then appends it in to the #clublist div.
I think I am close, but missing the final finishing touch. All suggestions appreciated!
Tom
In my pages I do the following, in this example I am pulling a table from a backend script.
function prevOrders()
{
$("#chkPrevOrd").html('Please wait')
$.ajax({
type: "POST",
url: "http://"+document.domain+"/store.php",
data: { method: "prevOrders"},
dataType: "json",
timeout: ajaxTimeout,
success: function(data){
if (data.prevOrders)
{
$("#prevOrderStatus").html(data.prevOrders);
$("#chkPrevOrd").html('Update')
}
},
error: function() {
alert('This is taking too long. You could try again now, or wait and try again later.');
}
});
}
#prevOrderStatus is a DIV on this page, #chckPrevOrd is just a button to let the user know what is happening. you would JQT.Goto('cointainer div for #chkPrevOrd') to go to this page if #chkPrevOrd was actually on a different page.
Related
I've been trying to develop a web application with Bootstrap 4.3.1 and the Spotify API, and all I wish to accomplish at this moment is to center a element on the screen (vertically and horizontally) that contains the authenticated user's username. Apparently, I am unable to do this if the div is within a script tag - is there any way around this? I've included the relevant excerpt of my index.html file and my style.css file.
Index.html
<script id="user-info-template" type="text/x-handlebars-template">
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto text-center">
<h1 class="display-4">Welcome, {{display_name}}.</h1>
<h4 class="display-5">Select one of your playlists to get started.</h4>
</div>
</div>
</script>
Style.css
html,
body {
height: 100%;
}
EDIT
Thank you all for the suggestions, but many of you have said that I shouldn't have tags within my tags, but I'm trying to follow an example created by Spotify. Their code has embedded JS in the index.html, and uses Handlebars like this:
From their Index.html
<script id="user-profile-template" type="text/x-handlebars-template">
<h1>Logged in as {{display_name}}</h1>
<div class="media">
<div class="pull-left">
<img class="media-object" width="150" src="{{images.0.url}}" />
</div>
<div class="media-body">
<dl class="dl-horizontal">
<dt>Display name</dt><dd class="clearfix">{{display_name}}</dd>
<dt>Id</dt><dd>{{id}}</dd>
<dt>Email</dt><dd>{{email}}</dd>
<dt>Spotify URI</dt><dd>{{external_urls.spotify}}</dd>
<dt>Link</dt><dd>{{href}}</dd>
<dt>Profile Image</dt><dd class="clearfix">{{images.0.url}}</dd>
<dt>Country</dt><dd>{{country}}</dd>
</dl>
</div>
</div>
</script>
At the bottom of their Index.html
<script>
(function() {
/**
* Obtains parameters from the hash of the URL
* #return Object
*/
function getHashParams() {
...
}
var userProfileSource = document.getElementById('user-profile-template').innerHTML,
userProfileTemplate = Handlebars.compile(userProfileSource),
userProfilePlaceholder = document.getElementById('user-profile');
...
$.ajax({
url: 'https://api.spotify.com/v1/me',
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
userProfilePlaceholder.innerHTML = userProfileTemplate(response);
$('#login').hide();
$('#loggedin').show();
}
});
...
}
If you wanted to do this all on one page, without importing the app.js file, it will look like this using your divs
You can then insert any javascript you have between the script tags. If you want {display_name} to be a dynamic input you will need to create a function within the script tag referencing this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>Spotify</title>
</head>
<body>
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto text-center">
<h1 class="display-4">Welcome, {{display_name}}.</h1>
<h4 class="display-5">Select one of your playlists to get started.</h4>
</div>
</div>
<script>
</script>
</body>
</html>
You can then move all of the divs and classes around in your css
Hi Guys I have a problem about bootstrap bootstrap.min.css jquery.min.js and bootstrap.min.js are already included in my project but I cannot use well well-sm class and when I add manually by links this time divs engage you can see in the picture. where is the problem I don't understand?
my code :
#model xx.Web.Models.MiniRepairViewModel
#{
Layout = null;
}
<div class="pageWrapper">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
#Html.Action("Breadcrumb", "Manage")
<div class="TextBody">
<div class="container">
#Html.Action("LeftMenu", "Manage") //menu engage
<div class="col-threeQuarters">
#using (Ajax.BeginForm("MiniRepairServiceAdd", "Ajax", new AjaxOptions { OnSuccess = "jsFilt", OnFailure = "OnFailure" }))
{
<ul class="Form">
<li class="oneColumsFull">
#Html.DropDownListFor(x => x.GetCityModel.a, (IEnumerable<SelectListItem>)ViewBag.CitiesList, "select", new { name = "x", id = "y" })
</li>
<li id="ilce" class="twoColumsFull" style="display:none;">
</li>
<li class="oneColums"><input type="text" name="serviceName" id="serviceName" placeholder="Service"></li>
<li class="button"><input class=".bh-sl-reset" id="reset" type="button" value="clear" onclick="javascript: window.location.reload();"></li>
<li class="button"><input type="submit" value="search" name="search"></li>
</ul>
}
<div id="myDiv" class="well well-sm"> </div> //not working
</div>
</div>
</div>
</div>
I am not sure if colThreeQuarters is a bootstrap class, the actual class is col
<div class="container">
<div class="row">
<div class="col-md-9> // 3quarters
</div>
</div>
</div>
You Need to include headtag before Bodytag and add the bootstrap cdn in that head and write you js cdn at bottom of body tag.
SO the code structure will be like this
<html>
<head>
<bootstrap cdn>
</head>
<body>
your content
...
..
<js cdns>
</body>
</html>
This is because you are not loading your bootstrap cdn at right place. You should load all your scripts files inside your head tag as #yashwardhan said.
this mean:
Go to your code, find </head> tag and load all your scripts and css file just before this tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
and use the right bootstrap syntax. colThreeQuarters is not a bootstrap class
Why you should do this, is explained here:-
Where should I put <script> tags in HTML markup?
I am working on an application in Electron, on this page I have put a button however the script does not run when clicked. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far")
}
</script>
</div>
</body>
Add some cdn for .js to work with javascript library functions as i see theres no library imported to work with javascript like
<script src="your_js/cdn"....></script>
Console.log will display text in a terminal window. If you are trying to display something in a browser you have to change the DOM.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<div id="message"></div>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far");
document.getElementById("message").appendChild(document.createTextNode("You see me now"));
}
</script>
</div>
</body>
Simplest way is to create an empty "div" with id of your choosing. Then in javascript use the document object "document" and it's functions like ".write" or ".appendChild" to change the DOM.
You should be able to run the above code in the stack overflow sandbox and see that the output to terminal (console.log) is different than the browser rendered DOM (getElementById("message").appendChild)
your Code should output something in the Browserconsole.
You can open the Developertools afaik with Ctrl+Alt+i.
To output / connect with the Mainapplication you should use IPC.
See: https://electronjs.org/docs/api/ipc-main
Greets
I have a Jquery Mobile multipage with different pages
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="lib/jquery.tmpl.min.js"></script>
<script>
$(document).ready(function(){
$(document).on("pagebeforeshow", "#mainPage", function(e, data) {
showPageDossiers(filename, selector);
});
//do some initialization stufff
)};
function showPageDossiers(filename, selector) {
// incldue template
$.get(filename, function(template) {
$(selector).html(template);
$(selector).trigger("create");
});
}
</script>
</head>
<body>
<div id="mainPage" data-role="page" data-title="Main">
<!-- in comment, this code in external HTML file
<div data-role="header"><h2>Main Page</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divListeDossiers">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO Page2 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
-->
</div>
<div id="page2" data-role="page" data-title="page2">
<div data-role="header"><h2>Page 2</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divList">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO page3 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<div id="page3" data-role="page" data-title="page23">
<div data-role="header"><h2>Page 3</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divList">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO mainPage </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
</body>
</html>
I would like to put the code between the
<div id="pageXX"> .... </div>
in separate JSP files since I may have more pages. Having all in one main
JSP file make it hard to manage and read.
For example, my separate content for the mainPage div, will look like
<div data-role="header"><h2>Main Page</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divListeDossiers">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO Page 2 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
I basically had a Main Page that had a link to page 2 and Page2 had a page to Page 3 and Page3 had a link to MainPage.
I googled but the only things I found is linking to external HTML file.
Anyone known how to break the main file into separate files ?
Thanks
UPDATE : with a complete code that I had now
Use the jquery template system :) On the page before event in javascript you can include the html file.
$(document).on("pagebeforeshow", "site_id", function(e, data) {
showPasswordReset();
});
function showPasswordReset() {
// incldue template
$.get("templates/reset_password.html", function(template) {
$("site_id div[data-role='content']").html(template);
$("site_id div[data-role='content']").trigger("create");
});
}
you have to download the jquery.tmpl.min.js that this will work.
There's nothing much to know, create normal jquery-mobile pages each one with only 1 div with data-role='page' and then use them normally.
A normal link to those pages would use the jquery-mobile ajax navigation model to load the page, and display the data-role='page' div as main content.
I'm on a phonegap project.
I was doing this project with Jquery Mobile Framework. But its results and performance arre so bad at many devices (f.e. my device android 2.3.3 - jquery mobile works nice on android 4.x.x devices i think)
After that, i found this nice and fast framework.
Now, i'm trying to carry my jquery mobile project to Jqmobi.
But there are some problems when i'm trying to carry. I am stucked with the function that i need to show current/active/chosen/opened panel when i click from the navigation.
Why do i need this. Because, "i want to work the functions when the user chooses that panel" that is what i want.
Here is what i have tried in jqmobi;
HTML SIDE ;
<!DOCTYPE html>
<html>
<head>
<title>Live Score</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/jq.ui.css" />
<link rel="stylesheet" type="text/css" href="css/add.css" />
<script type="text/javascript" charset="utf-8" src="js/jq.ui.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jq.mobi.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/myscripts.js"></script>
</head>
<body>
<div id="jQUi">
<div id="content">
<div title="Home" id="index" class="panel" selected="true">
<img src="img/fanatik.jpg" width="320" height="120" alt="">
<ul class="index_list">
<li><span>Football </span>Live Scores</li>
<li><span>Football </span>League Tables</li>
<li><span>Football </span>League Fixtures</li>
<li><span>Program </span>Settings</li>
</ul>
</div>
<!---------------------------------------------------------------------------------------------------->
<div title="LiveScores" id="contents01" class="panel" scrolling="no">
</div><!-- livescores page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueTables" id="contents02" class="panel">
</div><!-- leaguetable page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueFixtures" id="contents03" class="panel">
</div><!-- leaguefixture page -->
<!---------------------------------------------------------------------------------------------------->
<div title="Settings" id="contents04" class="panel">
</div><!-- settings page -->
<!---------------------------------------------------------------------------------------------------->
</div>
<div id="navbar">
home
live
tables
fixtures
settings
</div>
<!---------------------------------------------------------------------------------------------------->
</div>
</body>
</html>
Javascript Side (not working)
$(document).bind('pageshow', function () {
var id = $.ui.activeDiv[0].id;
if (id=="contents01"){
ctx="livescores";
$("#contents01 [class='panel']").text(ctx);
}
else
if (id=="contents02"){
ctx="leaguetables";
$("#contents02 [class='panel']").text(ctx);
}
else
if (id=="contents03"){
ctx="leaguefixtures";
$("#contents03 [class='panel']").text(ctx);
}
});
function getLiveMatches(){
$.getJSON("MY WEB API URL", function (data){
ctx='<ul>';
$.each(data, function (index, value) {
ctx+="<li><table border='1' class='imagetable'><tr><td rowspan='3' width='18%'>" + value.MinuteOrShortStatus + "</td><td>" + value.HomeTeam.Name + "</td><td width='8%'>" + (value.CurrentHomeTeamScore == null ? "-" : value.CurrentHomeTeamScore) + "</td></tr><tr><td>" + value.AwayTeam.Name + "</td><td width='8%'>" + (value.CurrentAwayTeamScore == undefined ? "-" : value.CurrentAwayTeamScore) + "</td></tr></table></li>";
});
ctx+='</ul>';
injectContext("contents01",ctx);
});
}
function injectContext(target, context){
$("#"+target+" [class='panel']").html(context);
}
How can i determine the active panel or page or div in Jqmobi / Appframework..
Please help about it.
Thanks.
You can run a function whenever a panel becomes active.
Add the attribute data-load="func_name" to the panel's div tag.
For Example
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
...
<script>
function onPanel1Activated() {
do task for panel1
}
function onPanel2Activated() {
do task for panel2
}
</script>
...
</head>
<body>
<div id="afui" class='ios'>
<!-- Header ------------------------------------------------------->
<div id="header"></div>
<!-- Content Start ------------------------------------------------>
<div id="content">
<!-- Panel 1 -------------------------------------------------->
<div class="panel" title="Panel 1" id="panel1" selected="true" data-load="onPanel1Activated">
...
</div>
<!-- Panel 2 -------------------------------------------------->
<div class="panel" title="Panel 2" id="panel2" data-load="onPanel2Activated">
...
</div>
...
</div>
</div>
</body>
</html>