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');
}
});
Related
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>
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>
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
Ive looked everywhere for this. How can a link specify the title of a tab and url to load?
Something like:
Create new tab dynamically
And how can I close the tab?
The closest I found is http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html but id prefer to use jquery
Thanks
UPDATE
I found jeasyui and looks really simple but Im having some problems. heres my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%; overflow: hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="jeasyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function open1(title,plugin){
if ($('#tt').tabs('exists',title)){
$('#tt').tabs('select', title);
} else {
$('#tt').tabs('add',{
title:title,
href:plugin,
closable:true,
extractor:function(data){
var tmp = $('<div></div>').html(data);
data = tmp.find('#content').html();
tmp.remove();
return data;
}
});
}
}
</script>
</head>
<body class="easyui-layout" style="text-align:left">
<div region="north" border="false" style="background:#666;text-align:center">
<div id="header-inner">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td rowspan="2" style="width:20px;">
</td>
<td style="height:52px;">
<div style="color:#fff;font-size:22px;font-weight:bold;">
TEST
</div>
</td>
<td style="padding-right:5px;text-align:right;vertical-align:bottom;">
</td>
</tr>
</table>
</div>
</div>
<div region="west" border="false" split="true" title="Menu" style="width:250px;padding:5px;">
<ul class="easyui-tree">
<li iconCls="icon-base"><span>Base</span><ul>
<li iconCls="icon-gears">test</li>
<li iconCls="icon-gears">test1</li>
<li iconCls="icon-gears">test2</li>
<li iconCls="icon-gears">test3</li>
</ul>
</div>
<div region="east" border="false" split="true" title="Live " style="width:250px;padding:5px;">
<h1>Hello</h1>
</div>
<div region="center" border="false">
<div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
<div title="Welcome" href="dashbord.php"></div>
</div>
</div>
</body>
</html>
It adds a new tab with a title but it doesn't load the URL(demo.php)
Use jQuery UI !!!
http://jqueryui.com/demos/tabs/#manipulation
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>