Unitegallery not working with repeat control - xpages

I would like to use Unitegallery carrousel with some pictures who's urls are in a view. I tried the following :
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/carousel/ug-theme-carousel.js'></script>
<xp:this.data>
<xp:dominoView var="view4" databaseName="pictures.nsf"
viewName="pictures3" keys="demo">
</xp:dominoView>
</xp:this.data>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div id="gallery" style="display:none;">
<xp:repeat id="repeat6" rows="30" var="pictureData" value="#{view4}">
<xp:text escape="false" id="computedField11">
<xp:this.value><![CDATA[#{javascript:var thisPicture= pictureData.getColumnValue("bigPicture");
dezeAfbeeldingen ="<img src='"+thisPicture+"'data-image='"+thisPicture+"'style='height: 60px;width: 60px;'></img>";
return dezeAfbeeldingen;}]]></xp:this.value>
</xp:text>
</xp:repeat>
</div>
</xp:panel>
The result : nothing is displayed.
In Google chrome console I get an error : "Uncaught Error: The item should not be image type " and at the right side unitegallery.min.js:4"
The repeat is run , the pictures are found , but don't display and give this error.
When I replace the repeat with "hardcoded " image references everything seems to work....
EDIT
thisPicture is in fact the complete url of the picture so for example :
server/product/picture.nsf/O/unid/$File/picturename.jpg
HTML output :
<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/2Eabootstrap/xsptheme/xsp.css&2Eabootstrap/bootstrap311/css/bootstrap.min.css&#Da&2Eabootstrap/xpages300.css.css">
<script type="text/javascript">var dojoConfig = {locale: 'nl-nl'};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.9.4/dojo/dojo.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.nl-nl/#Iq.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/bootstrap311/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/xpages300.js"></script>
<link rel="stylesheet" type="text/css" href="/web/web.nsf/bootstrap.min.css">
<script type="text/javascript" src="/web/web.nsf/JQueryXSnippet"></script>
</head>
<body class="xsp tundra">
<form id="view:_id1" method="post" action="/web/web.nsf/test_unite_gallery2.xsp" enctype="multipart/form-data">
<script src="unitegallery/js/unitegallery.min.js" type="text/javascript"></script><link href="unitegallery/css/unite-gallery.css" rel="stylesheet" type="text/css"><script src="unitegallery/themes/carousel/ug-theme-carousel.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(
function() {
x$("gallery").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
});
}
);
</script>
<div id="gallery" style="display:none;"><div id="view:_id1:repeat6">
<span id="view:_id1:repeat6:0:computedField11"><img src='server/product/picture.nsf/O/unid/$File/picturename1.jpg'data-image='server/product/picture.nsf/O/unid/$File/picturename1.jpg'style='height: 60px;width: 60px;'></img>
</span>
<span id="view:_id1:repeat6:1:computedField11"><img src='server/product/picture.nsf/O/unid/$File/picturename2.jpg'data-image='server/product/picture.nsf/O/unid/$File/picturename2.jpg'style='height: 60px;width: 60px;'></img>
</span>
etc for other pictures
</div>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!e4h2ba0vbj!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
</body>
</html>
EDIT2
More details about the error I get in chrome console :
"Uncaught Error: The item should not be image type " and at the right side unitegallery.min.js:4"
when I click on the arrow I get more details :
fillItemsArray # unitegallery.min.js:4
runGallery # unitegallery.min.js:4
UniteGalleryMain.run # unitegallery.min.js:4
jQuery.fn.unitegallery # unitegallery.min.js:9
(anonymous function) # test_unite_gallery2.xsp:23
n.Callbacks.j # jquery-1.11.0.min.js:2
n.Callbacks.k.fireWith # jquery-1.11.0.min.js:2
n.extend.ready # jquery-1.11.0.min.js:2
K # jquery-1.11.0.min.js:2
Under resources there's a red 1 behind unitegallery.min.js , and gives the same error message for it (The item should not be image type).
EDIT3
When I have a look at the difference of the html generated by the repeat or the hard coded picture references I see that there's a double " (good) and a ' (bad) for the img and src tags. How can I change that ?

