I am working on a task assignment board and i have a problem on shifting existing tabs (accordion) between certain div's ... The scope variables list is getting updated properly and the code works fine when i am jQuery accordion .But when i use an angular js accordion ,
The shifting of the accordion tabs gets duplicated .
// main HTML content
<!DOCTYPE html>
<html ng-app="App">
<title>Task WhiteBoard</title>
<head>
<meta charset="utf-8" />
<meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" />
<link rel="stylesheet/less" type="text/css" href="css/main.less" />
<link href="css/zippy.css" rel="stylesheet">
<link href="css/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"
type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/less-1.1.6.min.js"></script>
<meta charset="utf-8" />
<title>Angular Drag and Drop</title>
</head>
<body ng-controller="dndCtrl" ng-cloak>
<h3>Task Whiteboard</h3>
<div class='list1' droppable value='1' >
<div class='header'>
Free Tasks
</div>
<div class="below-header">
</div>
<div ng-repeat="item in list1" data-index="{{$index}}" draggable>
<div class="zippy" zippy-title="{{item.name}}">
{{item.content.newLabel}} <br/>
{{item.content.desc}} <br/>
{{item.content.effort}} <br/>
{{item.content.owner}} <br/>
{{item.content.issues}} <br/>
{{item.content.comments}} <br/>
{{item.content.dependency}} <br/>
</div>
</div>
</div>
<div class='list2' droppable value='2'>
<div class='header'>
Claimed Tasks
</div>
<div class="below-header">
</div>
<div ng-repeat="item in list2" data-index="{{$index}}" draggable>
<div class="zippy" zippy-title="{{item.name}}">
{{item.content.newLabel}} <br/>
{{item.content.desc}} <br/>
{{item.content.effort}} <br/>
{{item.content.owner}} <br/>
{{item.content.issues}} <br/>
{{item.content.comments}} <br/>
{{item.content.dependency}} <br/>
</div>
</div>
</div>
<div class='list3' droppable value='3'>
<div class='header'>
Completed Tasks
</div>
<div class="below-header">
</div>
<div ng-repeat="item in list3" data-index="{{$index}}" draggable>
<div class="zippy" zippy-title="{{item.name}}">
{{item.content.newLabel}} <br/>
{{item.content.desc}} <br/>
{{item.content.effort}} <br/>
{{item.content.owner}} <br/>
{{item.content.issues}} <br/>
{{item.content.comments}} <br/>
{{item.content.dependency}} <br/>
</div>
</div>
</div>
<div style="clear:both;">
list 1 size : {{list1.length}} <br/>
list 2 size : {{list2.length}} <br/>
list 3 size : {{list3.length}} <br/>
</div>
</body>
</html>
// services.js
//This makes any element droppable
//Usage: <div droppable></div>
App.directive('droppable', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(function (value) {
//This makes an element Droppable
element.droppable({
drop: function (event, ui) {
var dragIndex =
angular.element(ui.draggable).data('index');
if(angular.element(ui.draggable).parent().hasClass('list1') &&
element.attr('value')=='2') {
scope.list2.push(scope.list1[dragIndex]);
scope.list1.splice(dragIndex, 1);
}
else if (angular.element(ui.draggable).parent().hasClass('list2') &&
element.attr('value')=='3') {
scope.list3.push(scope.list2[dragIndex]); scope.list2.splice(dragIndex, 1);
// alert("list2 size : "+scope.list2.length);
}
else if (angular.element(ui.draggable).parent().hasClass('list2') && element.attr('value')=='1') {
scope.list1.push(scope.list2[dragIndex]);
scope.list2.splice(dragIndex, 1);
// alert("list3 size : "+scope.list3.length);
}
scope.$apply();
}
});
});
}
};
});
//zippy directive to give an accordion feel
App.directive('zippy', function(){
return {
restrict: 'C',
// This HTML will replace the zippy directive.
replace: true,
transclude: true,
scope:{ title:'#zippyTitle' },
template:'<div>'+
'<div class="title">{{title}}</div>'+
'<div class="body" ng-transclude></div><hr/>'+
'</div>',
// The linking function will add behavior to the template
link: function(scope, element, attrs) {
// Title element
var title = angular.element(element.children()[0]),
// Opened / closed state
opened = true;
// Clicking on title should open/close the zippy
title.bind('click', toggle);
// Toggle the closed/opened state
function toggle() {
opened = !opened;
element.removeClass(opened ? 'closed' : 'opened');
element.addClass(opened ? 'opened' : 'closed');
}
// initialize the zippy
toggle();
}
}
});
// In controller .js
$scope.list1 = [
{
name: 'Intelligent Design',
content: {
newLabel : 'Create New Label',
desc : 'Add Description',
effort : 'Burned effort',
owner : 'Owner',
issues : 'Issues',
comments : 'Comments',
dependency : 'Dependency'
}
},
{
name: 'Good Artist\'s Copy',
content: {
newLabel : 'Create New Label',
desc : 'Add Description',
effort : 'Burned effort',
owner : 'Owner',
issues : 'Issues',
comments : 'Comments',
dependency : 'Dependency'
}
},
{
name: 'Task Creation',
content: {
newLabel : 'Create New Label',
desc : 'Add Description',
effort : 'Burned effort',
owner : 'Owner',
issues : 'Issues',
comments : 'Comments',
dependency : 'Dependency'
}
}]
$scope.list2 = [
{
name: 'Task4',
content: {
newLabel : 'Create New Label',
desc : 'Add Description',
effort : 'Burned effort',
owner : 'Owner',
issues : 'Issues',
comments : 'Comments',
dependency : 'Dependency'
}
}]
$scope.list3 = [];
Related
In my program we have Kendo Panel bar which shows menu, i want to open a dialog box/ popup window when user clicks on any menu child item.
<div>
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Single)
.Events(events => events
.Select(#<text> ReportController.onSelect </text>))
.Items(panelbar =>
{
panelbar.Add().Text("Test1")
.Expanded(true)
.Items(Test1=>
{
workers.Add().Text("Sample1");
workers.Add().Text("Sample2");
workers.Add().Text("Sample3");
});
panelbar.Add().Text("Test2")
.Items(Test2 =>
{
clients.Add().Text("Book1")
.Items(costings =>
{
costings.Add().Text("Page1");
costings.Add().Text("Page2");
costings.Add().Text("Page3");
});
clients.Add().Text("Book2");
});
panelbar.Add().Text("New Page").Enabled(false);
})
)
</div>
<script type="text/javascript">
$(document)
.ready(function() {
ReportController.init("#panelBar");
});
</script>
If user clicks on Sample1 here it should open a popup window. i am new with kendo controls, how can i achieve this?
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/panelbar/events">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<ul id="panelbar">
<li class="k-state-active">
Metallica - Master of Puppets 1986
<ul>
<li>Battery</li>
<li>Master of Puppets</li>
<li>The Thing That Should Not Be</li>
<li>Welcome Home (Sanitarium)</li>
<li>Disposable Heroes</li>
<li>Leper Messiah</li>
<li>Orion (Instrumental)</li>
<li>Damage, Inc.</li>
</ul>
</li>
<li>
Iron Maiden - Brave New World 2000
<ul>
<li>The Wicker Man</li>
<li>Ghost Of The Navigator</li>
<li>Brave New World</li>
<li>Blood Brothers</li>
<li>The Mercenary</li>
<li>Dream Of Mirrors</li>
<li>The Fallen Angel</li>
<li>The Nomad</li>
<li>Out Of The Silent Planet</li>
<li>The Thin Line Between Love And Hate</li>
</ul>
</li>
<li>
Empty Item
</li>
<li>
Ajax Item
<div></div>
</li>
<li>
Error Item
<div></div>
</li>
</ul>
</div>
<div id="console" class="box" style="display:none">
<h4>Console log</h4>
<div class="console"></div>
</div>
</div>
<script>
$(function () {
$("#console").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
});
function onSelect(e) {
var theDialog = $("#console").dialog("open");
theDialog.dialog("open");
kendoConsole.log("Select: " + $(e.item).find("> .k-link").text());
}
function onExpand(e) {
kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text());
}
function onCollapse(e) {
kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text());
}
function onActivate(e) {
kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text());
}
function onContentLoad(e) {
kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() +
"</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
}
function onError(e) {
kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
}
$("#panelbar").kendoPanelBar({
expandMode: "single",
select: onSelect,
expand: onExpand,
collapse: onCollapse,
activate: onActivate,
contentLoad: onContentLoad,
error: onError,
contentUrls: [, , , "../content/web/panelbar/ajax/ajaxContent1.html", "error.html"]
});
</script>
</body>
</html>
In above example, you can observe that in OnSelect Event , i have opened a Div as an Dialog(Model), for which i have intialised that in its above function.
Hope it helps.. !!
I'm currently working on a ASP.NET MVC project. The sites of the web application are created with Bootstrap. Later I added some AngularJS script to be able to translate the page into different languages. This works fine for all the pages, but not so if a partial view is loaded from a page.
So, for example I have a page to search for rollout objects by name or host name. On the page all the angular expressions in curly braces are evaluated properly and are replaced with strings in several languages by using a translate script. Now if I filter the objects by one of the three attributes the partial view for that page is loaded showing the results of the search, but here are the angular expressions not evaluated and it just shows the expressions themselves.
Here is the page where it works properly:
#{
ViewBag.Title = "{{ 'ROLLOUT-OBJECT_MANAGEMENT.TITLE' | translate }}";
}
<!-- html -->
<div style="font-size: 20px; margin-top: 20px; margin-bottom: 20px;">
<div class="gray-background list-group-item" translate="{{'ROLLOUT-OBJECT_MANAGEMENT.TITLE'}}"></div>
</div>
<div class="list-group">
<div class="gray-background list-group-item">
<div class="row margin-bottom">
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.FIRST_NAME'}}"></h6>
</div>
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.SURNAME'}}"></h6>
</div>
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.HOST_NAME'}}"></h6>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iFirstName" name="iFirstName" placeholder="">
</div>
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iSurName" name="iSurName" placeholder="">
</div>
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iHostName" name="iHostName" placeholder="">
</div>
<div class="col-md-3">
<!-- getPartial() added to click through javascript-->
<button type="submit" class="btn btn-primary btn-block" id="iButton"><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.BUTTON_SEARCH'}}"></span><span class="white-color glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
</div>
<div class="list-group">
<div class="gray-background list-group-item">
<h5><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.RESULTS'}}"></span><span class="purple-color glyphicon glyphicon-globe"></span></h5>
</div>
<!-- referenced in getPartial() -->
<div class="gray-background list-group-item">
<div class="row">
<div class="col-md-12" id="partialViewContainer">
#{Html.RenderPartial("_RolloutObjectManagementResultsPartial");}
</div>
</div>
</div>
</div>
<!-- layout -->
#Styles.Render(
"~/content/chosen/chosen.css",
"~/content/chosen/prism.css",
"~/content/chosen/style.css",
"~/content/bootstrap.css",
"~/content/Site.css")
<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
<script>
//add functionality to button
$('#iButton').click(function () {
getPartial('0');
});
</script>
<script>
function previous() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
if (temp > 0) {
temp = --temp;
}
getPartial(temp);
}
function next() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
temp = ++temp;
getPartial(temp);
}
</script>
<script>
function getPartial(newPage) {
//get search values
var tempFirst = document.getElementById("iFirstName");
var tempSur = document.getElementById("iSurName");
var tempHost = document.getElementById("iHostName");
var firstResult = tempFirst.value;
var surResult = tempSur.value;
var hostResult = tempHost.value;
//ajax call
$.ajax({
url: "_RolloutObjectManagementResultsPartial",
type: "POST",
data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
dataType: "html",
error: function (xhr) {
//alert(xhr.responseText);//debug
},
success: function (result) {
$("#partialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
})
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
And here is the partial view where it doesn't work (important are the expressions in {{...}}:
<!-- Import needed namespaces -->
#using RolloutTool.BusinessLayer.Foundation
#using RolloutTool.Utility
<!-- Initializing needed variables -->
#{
List<RolloutObject> RolloutObjects = ViewContext.Controller.ViewBag.RolloutObjects;
List<Cluster> Clusters = ViewContext.Controller.ViewBag.Clusters;
string name = "";
int count = 0;
string rowID = "";
int page = 0;
if (ViewContext.Controller.ViewBag.Page != null)
{
page = ViewContext.Controller.ViewBag.Page;
}
}
<!-- html elements -->
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EMPLOYEE'}}"></h6></th>
<th style="width:20%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.WORK_STATION'}}"></h6></th>
<th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EDIT'}}"></h6></th>
<th class="text-center" style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.CLUSTER'}}"></h6></th>
<th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.ASSIGN'}}"></h6></th>
</tr>
</thead>
<tbody>
<!-- creating all RolloutObject Table rows -->
#foreach (RolloutObject ro in RolloutObjects)
{
<!-- generating rowID -->
rowID = "row" + Convert.ToString(count);
count++;
<!-- generating the full employee name -->
name = Functions.TryGetValue(ro.Employee.FirstName) + " " + Functions.TryGetValue(ro.Employee.SecondName) + " " + Functions.TryGetValue(ro.Employee.Name);
<tr id="#rowID">
<td>#name</td>
<td id="#Convert.ToString(rowID + "_hn")">#Convert.ToString(Functions.TryGetValue(ro.Hostname))</td>
<!-- generate link to right rolloutobjectedit -->
<td class="text-center"><span class="btn-pencil glyphicon glyphicon-pencil blue-color glyph-hov" onclick="location.href='#Url.Action("RolloutObjectEdit", "RolloutObject", new {hostName = ro.Hostname })'"></span></td>
<!-- generating the link for cluster addition and populating cluster dropdown -->
<td class="text-center">
<div class="row">
<div class="col-sm-12">
<select class="chosen-select no-margin" style="width:100%" id="#Convert.ToString(rowID + "_cl")" name="iCluster" data-placeholder="Cluster">
#if (ro.Cluster != null)
{
<option selected>#Convert.ToString(Functions.TryGetValue(ro.Cluster.Name))</option>
}
else
{
<option></option>
}
#foreach (Cluster cluster in Clusters)
{
<option>#Convert.ToString(Functions.TryGetValue(cluster.Name))</option>
}
</select>
</div>
</div>
</td>
<td class="text-center"><span class="btn-ok glyphicon glyphicon-ok green-color glyph-hov" onclick="callAjax('#rowID')" /></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="hidden" id="hPage" value="#Convert.ToString(page)" />
<nav>
<ul class="pager">
<li class="pull-left"><a class="btn-paging glyphicon glyphicon-arrow-left" onclick="previous()"></a></li>
<li class="pull-right"><a class="btn-paging glyphicon glyphicon-arrow-right" onclick="next()"></a></li>
</ul>
</nav>
</div>
</div>
<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script>
function callAjax(idRow) {
//get row values
var tempTD = document.getElementById(idRow + "_hn");
var tempSelect = document.getElementById(idRow + "_cl");
var tempHostName = tempTD.textContent;
var tempCluster = tempSelect.options[tempSelect.selectedIndex].text;
//ajax call
$.ajax({
url: "AddToCluster",
type: "POST",
data: { clusterName: tempCluster, hostName: tempHostName },
dataType: "html",
error: function (xhr) {
alert(xhr.responseText);
},
success: function (result) {
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
<script>
function previous() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
if (temp > 0) {
temp = --temp;
}
getPartial(temp);
}
function next() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
temp = ++temp;
getPartial(temp);
}
</script>
<script>
function getPartial(newPage) {
//get search values
var tempFirst = document.getElementById("iFirstName");
var tempSur = document.getElementById("iSurName");
var tempHost = document.getElementById("iHostName");
var firstResult = tempFirst.value;
var surResult = tempSur.value;
var hostResult = tempHost.value;
//ajax call
$.ajax({
url: "_RolloutObjectManagementResultsPartial",
type: "POST",
data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
dataType: "html",
error: function (xhr) {
alert(xhr.responseText);
},
success: function (result) {
$("#partialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
})
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
This is the _Layout.cshtml where the scripts are contained and loaded:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - {{ 'TITLE.PROGRAM' | translate }}</title>
#Styles.Render(
"~/Content/css",
"~/Content/flag-icon-css-master/assets/docs.css",
"~/Content/flag-icon-css-master/css/flag-icon.min.css",
"~/Content/Site.css")
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/angular-translate.js"></script>
<script src="~/Scripts/angular/angular-cookies.min.js"></script>
<script src="~/Scripts/angular/translate.js"></script>
<script src="~/Scripts/angular/angular-route.min.js"></script>
<script src="~/Scripts/angular/angular-translate-storage-cookie.min.js"></script>
<script src="~/Scripts/angular/angular-translate-storage-local.min.js"></script>
</head>
<body ng-controller="Ctrl">
<!-- Here is the html for the navigation bar etc. -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I am really not an expert on AngularJS as I only wanted to provide some cool translation feature, but I hope you guys have an idea why it doesn't work in the partial views.
Its just that you need to call the partial view using ng-include("'controller/action'"). Apostrophe(') is important while writing url.
Example
<div id="TestDiv" ng-include="templateUrl"></div>
and inside the angular controller
var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope, $http, $sce) {
//Initially
$scope.templateUrl = '/Home/DefaultPage';
// To dynamically change the URL.
$scope.NewProjFn = function () {
$scope.templateUrl = '/Home/ProjectPage';
};
});
It might well not at all be difficult for you to re-implement it but by using ng-include you also need not to make an ajax call. It do it all by itself which includes ajax call, compilation and display. But the functions like ng-click and other events will not work as its a one time compilation process.
I am working with the Social Share Plugin and ImageFilter Plugin. I have both set up and functioning. What I am wanting to do is have a picture that I select from my photo library or take with the camera be the one that is shared instead of the predefined image.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<!-- CORE -->
<script src='js/core/cordova-1.6.0.js'></script>
<script src='js/core/jQuery.js'></script>
<!-- PLUGINS -->
<script src='js/plugins/ImageFilter.js'></script>
<script src='js/core/social.js'></script>
<!-- OUR SCRIPTS -->
<script src='js/init.js'></script>
<script>
window.plugins.social.available(function(avail) {
if (avail) {
// Show social widgets
} else {
// Social not supported
}
});
</script>
</head>
<body onload="app.bodyLoad()">
<div id="header"><img src="images/header.png" width="100%"></div>
<div id="wrapper">
<div id="content">
<!-- BUTTONS -->
<div id="buttons">
<div class="btn" id="camera" onClick="app.useCamera();">use camera</div>
<div class="btn" id="roll" onClick="app.useRoll();">use library</div>
<div class="btn" id="share" onClick="window.plugins.social.share('', '', 'www/images/filters/stark.png');">Share</div>
</div>
<!-- END BUTTONS -->
<!-- IMAGE AREA -->
<div id="imageArea">
<!-- OUR IMAGE -->
<div class="photo"></div>
<!-- FILTERS -->
<div id="filters">
<div class="filter" id="none" onClick="filters.none(largeImage);">
<div class="filterIcon"><img src="images/filters/none.png" height="100%"></div>
<div class="filterTitle">none</div>
</div>
<div class="filter" id="sunnySide" onClick="filters.sunnySide(largeImage);">
<div class="filterIcon"><img src="images/filters/sunnySide.png" height="100%"></div>
<div class="filterTitle">sunnySide</div>
</div>
<div class="filter" id="worn" onClick="filters.worn(largeImage);">
<div class="filterIcon"><img src="images/filters/worn.png" height="100%"></div>
<div class="filterTitle">worn</div>
</div>
<div class="filter" id="vintage" onClick="filters.vintage(largeImage);">
<div class="filterIcon"><img src="images/filters/vintage.png" height="100%"></div>
<div class="filterTitle">vintage</div>
</div>
<div class="filter" id="stark" onClick="filters.stark(largeImage);">
<div class="filterIcon"><img src="images/filters/stark.png" height="100%"></div>
<div class="filterTitle">stark</div>
</div>
</div>
</div>
<!-- END IMAGE AREA -->
</div>
</div>
</body>
</html>
Here is the js file.
var largeImage;
var app = {
bodyLoad: function () {
document.addEventListener("deviceready", app.deviceReady, false);
},
deviceReady: function () {
app.init();
},
init: function () {
},
useCamera: function () {
navigator.camera.getPicture(app.onCameraSuccess, app.onCameraFail, {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
//allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 910,
targetHeight: 910,
saveToPhotoAlbum: false
});
},
useRoll: function () {
navigator.camera.getPicture(app.onCameraSuccess, app.onCameraFail, {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 910,
targetHeight: 910,
saveToPhotoAlbum: false
});
},
onCameraSuccess: function (imageURI) {
largeImage = imageURI;
$(".photo").html("<img src='" + imageURI + "'>");
$(".photo").show();
},
onCameraFail: function (msg) {
console.log("ERROR! -" + msg);
}
};
var filters = {
none: function (imageURI) {
plugins.ImageFilter.none(filters.rendered, {
image: imageURI,
save: 'false',
});
},
sunnySide: function (imageURI) {
plugins.ImageFilter.sunnySide(filters.rendered, {
image: imageURI,
save: 'false'
});
},
worn: function (imageURI) {
plugins.ImageFilter.worn(filters.rendered, {
image: imageURI,
save: 'false'
});
},
vintage: function (imageURI) {
plugins.ImageFilter.vintage(filters.rendered, {
image: imageURI,
save: 'false'
});
},
stark: function (imageURI) {
plugins.ImageFilter.stark(filters.rendered, {
image: imageURI,
save: 'false'
});
},
rendered: function (msg) {
$(".photo").html("<img src='" + msg + "'>");
}
}
I am struggling with what parameter I need to use to replace 'www/images/filters/stark.png' to get the image that is loaded in the (div class="photo") to be the image that is shared.
old issue, I know, but I just figured out what the problem is. It's a bug (or not implemented feature) of the social sharing pluging. Whilst it can share files with a path like this: /Users/blabla/../pic.jpg, it can't share pics from the file protocol: file:///Users/blabla/../pic.jpg.
The camera function of Phonegap uses the file protocol, hence the failure.
Now the good news: use this plugin, it's an extended version of the one you were using: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin (PhoneGap Build compatible).
I think you can solve this if you move var.largeImage inside the app namespace. Then you can change
<div class="btn" id="share" onClick="window.plugins.social.share('', '', 'www/images/filters/stark.png');">Share</div> to something like
<div class="btn" id="share" onClick="window.plugins.social.share('', '', app.largeImage);">Share</div>
You'll probably have to use this.largeImage in your JavaScript file.
I'm a newbie to JQuery and JQueryUI and I've run into a bit of a problem w/ the .button() and .buttonset() on my project.
When I follow the example on the JQueryUI page everything works fine. My page, however, is creating buttons as a function and after they are created the button text shows up but the button is not clickable.
Here is the source link: http://mdihosting.com/5/Projects/form/test1.html
After the append in the source below this - $('#epcf-wrap').buttonset(); - does not result in a clickable button.
I've also tried $('#epcf-wrap').buttonset('refresh');
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.selectmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script src="js/jquery.ui.selectmenu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/blitzer/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.ui.selectmenu.css" />
<script type="text/javascript">
$(document).ready(function(){
$('input:checkbox').button();
$.ajax({
type: "GET",
url: "xml/categories.xml",
dataType: "xml",
success: function(xml) {
var select = $('#vendorcat');
$(xml).find('Cat').each(function(){
var title = $(this).attr('name');
select.append("<option class='vendorcat' value='"+title+"'>"+title+"</option>");
$('#vendorcat').selectmenu();
});
}
});
$("#about").dialog({
resizable: true,
autoOpen:false,
modal: true,
width:400,
height:400,
buttons: {
'Continue': function() {
$(this).dialog('close');
alert('You clicked continue');
}, // end continue button
Cancel: function() {
$(this).dialog('close');
} //end cancel button
}//end buttons
});//end dialog
$('#results').hide();
$('#btnOpen').click(function(){
$('#about').dialog('open');
}); //end click handler
});
</script>
<script type="text/javascript"> //onchange1 - Build Category Dropdown
//Going for the single function length world record
//Open categories.xml and find the node based upon the passed variable catname - Category Name
//If the Category Name is equal to the argument passed build the variables, build the array, and output
function onchange1(catname){
$.ajax({
type: "GET",
url: "xml/categories.xml",
dataType: "xml",
success: function(xml) {
var table = $('<table>', {id:'opttable', align:'left'});
tr = $('<tr>').appendTo(table); // create TR and append to TABLE
td = $('<td>').appendTo(tr); // create TD and append to TR
// iterate all children of the current Category
$(xml).find('Cat[name="' + catname + '"]').children().each(function() {
d = $(this)
if (d.text() === 'TRUE') {
$('<input>', {
className: 'checkbox',
type: 'checkbox',
id: d.attr('id'),
name: d.attr('name'),
checked: 'checked'
}).appendTo(td);
}
else {
$('<input>', {
className: 'checkbox',
type: 'checkbox',
id: d.attr('id'),
name: d.attr('name')
}).appendTo(td);
}
// create LABEL with the id attribute of the current
// child of Cat and append to TD
$('<label>' + d.attr('name') + '</label>', { for:d.attr('id').toLowerCase() })
.appendTo(td);
$('<br />').appendTo(td); // create BR element and append to TD
});
$('#epcf-wrap').empty().append(table); // Append the table to its container
$('#epcf-wrap').buttonset();//This doesn't work
}
});
}
</script>
<script type="text/javascript"> //Form Submitted
function formsubmitted(){
var resultsArr = []
resultsArr += "<table><tr><td>";
resultsArr += "Name: " + $("input[name='name']").val();
resultsArr += "</td></tr><tr><td>";
resultsArr += "Email: " + $("input[name='email']").val();
resultsArr += "</td></tr></table>"
$('#results').empty().append(resultsArr).show();
$('#content').hide();
}
</script>
</head>
<style>
span.reference{
position:fixed;
right:5px;
top:5px;
font-size:10px;
text-shadow:1px 1px 1px #fff;
}
span.reference a{
color:#555;
text-decoration:none;
text-transform:uppercase;
}
span.reference a:hover{
color:#000;
}
h1{
color:#ccc;
font-size:36px;
text-shadow:1px 1px 1px #fff;
padding:20px;
}
</style>
<body>
<div>
<span class="reference">
Version popup could go here
<input type="button" id="btnOpen" value="Open">
</span>
</div>
<div id="content">
<h1>VRACC</h1>
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Vendor Details</legend>
<p>
<label for="vendorcat">Vendor Category</label>
<select id="vendorcat" name="vendorcat" onChange="onchange1((this).options[this.selectedIndex].value);">
</select>
<legend>Enterprise Processes</legend>
<input type="checkbox" id="check1" /><label for="check1">Some Checkbox</label>
<div id="epcf-wrap" class="epcf-wrap">
</div>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li>
Vendor Details
</li>
</ul>
</div>
</div>
</div>
</body>
You need to add a for attribute to the label tags that corresponds to the id of the input. For whatever reason, they way you are adding the for attribute doesn't seem to be working. And, remove the toLowerCase(). It won't work unless they match case.
Maybe you just need a space after for:
$('<label>' + d.attr('name') + '</label>', { for: d.attr('id') })
But, if it still doesn't work, try:
$('<label for="' + d.attr('id') + '">' + d.attr('name') + '</label>'
http://jsfiddle.net/CL9Tt/
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>