I would like to append some code to a page using jQuery/jQuery mobile,
but I am tripping up on some of the page() and pageshow and refresh methods.
Here is my code. you can cut, paste and run as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('div').live('pageshow', function () {
function fnCreateGroups(){
var section = "<p>and add a whole bunch of html code...</p>";
myClone = $(section);
alert((myClone).html()); // this works
myClone.appendTo("#placeholder").page(); // but not appending
}
fnCreateGroups();
});
</script>
</head>
<body>
<div data-role="page">
<div id="placeholder">
<div data-role="content">
<div id="placeholder">this is a small amount of html code.</div>
</div>
</div>
</div>
</body>
</html>
Beta2 release notes:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
instead of:
myClone.appendTo("#placeholder").page();
try
myClone.appendTo("#placeholder").trigger('create');
From your comment:
You are running the live() on all div's
$('div').live('pageshow', function ()
try using the page id instead
$('#change_this_page_only').live('pageshow', function ()
and this:
<div data-role="page">
to something like this:
<div data-role="page" id="change_this_page_only">
Related
I just learned how to create and append items. I wanted to practice using a button to submit the text to be appended. It works, however, the page seems to refresh right afterwards and removes the text from the list. What am I doing wrong?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="ToDo.css">
</head>
<body>
<h1>To Do:</h1>
<ul>
<li class="todo">Create another todo.</li>
</ul>
<form>
<input type="text" placeholder="Add another item!">
<button onclick="output()">Add</button>
</form>
<script src="ToDo.js"></script>
</body>
</html>
JS:
let ul = document.querySelector('ul');
newItem = document.querySelector('input');
function output() {
let item = newItem.value;
let newTodo = document.createElement('li');
newTodo.innerText = item;
newTodo.classList.add('todo');
ul.append(newTodo);
}
Your button is submitting the form which is causing the page to refresh. Buttons are made to be type submit by default.
It looks like you don't actually need the form so you could either remove it or set the type on the button:
<button type="button" onclick="output()">Add</button>
I'm following the basic tutorial for Leaflet-angular-directive. I am able to see the leaflet map component display in the browser, but the map is blank. The example:
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script>
var app = angular.module("demoapp", ['leaflet-directive']);
app.controller("BasicFirstController", [ "$scope", function($scope) {
// Nothing here!
}]);
</script>
</head>
<body ng-controller="BasicFirstController">
<leaflet width="100%" height="480px"></leaflet>
<h1>First steps, basic example</h1>
</body>
</html>
I don't see where the API key or tile urls is passed, or is it not required?
Thanks!
You code is ok. It works form me with these dependencies ( Angular 1.4.9 ) :
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="angularLealeft/angular-leaflet-directive.min.js"></script>
There is no need for API key.
I am new to SAPUI5. I'm able to create controls in my SAPUI5 mobile application.But I'm not able to set them in a layout. I'm writing my view as HTML page and adding my controls to that. I have tried placing them in a division but I don't know what is the attribute to specify layout.Please guide about the layouts.
Thanks
<template data-controller-name="sample.controllers.index">
<div data-sap-ui-type="sap.m.Page" data-title="Title">
<div data-sap-ui-aggregation="content">
<div data-sap-ui-type="sap.m.Layout" data-type="vertical">
<div data-sap-ui-type="sap.m.Input" data-width="20%"
id="Textfield" data-placeholder="User" data-max-length="10"></div><br>
<div data-sap-ui-type="sap.m.Input" data-width="20%" id="Textfield2" data-placeholder="Password" data-type="Password"></div><br>
<div data-sap-ui-type="sap.m.TextArea" data-width="30%" id="textarea" data-placeholder="Text for information..."></div>
</div>
<div data-sap-ui-type="sap.m.Button" id="btn1" data-text="My Button1" data-press="doIt"></div>
<div data-sap-ui-type="sap.m.Button" id="btn2" data-text="My Button2" data-press="doIt"></div>
<div data-sap-ui-type="sap.m.Label" data-text="I'm Label" data-width="100px" data-height="100px" data-background-colour="orange"></div>
</div>
</div>
This is my sample code and when i run this on browser it shows me a error message that
Uncaught Error: failed to load 'sap/m/Layout.js' from resources/sap/m/Layout.js: 404 - Not Found
here is my index.html
`
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("sample");
var app = new sap.m.App({initialPage:"idindex1"});
var page = sap.ui.view({id:"idindex1", viewName:"sample.views.index", type:sap.ui.core.mvc.ViewType.HTML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>`
<div data-sap-ui-type="sap.m.Layout" data-type="vertical">
There is no such a control like sap.m.Layout. For layout, you can choose any from the sap.ui.layout controls, for example, sap.ui.layout.Grid
I want to make a redirection with jQuery mobile right just after the page loads.
Something like this
<?php
... some php stuff here
?>
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<script>
$.mobile.changePage("index.php");
</script>
But nothing happens...
Thanks!
Nothing happens because jQueryMobile hasn't done it's magic yet.
Try:
$(document).bind('pageinit', function() {
$.mobile.changePage("index.php");
});
You could also try some of the events listed at http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Edited following comment:
The following works as expected for me:
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).bind('pageinit', function() {
$.mobile.changePage("#pageTwo");
});
</script>
</head>
<body>
<div id="firstPageId" data-role="page">
Page One
</div>
<div id="pageTwo" data-role="page">
Page Two
</div>
</body>
</html>
You can use plain ol' JavaScript for this, you don't need jQuery:
window.location = "index.php";
To do it after the page loads, add a $(document).ready() handler:
$(document).ready(function () {
window.location = "index.php";
});
Try, adding your page-id in the script with .live, something like this:
$('#mainpage').live('pageinit', function (event) {
alert("hi");
//$.mobile.changePage("index.php");
});
Here is the full example: http://jsfiddle.net/KyKFE/
On the other hand, you can also use just plain javascript function or php (if .php page) to do the redirection. They are many different ways to do this.
Please try this to end of your page and before </body> tag,
<script>
$(window).load("index.php", function() {
// stuff or not
});
</script>
I hope help you. :)
file://localhost/C:/Users/kürşat/Desktop/yeni%20site/faq%20-%20Kopya/kopya.html
this is my photography tutorial page. I'm did manage to toggle on/off when someone clicks a question.
What I can't do : the top right button can expand all but it cannot contract all questions.
I should contract/expand all even if some of them were previously opened. At first my code was doing the opposite of previous state.
How can I do that?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
$(this).next().toggle("fast");
$(li).css("background-color","#999");
$(article).css("background-color","#FDFEE9");
});
$(document).ready(function(){
$("#expand").click(function(){
$("article").toggle(true);
$(this).text($(this).text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});
$("article").toggle();
});
});
</script>
</head>
<body>
<div id="page"><h1>Temel Fotoğrafçılık Bilgileri<button id="expand">Genişlet</button></h1>
<div class="faq">
<!-- The FAQs are inserted here -->
<ul>
<li>question 1?</li>
<article> <p>answer 1.</p></article>
<li>question 2?</li>
<article> <p>answer 2.</p></article>
<li>question 3?</li>
<article> <p>answer 3.</p></article>
</ul>
</div>
</body>
</html>
Here is the working JSfiddle version:
http://jsfiddle.net/reJu9/
Change the expand click callback to
$("#expand").click(function(){
var $this = $(this);
if($this.text() == 'Genişlet')
$('article').show();
else
$('article').hide();
$this.text($this.text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});
Demo: http://jsfiddle.net/joycse06/reJu9/1/
Maintain a variable, which tells you if the button should expand or collapse questions.
Check this updated fiddle