This should work:
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
$("#gallery").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div id="gallery" style="display:none;">
<xp:repeat rows="100" var="pictureData" value="#{view4}" removeRepeat="true">
<xp:image url="#{javascript:pictureData.getColumnValue("bigPicture")}">
<xp:this.attrs>
<xp:attr name="data-image"
value="#{javascript:pictureData.getColumnValue("bigPicture")}">
</xp:attr>
</xp:this.attrs>
</xp:image>
</xp:repeat>
</div>
</xp:panel>
You get the error "The item should not be image type" because unitegallery doesn't like the <div>s and <span>s within <div id="gallery"> ... </div>. There have to be only <img>s.
As you showed in your question your rendered html looks like this
<div id="gallery" style="display:none;">
<div id="view:_id1:repeat6">
<span id="view:_id1:repeat6:0:computedField11">
<img src='server/product/.../picturename1.jpg'
data-image='server/product/.../picturename1.jpg'>
</img>
</span>
...
</div>
</div>
You get rid of repeat-div with repeat's attribute removeRepeat="true".
You can avoid computed field's span with <xp:image ... />. Set the additional attribute "data-image" as an additional attribute.
Unitegallery doesn't like ids with ":" in it like they get rendered by XPages. That's why embed html <div id="gallery" to define the place for Unitegallery carrousel. As it's already client side html you can address it direct in your client side code with $("#gallery").
The code above renders the gallery-div with nested repeat to just
<div id="gallery" style="display:none;">
<img src='server/product/.../picturename1.jpg'
data-image='server/product/.../picturename1.jpg'>
</img>
...
</div>
and this works well for Unitegallery.

Related

Bootstrap Modal Windows in NodeJS

