I am new with kendo ui. I am using Kendo UI for my new phonegap project that is developed usin xCode. I had creates a html page which append tag. It work properly when I test on browser. But the same doesn't work in iOS simulator.
Below is my current code:
<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/Initial.js"></script>
</head>
<body>
<div data-role="view" id="drawer-listSurvey" data-layout="drawer-layout" data-title="Create Survey">
<div>
<ul data-role="listview" class="inboxList" id="new-questions">
</ul>
<ul data-role="listview" data-style="inset">
<li data-icon="add"><a data-role="button"data-rel="actionsheet" href="#actionsheet">Add Question</a></li>
<li data-icon="organize"><a>Add Page</a></li>
</ul>
</div>
<div id="footer">
<ul id="actionsheet" data-role="actionsheet" data-popup='{ "height": "auto", "width": 200, "direction": "left" }'>
<li></li>
<li><a onclick="addMultipleChoice()">Multiple Choice</a></li>
<li><a>Dropdown</a></li>
<li><a>Comment Box</a></li>
<li><a>Image</a></li>
<li><a>Text Description</a></li>
</ul>
</div>
</div>
<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
<a data-role="button" data-align="right" data-rel="actionsheet" href="#actionsheet">+</a>
</div>
</header>
</div>
<script>
kendo.mobile.ui.Drawer.current = null;
</script>
<script>
function addMultipleChoice(){
$("#new-questions").append("<div id=\"question\"><ul>Wich is the vowel?<li><input type=\"checkbox\"/><label>A</label></li><li><input type=\"checkbox\"/><label>B</label></li><li><input type=\"checkbox\"/><label>C</label></li><li><input type=\"checkbox\"/><label>D</label></li></ul></div>");
}
</script>
</body>
</html>
Any help will be appreciated.
Thanks in advance
In general using jQuery append() to add items to a Kendo UI Mobile ListView is not supported and not recommended. You should use the Kendo UI's append method, as shown here:
http://docs.telerik.com/kendo-ui/api/mobile/listview#methods-append
Related
I have the following dropdown list as a part of my project:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="rem">CS 520</li>
<li class="rem">CS 530</li>
<li class="rem">CS 571</li>
<li class="rem">CS 575</li>
</ul>
</div>
When i click on any of the li, i want to popup (not alert) a box containing textarea (to submit comments) and SUBMIT, CANCEL and RESET buttons.
I am unable to figure this out using JavaScript (or jQuery). Is there any way this can be achieved? I can find people giving examples where they do the similar problem with an alert, but I need to do it with a simple popup box.
There is somewhat similar problem's solution on this link ; But the JS code is too complex I guess. Thanks
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Check this and modify the code for list
Check this code and correct accordingly, If will click on any li popup dialog will open.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h3>Header</h3>
</div>
<div data-role="content">
<!-- content -->
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
</div>
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li><a id="details" href="#">View details</a></li>
<li><a id="share" href="#">Share</a></li>
</ul>
</div><!-- /popup-menu -->
</div>
<script>
var currentId = 0;
var baseURL = "person.php?id=";
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
</script>
</body>
</html>
For more support and help , go through by giving this link in jsFidle Click Here 1 or check here Link 2
Check these links to open your popup and how it workd
Hi everyone I need help with sections I'm using section-container auto with deep_linking;true
i also have data-slug to each tabs,
I have 3 tabs with images on them so basically i want to have a direct link access to each individual tabs to have a link on the homepage. I tried adding location.hash script, also tried the .on click and .trigger, and none of them works.
thanks a lot.
<body>
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><span>tab1</span></p>
<div class="content" data-slug="loans" data-section-content="">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><span>tab2</span></p>
<div class="content" data-slug="tab2" data-section-content="">
<h1>tab2</h1>
</div>
</body>
this is the The simplest way >>>>>> try this :
HTML
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><a id="tab1" href="#tab1"><span>tab1</span></a> </p>
<div class="content" data-slug="loans" data-section-content="" id="panel1">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><a id="tab2" href="#tab2"><span>tab2</span></a></p>
<div class="content" data-slug="tab2" data-section-content="" id="panel2">
<h1>tab2</h1>
</div>
jquery
$(document).ready(function (){
$('#panel1').hide();
$('#panel2').hide();
$('#tab1').click(function(){
$('#panel1').show();
$('#panel2').hide();
});
$('#tab2').click(function(){
$('#panel2').show();
$('#panel1').hide();
});
});
Demo : here
you can use jquery UI library to make tabs and panels
try this code to figure out what is jquery ui tabs :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
</div>
<div id="fragment-3">
</div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</body>
</html>
to watch how it's look like see this fiddle
for complete reference see here
In simplest terms your markup would be a <ul> with your tabs, followed by a stack of containers for the content of those tabs. You current markup has them inside the same container, which is going to make the effect hard to pull off.
<ul class="tabs">
<li class="tab1">Tab Title</li>
<li class="tab2">Tab Title2</li>
</ul>
<div class="tab-content">
<p class="tab1">Content for tab 1</p>
<p class="tab2">Content for tab 2</p>
</div>
Here's a fiddle -- tweak the CSS as you see fit, but you really don't need JQuery UI just to build tabs.
Ive done it guys, i just added a script:
<script>
$(document).ready(function(){
$('section').removeClass('active');
var hash = window.location.hash;
if (hash !== '')
{
$('section'+hash).addClass('active');
}
});
it checks the hash in the url then sets the section class="Active".
thanks guys for all the replies.
i'm working on a project using cordova / eclipse / kendo ui and i'm going through a weird behave ...
i developed a sample of test to show you ..
when i try to run that sample on google chrome, it does work, but once compiled and running on my phone (which is a nexus 4 by the way even if it doesnt really matter i think ..) it doesnt work...
in this example, we have something simple, a menu with three items and a view which differs depends on what button you click on.
on google chrome, it works, i mean when i click on the first button, it shows "first", same for second and so on ..
when i compile the project with eclipse and run it on my phone, the message is the same whatever the button i clicked on ..
here is my sample of code :
html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<!-- Librairies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/kendo.all.min.js"></script>
<!-- Fonction d'init -->
<script src="init/cordovaInit.js"></script>
<!-- Controleurs -->
<script src="controlers/panelControler.js"></script>
<!-- EndScript -->
</head>
<body onload="onBodyLoad()">
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
<div id="search">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
<div id="third">
<p>third</p>
</div>
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
<ul data-role="listview" data-type="group">
<li>Menu
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span>Test</span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
panelControler('first');
</script>
</body>
</html>
here is the very simple javascript i'm using to test :
function panelControler(action){
alert("panelControler");
if (action === 'first'){
alert("first show");
$("#first").show();
$("#second").hide();
$("#third").hide();
}
else if (action === 'second'){
alert("second show");
$("#second").show();
$("#first").hide();
$("#third").hide();
}
else if (action === 'third'){
alert("third show");
$("#third").show();
$("#second").hide();
$("#first").hide();
}
}
Check the second Q/A pair from the Kendo UI Mobile FAQ.
I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs).
this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.
This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
Home </li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource
I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library :
jPanelMenu
Here is my redered html:
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?
Thanks!
EDIT:
Here is updated code with solution from dbaseman
<html>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<div class="menu-trigger">Click Me</div>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index.Tablet</title>
</head>
<body>
<div>
tablet home
</div>
</body>
</html>
</body>
</html>
You need to add a "trigger" element to enable the menu (it looks for .menu-trigger by default):
<div class="menu-trigger">Click me to trigger</div>
(Also, apparently it expects the menu element to be hidden initially, so use <ul style="display: none;" ...>.)
Demo
You need to change trigger to anchor tag
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.