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.
Related
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.
Index.html
<div data-role="page" id="reviewsPage">
<div data-role="header">
<h1>Reviews</h1>
TWEET
</div>
<script type="text/javascript">
$(document).on("pageshow", "#reviewsPage", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("my.html", {
reloadPage: true, changeHash: true
});
});
});
</script>
</div>
my.html
<script type="text/javascript">
$(document).bind('pagebeforechange', function(event, data) {
$.ajax({
url: " searchresult.php",
success: function(data) {
alert(data);
var markup = "";
$.each(data, function(i, elem) {
var $template = $('<div><li><img class="ui-li-icon profile"><p class="from"></p><p class="tweet"></p></li></div>');
$template.find(".from").append(elem['a']);
markup += $template.html();
});
$("#tweet-list").append(markup).listview("refresh", true);
$.mobile.changePage($("#twitterPage"));
},
error: function(request, error) {
alert(error);
}
});
});
</script>
<div data-role="page" id="twitterPage">
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>Tweetsdd</p>
</li>
</ul>
</div>
</div>
Above code is used to change the page with dynamic data. If i click the link the my.html will not be populated with data. But if i run the my.html file directly it works. If i write two pages inside the same page it works. But i need to run this in separate pages. I have been searching answer for this question since yesterday. I am new to jquery.
Try this
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<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 language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$( document ).on( "mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("my.html", {
reloadPage : false,changeHash : true
});
});
});
</script>
</head>
<body>
<div data-role="page" id="reviewsPage">
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" data-ajax="false" >TWEET</a>
</div>
</div>
my.html
<div data-role="page" id="twitterPage">
<script type="text/javascript">
$(document).bind('pageshow', function(event, data){
alert("shdgs");
$.ajax({
url : " searchresult.php",
success : function(data) {
alert(data);
var markup = "";
$.each(data, function(i, elem) {
var $template = $('<div><li><img class="ui-li-icon profile"><p class="from"></p><p class="tweet"></p></li></div>');
$template.find(".from").append(elem['a']);
//$template.find(".tweet").append(result.text);
//$template.find(".profile").attr("src", result.profile_image_url);
markup += $template.html();
});
$("#tweet-list").append(markup).listview("refresh", true);
// Transition to the Twitter results page.
$.mobile.changePage($("#twitterPage"));
},
error : function(request, error) {
// This callback function will trigger on unsuccessful action
alert(error);
}
});
});
</script>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweetsdd
</p>
</li>
</ul>
</div>
</div>
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 = [];
I like to add autocomplete feature for my jquery mobile page on a text box such that when user enters it should show the results in listview format. The code below shows the results but not in the listview format. Can someone point out how to fix it. Thanks.
<!DOCTYPE HTML>
<html>
<head>
<title>Finder</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
input{text-transform:uppercase;}
</style>
<script>
$(document).ready(function() {
$( "#firstinputbox" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ziplocator.cloudfoundry.com/rest/startsWithCity/",
dataType: "json",
data: {
maxRows: 10,
startsWith: request.term
},
success: function(data) {
response( $.map( data.zipcodes, function( item ) {
var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text">' + item.zipcodeId + '</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';
$(listItem).appendTo("#suggestions");
return {
label: item.cityName + ", " +item.zipcodeId + ", " + item.state,
value: item.cityName
}
}));
}
});
},
minLength: 1,
open: function() {
},
close: function() {
$('ul li').remove();
//should attach the value to the text box
}
});
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="inputdialog">
<div data-role="header">
<h1>Enter Criteria here</h1>
</div>
<div data-role="content">
<input type="text" id="firstinputbox" placeholder="Enter here"/>
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
You need to call the listview() function on your content after inserting the new content:
$('#suggestions').listview();
See Elijah Manor's explanation for the details.
Try calling the listview refresh method in your ajax success function.
$('#suggestions').listview('refresh');
try this one
In <li> tag remove class..... class="ui-btn ui-btn-icon-right ui-li "
Then it shows results in list view formats
I have two pages: index.html and main.html
When i set the main.html page to be the default page of my app, the java script works, but when I set the index.html to be the main one, after the redirect, the javascript on the main.html just stops working.
here is the HTML of the two pages:
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxLinksEnabled = false;
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, null);
}
function onSuccess(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", null, gotMe, failFile);
}
// se o arquivo não existir
function failFile(error) {
$("#formLogin").show();
}
// se o arquivo existir
function gotMe(fileEntry) {
$.mobile.changePage("main.html", null, false, false);
}
</script>
</head>
<body onload="onLoad();">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="formLogin">
<form id="loginFrm">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputEmail">
</label>
<input id="textinputEmail" placeholder="email" value="" type="email" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputPassword">
</label>
<input id="textinputPassword" placeholder="senha" value="" type="password" />
</fieldset>
</div>
<input value="entrar" type="submit" />
</form>
</div>
</div>
<script>
var xml;
function gotFS(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.write(xml);
}
function fail(error) {
alert(error.code);
}
// ao fazer o login
$("form").submit(function() {
// chama função que valida usuário
ValidateUser();
return false;
});
// verifica se o usuário existe
function ValidateUser(email, password) {
$.ajax({
type: 'POST',
url: 'http://********/oauth.aspx',
data: "email=" + $("#textinputEmail").val() + "&password=" + $("#textinputPassword").val(),
success: function(data) {
// se o usuário existir
if (data != "false") {
xml = data;
// cria o arquivo xml se ainda não existir
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
// muda o usuário de página
$.mobile.changePage("main.html");
}
else {
alert("Dados inválidos. Tente novamente.");
}
}
});
}
</script>
</body>
</html>
main.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$(document).ready(function() {
alert("yesss");
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
</body>
</html>
jQuery Mobile pulls in remote pages via AJAX. When it does this, it only pulls in the first data-role="page" element it finds. This means that anything outside the data-role="page" element is discarded.
The best work-around is to put all of your app's JS into a custom.js file and include it in the head of every page, this way all the code for your site is always available (to do this you will need to use event delegation).
You can also put the JS for each page inside the data-role="page" element so it is grabbed by jQuery Mobile and not just discarded:
<div data-role="page" id="page1">
<script>
alert('hello');
</script>
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>