I am developing a dashboard website in NodeJS and MongoDB. In one of the page, I have to open an image in the modal window. Following is the code of that page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tor Modal Check</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link rel="stylesheet" href="css/responsive-tables.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/modernizr.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="js/responsive-tables.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<style type="text/css">
body .modal {
width: 650px;
margin-left: -325px;
}
</style>
</head>
<body>
<div class="mainwrapper">
<div class="rightpanel">
<ul class="commentlist">
<% tor.forEach(function(t){ %>
<li>
<img src="images/screenshot/<%= t.screenshot %>" alt="" style="width: 60px;" class="pull-left" />
<div class="comment-info">
<h4><%= t.url %></h4>
<p><strong>Comments: </strong><%= t.comments %></p>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#<%= t.modalid %>">Show Screenshot</button>
<!-- Modal -->
<div class="modal fade" id="<%= t.modalid %>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><%= t.url %></h4>
</div>
<div class="modal-body">
<img src="images/screenshot/<%= t.screenshot %>" height="100%" width="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<% }) %>
</ul>
</div>
</div>
</body>
The problem that I am facing is that not all "View Screenshot" are clickable. After digging a lot, I figure it's because of "rightpanel" div class.
/*** MAIN PANEL ***/
.rightpanel { margin-left: 260px; background: #f7f7f7; }
.rightpanel:after { clear: both; content: ''; display: block; }
If I remove margin-left: 260px; everything works as expected.
Any idea why this is happening and how to overcome it?
PS. This is not the complete code. Only the code that is significant for this question.
EDIT 1:
It works perfectly fine when i change margin-left: 260px to margin-left: 150px.
Bootstrap modals are already centered and have three sizes (300px for .modal-sm, 600px (default) and 900px for .modal-lg). But, if you need the width to be exactly 650px, you should set the width of .modal-dialog, not .modal. For example:
#media (min-width: 768px)
.modal-dialog {
width: 650px;
}

using angular-formly for form validations, the validation error messages are not shown when clicking submit

The issue is a validation messages appears and the textfield turns red when specific fields are clicked and blurred out. But when I click the submit button of the form without touching any of the input fields, no error messages are shown and none of the textfields turn red.
The correct way is, it has to show all the validation messages during the submission and all the textfields have to turn red.
The plunk for this is
http://plnkr.co/edit/fNUdp7Qdd0ysrd0eiPFT
<!DOCTYPE html>
<html>
<head>
<title>Angular-Formly</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<!-- form declaration-->
<body ng-app="app" ng-controller="MainController as vm">
<div class="container col-md-4 col-md-offset-4">
<form novalidate name="vm.form" ng-submit="vm.formsubmit()" >
<formly-form model="vm.user" fields="vm.fields" form="vm.form" >
</formly-form>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- Application Dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/api-check/7.2.4/api-check.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script data-require="angular-messages#1.4.8" data-semver="1.4.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly/6.11.0/formly.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/4.3.1/angular-formly-templates-bootstrap.js"></script>
<!-- Application Scripts -->
<script src="app.js"></script>
<script src="MainController.js"></script>
<script type="text/ng-template" id="custom-messages.html">
<div class="my-messages" ng-messages="field.$error" ng-style="{color: 'red'}" ng-if="form.$submitted">
<div class="my-message" ng-message"required">required Message</div>
</div>
</script>
<script type="text/ng-template" id="formly-messages.html">
<formly-transclude></formly-transclude>
<div class="my-messages" ng-messages="form.$error" ng-style="{color: 'red'}" ng-if="fc.$touched">
<div ng-repeat="(name, message) in ::options.validation.messages" ng-message="{{::name}}">{{message(fc.$viewValue, fc.$modelValue, this)}}
</div>
</div>
</script>
</body>
</html>
Can anyone kindly give me the solution for this? Thanks in advance
It seems the form won't allow you to submit it, because you've got required fields in there.
Therefore the form.$submitted value will never be true in your option setting formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression.

jQuery easyui layout centering - one region overlaying another

I am trying to centre a button inside a region by using jQuery easyui layout feature:
<!DOCTYPE html>
<html style="height: 90%;">
<head>
<meta charset="UTF-8">
<title>The Analytic Platform - Home Page</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style>
.middle {
height:30%;
}
.topandbelow {
height:40%;
}
</style>
</head>
<body style="height: 90%;">
<h2>The Analytic Platform</h2>
<p>Easy analytics for everyone!</p>
<div id="p" class="easyui-panel" title="Step 1: Load data for analysis" style="width:100%;height:100%;padding:10px;">
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
<div data-options="region:'west',split:false,border:true" style="width:40%;" title="Get data from Excel file">
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
<div data-options="region:'centre',split:false,border:true" style="width:100%;">
<a href="ExcelUpload.html" class="easyui-linkbutton" >Upload Excel file</a>
</div>
</div>
</div>
<div data-options="region:'east',split:false,border:true" style="width:40%;height:100%" title="Get data from database">
<div class="easyui-layout" data-options="fit:false" style="width:100%;height:100%">
<div data-options="region:'north',split:false,border:true" class="topandbelow"></div>
<div data-options="region:'centre',split:false,border:true" class="middle">
Define Database Connection
</div>
<div data-options="region:'south',split:false,border:true" class="topandbelow"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The "east" region is not displaying its nested "centre" region with the "north" region overlaying it.
What could be wrong in here?

jQuery slider not working in angularjs

My slider wont come up on first time navigation of the page. However when I hard refresh the page then it comes up and also if I replace the <div ng-view></div> code with the front.html page content then also the slider starts working. Let me know what I am doing wrong in angular as I believe it is something basic that I am missing.
Following is my layout code -
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>WEBSITE</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.flexslider.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="controllers/mainController.js"></script>
<script>
jQuery(document).ready(function($) {
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide"
});
});
});
</script>
</head>
<body ng-controller="mainController">
<header ng-include="'includes/header.html'"></header>
<nav ng-include="'includes/navmenu.html'"></nav>
<div ng-view></div>
<footer ng-include="'includes/footer.html'"></footer>
</body>
</html>
Following is my main controller code -
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/pages/front.html',
controller: 'frontCtrl'
})
});
In front.html I have slider code -
<div class="flexslider">
<ul class="slides">
<li>
<img src="assets/images/banner1.jpg">
</li>
<li>
<img src="assets/images/banner2.jpg">
</li>
<li>
<img src="assets/images/banner3.jpg">
</li>
<li>
<img src="assets/images/banner4.jpg">
</li>
</ul>
</div>
EDIT -
If I also write this code in the Firebug console then also slider starts working but not on page load -
jQuery('.flexslider').flexslider();
The event handler attached with jQuery(window).load will run when the page is fully loaded. However, ng-view hasn't loaded your view yet, which means <div class="flexslider"> doesn't exist.
Move the initialization into a directive:
myApp.directive('flexslider', function () {
return {
link: function (scope, element, attrs) {
element.flexslider({
animation: "slide"
});
}
}
});
And use like this:
<div class="flexslider" flexslider>
Demo: http://plnkr.co/edit/aVC9fnRhMkKw3xfpm4No?p=preview

