I init my accordion in the following way:
$(function() {
$("#gallery_accordion").accordion({ event: false });
$("#gallery_accordion").click(function(e) {
var contentDiv = $(this).next("div");
contentDiv.load($(this).find("a").attr("href"));
});
});
The content is loaded onclick but the accordion is invisible.
Nothing is shown. Any help highly appreciated.
Thanks.
Update: The height stays at '0'. Any reason for that?
Here is the markup:
<div id="gallery_accordion">
<h3>My first gallery</h3>
<div id="gallery369">
</div>
<h3>The second gallery</h3>
<div id="gallery381">
</div>
</div>
Try changing your initial call to:
$("#gallery_accordion").accordion({ header: "h3", event : false });
And your HTML to:
<div id="gallery_accordion">
<div>
<h3>My first gallery</h3>
<div id="gallery369">
</div>
</div>
<div>
<h3>The second gallery</h3>
<div id="gallery381">
</div>
</div>
</div>
Each of your cells needs to have its own div tag and in the initial call you have now set the header to the H3 tag.
Hope this helps.
Here is a sample doc that loads the accordion:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#gallery_accordion").accordion({ header: "h3"});
$("#gallery_accordion a").click(function(evt) {
var galleryId = $(this).attr('href').split('#')[1];
var contentDiv = $('#' + 'gallery' + galleryId);
if(contentDiv.html() == " ") {
var galleryContent = getGallery(galleryId);
contentDiv.html(galleryContent);
}
});
var galleryIdI = $('#gallery_accordion div div:first').attr('href').split('#')[1];
var contentDivI = $('#' + 'gallery' + galleryId);
var galleryContentI = getGallery(galleryId);
contentDivI.html(galleryContentI);
});
</script>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="gallery_accordion">
<div>
<h3>Gallery 1</h3>
<div id="gallery369"> </div>
</div>
<div>
<h3>Gallery 2</h3>
<div id="gallery381"> </div>
</div>
<div>
<h3>Gallery 3</h3>
<div id="gallery392"> </div>
</div>
</div>
</body>
</html>
Related
In the code below I want only one item to be dropped in one dragabble div. Hence I have disabled the draggable to false after the drop event. But the drop event is sometimes not triggered and rule "only one element to be droped in one draggable" fails.
I am unable to debug why the drop event is not triggered sometimes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="css/style.css"></link>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
</head>
<body>
<div class="container">
<div>
<h2><strong>Drag and drop Single option</strong></h2>
<p><?php echo $questions[0]['statement']; ?></p>
</div>
<?php foreach($segments as $key=>$segment){ ?>
<div class="row">
<div class="group col-md-3"><?php echo $segment['segment_title'];?>
</div>
<div class="group col-md-7 droppable options" data-segment-id="<?php echo $segment['segment_id'];?>"></div>
</div>
<?php } ?>
<br/>
<br/>
<div class="row" id="all_options">
<div class="col-md-3"><?php foreach($options as $key=>$option){ ?>
<div class="options droppable all" style="position: absolute; top: 5px;right: 5px; display:block">
<div class="draggable option" data-segment="<?php echo $option['segment_id'];?>"><?php echo $option['option_text']; ?></div>
</div><?php } ?>
</div>
</div>
<br/>
<div class="row">
<div class="btn-pannel col-md-6">
<button id="show_answer" class="btn btn-primary">Show Answers</button>
<button id="check" class="btn btn-primary" disabled>Check</button>
<button id="reset" class="btn btn-primary">Reset</button>
</div>
</div>
</div>
<script>
$(function() {
$('.draggable, .droppable').sortable({
connectWith: '.options'
});
$('.droppable').droppable({
drop: function(event, ui){
$('#check').prop('disabled',false);
$(this).sortable('disable');
}
});
});
</script>
</body>
</html>
Problem Solved...!! but a workaround..
I repeated the same code on another event
$('.droppable').sortable({
receive: function(event, ui){
$('#check').prop('disabled',false);
$(this).sortable('disable');
}
});
I try to get a jquery mobile multipage form with local variables running, but I have two problems.
a) the second value is not updated after save, but reloaded in the edit page
b) when I continuously change between view and edit (4 times), the edit-button calls the edit page (see URL), but the page is not shown
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "id":"1" , "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').innerHTML;
$.mobile.navigate("#view", {});
});
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
</script>
</body>
</html>
Here is the complete example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="view-content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').value;
$.mobile.navigate("#view", {});
});
</script>
</body>
</html>
I made an android app with a multi-page template. When I push the Zoeken button on the home page I go to Page 1 (id = Zoeken). On that page, when I push the button (id = zoek), the app goes to the following url android_asset/www/Zoeken/# instead of going to android_asset/www/index.html#win2 (Page 2)
When I change the id of Page 1, the foldername changes too
Why is the id Zoeken turned into a folder name?
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" src="SQLitePlugin.js"></script>
</head>
<body>
<!-- home -->
<div data-role="page" data-theme="e" id="home">
<div data-role="content">
<img src="img/logo_wablief.png" width="300" height="99" alt="wablief logo">
<ul data-role="listview" data-inset="true">
<li>Zoeken</li>
<li>A tot Z</li>
<li>Info</li>
</ul>
</div>
</div>
<!-- Page 1 -->
<div data-role="page" data-theme="e" id="Zoeken">
<div data-role="header" data-position="inline">
<h1>Zoeken </h1>
</div>
<div data-role="content"> <p>Welk woord wil je zoeken?</p>
<label for="search-basic">Vlaams woord</label>
<input type="search" name="search" id="search-basic" value="" />
Zoek
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="win2" data-add-back-btn="true" data-theme="e">
<div data-role="header">
<h1>Zoekresultaten</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<script>
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.sqlitePlugin.openDatabase ("wablief", "", "wablief", 65535);
$("#zoek").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var search = $("#search-basic").val ();
var sql = "SELECT * from wablief WHERE woord LIKE ?";
transaction.executeSql (sql, ["%"+search+"%"],
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var woord = row.woord;
var woord2 = row.woord2;
var vertaling = row.vertaling;
html += "<li>" + woord + " " + woord2 + "<br><br>" + vertaling + "</li>";
}
}
else
{
html += "<li> Geen resultaten </li>";
}
html += "</ul>";
$("#win2").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win2 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win2"));
}, error);
});
});
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
}
</script>
I solved the issue bij adding different jQuery and jQuery mobile files.
I am now using the files you can find here:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I copied and pasted them, for use offline and now it is working like a charm.
I'm trying to pass form slider values between pages so that the changed settings can be used in the target page. For that I'm just accessing the DOM on the same page as explained in the answer here.
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<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>
<script>
$(document).on('pageinit', '#review', function() {
$('form').submit(function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$.mobile.changePage('#front');
return false;
});
});
$(document).on('pageinit', '#front', function() {
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
});
</script>
</head>
<body>
<!-- ======================== -->
<div data-role="page" id="review" data-theme="a">
<div data-role="header">
<h1>Review</h1>
</div>
<p>
Review content
</p>
<div data-role="content" data-theme="a">
<form>
<label for="first_slider">First:</label>
<input type="range" id="first_slider" value="60" min="0" max="100" />
<label for="second_slider">Second:</label>
<input type="range" id="second_slider" value="60" min="0" max="100" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
<!-- ======================== -->
<div data-role="page" id="front" data-theme="a">
<div data-role="header">
<h1>Front</h1>
</div>
<div data-role="content" data-theme="a">
<p>
Front content
</p>
<p id='first_count'></p>
<p id='second_count'></p>
<p>
Main
</p>
</div>
</div>
</body>
</html>
This seems to work the first time and the changed setting would show on the 'front' page, but not on subsequent page calls. I tried other JQM page events than 'pageinit' but can't get this to work.
I played around with your example and got it working. I used this info from the docu
Form buttons
For ease of styling, the framework automatically converts any button
or input element with a type of submit, reset, or button into a custom
styled button — there is no need to add the data-role="button"
attribute. However, if needed, you can directly call the button plugin
on any selector, just like any jQuery plugin:
$('[type="submit"]').button();
which results in this script
<script>
$('[type="submit"]').bind( "click", function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
$.mobile.changePage('#front');
return false;
});
</script>
complete corrected version of your example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<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="review" data-theme="a">
<div data-role="header">
<h1>Review</h1>
</div>
<p>
Review content
</p>
<div data-role="content" data-theme="a">
<form>
<label for="first_slider">First:</label>
<input type="range" id="first_slider" value="60" min="0" max="100" />
<label for="second_slider">Second:</label>
<input type="range" id="second_slider" value="60" min="0" max="100" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
<!-- ======================== -->
<div data-role="page" id="front" data-theme="a">
<div data-role="header">
<h1>Front</h1>
</div>
<div data-role="content" data-theme="a">
<p>
Front content
</p>
<p id='first_count'></p>
<p id='second_count'></p>
<p>
Main
</p>
</div>
<script>
$(document).bind('pageinit');
</script>
</div>
<script>
$('[type="submit"]').bind( "click", function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
$.mobile.changePage('#front');
return false;
});
</script>
</body>
</html>
screenshot
When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- standard Jquery/jQuery Mobile Libraries -->
<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>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline"></div>
<div class="ui-body ui-body-c">
<div data-role="content">
click to view HTML
<pre>
<span id="HTMLOut">
my HTML output goes here...
</span>
</pre>
</div>
</div>
<div id='groupA' class='preGroups'>
<div id='placeholder' ></div>
</div>
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-b"><button type="submit" class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</fieldset>
<div id='template'>
<div data-role="fieldcontain">
<input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
</div>
</div>
</div>
<style>
#template, #HTMLOut, #XMLOut{
display:none;
}
</style>
<script>
counter = 1;
$(document).ready(function() {
/* Add a listeners to Add Part */
$('.addPart').click(function() {
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
counter++;
myClone.appendTo("#placeholder").trigger( "create" );
// myClone.appendTo("#placeholder").page(); does not work in this version?
return false;
});
// Toggle Show/Hide HTML
$('.preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
</script>
I think the counter is in the wrong place. However this does not make the example any more functional.
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();
counter++;
I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.
AJAX might make it slightly cleaner but here is a start:
$(document).ready(function(){
$("div").live("pageshow", function () {
counter = 0;
$(".addPart").click(function() {
counter++;
$("#placeholder").append('<div id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
$("#template-"+counter).trigger("create");
return false;
});
});
});
</script>