Issue with jquery mobile dialog popup when dialog link is dynamically generated

I am using JQuery Mobile and setting up the dialog box link dynamically. Upon user clicking the link, the dialog opens in a separate page, NOT in a dialog box popup. I have the working code below. Can somebody please tell me what I am doing wrong?
Thanks in advance,
Vish
Here is a link to this sample on jsfiddle
http://jsfiddle.net/vishr/ekLWd/
When user clicks on Add Item, I dynamically change the text to Remove Item and when user clicks Remove Item, I put up a dialog box, which in this case opens in a separate page, not a dialog pop-up
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$("#del-item").live('click', function(){
$.mobile.changePage($('#del-dialog'), 'pop');
});
$("#add-item").live('click', function(){
$('#add-item .ui-btn-text').text('Remove Item');
$('.item').attr('id', 'del-item');
$('.item').attr('href', '#del-dialog');
$('.item').attr('data-rel', 'dialog');
});
$("#close-dialog").click(function(){
$('.ui-dialog').dialog('close');
});
});
})();
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="dialog-container" data-inline="true">
Add Item
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="dialog" role="dialog" id="del-dialog">
<div data-role="content">
<div style="text-align:center;"><strong>Remove Item?</strong></div>
<form id="myForm">
<div data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">Cancel</div>
<div class="ui-block-b">OK</div>
</fieldset>
</div>
</form>
</div>
</div>
</body>
</html>
If you want the dialog box to open in the same page then you should use SimpleDialog plugin available for jquery mobile.
Below is your code which i have customized using SimpleDialog plugin so that the dialog box appears in the same page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$("#del-item").live('click', function(){
//$.mobile.changePage($('#del-dialog'), 'pop');
$(this).simpledialog({
'prompt' : 'What do you say?',
'cleanOnClose': true,
'buttons' : {
'OK': {
click: function () {
$('#simplestringout').text($('#simplestring').attr('data-string'));
}
},
'Cancel': {
click: function () { console.log(this); },
icon: "delete",
theme: "c"
}
}
})
});
$("#add-item").live('click', function(){
$('#add-item .ui-btn-text').text('Remove Item');
$('.item').attr('id', 'del-item');
$('.item').attr('href', '#del-dialog');
$('.item').attr('data-rel', 'dialog');
});
$("#close-dialog").click(function(){
$('.ui-dialog').dialog('close');
});
});
})();
</script>
<title>Page Title</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="dialog-container" data-inline="true">
Add Item
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

Resources