Uize.Collection.Dynamic - delete not working

[Jason Nelson]

Greetings!

First and foremost, I'm really enjoying UIZE and have made several
successful implementations into the Montana Department of Corrections
web application OMIS (Offender Management Information System).

We've used the UIZE framework to publish OMIS 2.0, which includes the
customization of an Icon bar. In order to accomplish this, I would
love to use the Uize.Collection.Dynamic widget to let users build
their icon bar. It's seriously the perfect tool for the job!

However, I can't seem to get the delete to work when using:

var page = window.page = new Uize.Widget.Page;

It works great when I use the example page. I've researched the issue
and debugged it some, and think it's somewhere in the confirm.dialog
js. When doing some more research I stumbled across this group and
figured it would be worth a shot to just ask yah!

Any assistance would be greatly appreciated by me, and several hundred
web app users!

Jason

[Ben Ilegbodu]

Hi Jason,

Glad to hear you're enjoying using Uize! Can you provide a snippet of relevant code?  I doubt the issue is with the line you showed...

Ben Ilegbodu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit WardTog - Hometown Pride T-Shirts, Mugs, and more!
http://www.wardtog.com/
http://twitter.com/wardtog

God bless you!

Jason

--
UIZE JavaScript Framework...

...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908

UIZE JavaScript Framework Google Group...

...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com

[Ben Ilegbodu]

No problem, Jason.  I'll do my best to try and help.

What exactly happens when you try to delete?  Is it a JavaScript error? You may want to also consider launching the DELVE bookmarklet on your page to see if your widget hierarchy is properly set up and if your events are firing properly.

As you mentioned, the JS code is the same except for Uize.OmisIconBarImages() and I'm assuming you have different markup for the dynamic collection, so the issue must be in one of those to areas.  If there was a page that I could hit to see it in action, it should be pretty easy to diagnose the issue, but I imagine that might be difficult.

If you can include what's inside Uize.OmisIconBarImages() that might be a start, but I imagine the issue is with the markup itself.  If you can't provide a link, maybe you can provide the rendered HTML source?

Ben Ilegbodu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit WardTog - Hometown Pride T-Shirts, Mugs, and more!
http://www.wardtog.com/
http://twitter.com/wardtog

God bless you!

On Fri, Dec 2, 2011 at 12:18 PM, Jason Nelson <jasonne...@gmail.com> wrote:

Ben,

Thanks for the response!

Here's the code in our jsp that is not working currently...

Uize.module ({
 required:[

   'Uize.Widget.Page',
   'Uize.Widget.Collection.Dynamic',
   'Uize.Widget.CollectionItem',
   'Uize.Templates.Collection',
   'Uize.Templates.CollectionItem',
   'Uize.OmisIconBarImages'
 ],
 builder:function () {
   /*** create the example page widget ***/

    var page = window.page = new Uize.Widget.Page;

   /*** add the Uize.Widget.Bar.Slider child widget ***/
     var collection = page.addChild (
       'collection',
       Uize.Widget.Collection.Dynamic,
       {
         built:false,
         html:Uize.Templates.Collection,
         itemWidgetClass:Uize.Widget.CollectionItem,
         itemWidgetProperties:{
           html:Uize.Templates.CollectionItem,
           cssClassBase:'collectionItem',
           cssClassActive:'collectionItemActive',
           cssClassOver:'collectionItemOver',
           previewClickAction:'Select'
         },
         dragToReorder:true,
         makeNewlyAddedSelected:false,
         localized:{
           draggingToReorderSingular:'Moving one item.',
           draggingToReorderPlural:'Moving {totalItems} items.',
           removeItemConfirmation:'Are you sure you would like to
remove this image?',
           removeItemsConfirmation:'Are you sure you would like to
remove the {0} selected images?',
           removeItemConfirmationTitle:'Remove Image?',
           removeItemsConfirmationTitle:'Remove Images?'
         }
       }
     );

   /*** wire up the page widget ***/
     page.wireUi ();

   /*** add initial items ***/
     var
       items = [],
       photos = Uize.OmisIconBarImages()
     ;
     for (var photoNo = -1, photosLength = photos.length; ++photoNo <
photosLength;) {
       var photo = photos [photoNo];
       items.push ({
         title:photo.title,
         previewUrl:photo.image.replace ('max_dim=500','max_dim=105')
       })
     }
     collection.add (items);
 }
});

The only thing I really changed there was Uize.SampleImages () to
Uize.OmisIconBarImages ()

The delete will not work with the above code set...

I can get it to work in a play folder using the sample page
below......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Dynamic Collection | JavaScript Examples | UIZE JavaScript
Framework</title>
 <meta name="keywords" content="featured drag-and-drop ipad touch
widget Uize.Widget.Collection.Dynamic"/>
 <meta name="description" content="See an example of a dynamic grid
of images, where you can select one or more, drag-and-drop to
rearrange, remove, select all, clear selection, etc."/>
 <link rel="alternate" type="application/rss+xml" title="UIZE
JavaScript Framework - Latest News" href="http://www.uize.com/latest-
news.rss"/>
 <link rel="stylesheet" href="css/page.css"/>
 <link rel="stylesheet" href="css/page.example.css"/>
 <link rel="stylesheet" href="css/widget.collection.css"/>
 <link rel="stylesheet" href="css/widget.collectionitem.css"/>
 <link rel="stylesheet" href="css/widget.dialog.css"/>
 <link rel="stylesheet" href="css/widget.dialog.confirm.css"/>
</head>

<body>

<script type="text/javascript" src="js/Uize.js"></script>

<h1 class="document-title">
 <a id="page-homeLink" href="../index.html" title="UIZE JavaScript
Framework home"></a>
 <a href="../javascript-examples.html" class="breadcrumb
breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
 Dynamic Collection
 <div id="page-actions" class="pageActions">
   <a href="source-code/collection-dynamic.html"
class="buttonLink">SOURCE</a>
 </div>
</h1>

<div class="main">
 <!-- explanation copy -->

 <div class="explanation">
   <p>In this example, an instance of the <a href="../reference/
Uize.Widget.Collection.Dynamic.html"><code>Uize.Widget.Collection.Dynamic</
code></a> widget class is being used to wire up an editable grid of
photos. You can select items in the grid by clicking on them. You can
make a non-contiguous selection by ctrl-clicking on items. You can
make a range selection by clicking on one item and then shift-clicking
on another. Use the "<b>SELECT NONE</b>" button above the grid to
clear a selection, or use the "<b>SELECT ALL</b>" button to select all
the items. With some items selected, click the "<b>REMOVE</b>" button
to remove the selected items. Also with a selection, click-and-drag to
reposition the selected items within the collection.</p>

   <p>Each item in the grid utilizes the <a href="../reference/
Uize.Widget.CollectionItem.html"><code>Uize.Widget.CollectionItem</
code></a> widget class. This limited utilization of the
<code>Uize.Widget.Collection.Dynamic</code> class is not connected up
to an application, so there are no consequences to reordering or
removing items. To restore the grid contents, just <a href="collection-
dynamic.html">reload the page</a>.</p>
 </div>

 <!-- shell for dynamically generated photo grid -->

 <div id="page_collection-shell"></div>
 <div style="clear:left;"></div>
</div>

<!-- JavaScript code to make the dynamic collection "come alive" -->

<script type="text/javascript">

Uize.module ({
 required:[
   'UizeDotCom.Page.Example.library',
   'UizeDotCom.Page.Example',
   'Uize.Widget.Collection.Dynamic',
   'Uize.Widget.CollectionItem',
   'Uize.Templates.Collection',
   'Uize.Templates.CollectionItem',
   'Uize.OmisIconBarImages'
 ],
 builder:function () {
   /*** create the example page widget ***/
     var page = window.page = new UizeDotCom.Page.Example;

   /*** add the Uize.Widget.Bar.Slider child widget ***/
     var collection = page.addChild (
       'collection',
       Uize.Widget.Collection.Dynamic,
       {
         built:false,
         html:Uize.Templates.Collection,
         itemWidgetClass:Uize.Widget.CollectionItem,
         itemWidgetProperties:{
           html:Uize.Templates.CollectionItem,
           cssClassBase:'collectionItem',
           cssClassActive:'collectionItemActive',
           cssClassOver:'collectionItemOver',
           previewClickAction:'Select'
         },
         dragToReorder:true,
         makeNewlyAddedSelected:false,
         localized:{
           draggingToReorderSingular:'Moving one item.',
           draggingToReorderPlural:'Moving {totalItems} items.',
           removeItemConfirmation:'Are you sure you would like to
remove this image?',
           removeItemsConfirmation:'Are you sure you would like to
remove the {0} selected images?',
           removeItemConfirmationTitle:'Remove Image?',
           removeItemsConfirmationTitle:'Remove Images?'
         }
       }
     );

   /*** wire up the page widget ***/
     page.wireUi ();

   /*** add initial items ***/
     var
       items = [],
       photos = Uize.OmisIconBarImages()
     ;
     for (var photoNo = -1, photosLength = photos.length; ++photoNo <
photosLength;) {
       var photo = photos [photoNo];
       items.push ({
         title:photo.title,
         previewUrl:photo.image.replace ('max_dim=500','max_dim=105')
       })
     }
     collection.add (items);
 }
});

</script>

</body>
</html>

[Jason Nelson]

Ben,

Thanks for the response!

Here's the code in our jsp that is not working currently...

Uize.module ({
required:[

'Uize.Widget.Page',
'Uize.Widget.Collection.Dynamic',
'Uize.Widget.CollectionItem',
'Uize.Templates.Collection',
'Uize.Templates.CollectionItem',
'Uize.OmisIconBarImages'
],
builder:function () {
/*** create the example page widget ***/

var page = window.page = new Uize.Widget.Page;

/*** add the Uize.Widget.Bar.Slider child widget ***/

[Jason Nelson]

I don't think I was very clear here :)

When I just set up a folder on my desktop that contains the UIZE
example framework and a test.html page that uses OmisIconBarImages()
the delete functions perfectly :)

When I actually import the functionality (No changes except changing
from widget.page.example to widget.page) into our web app, the delete
functions do not work.

Here's the markup for the OmisIconBarImages()

/*

UIZE Web Site 2011-02-20

http:/www.uize.com/reference/UizeDotCom.TestDataPhotos.html
Available under MIT License or GNU General Public License -- http:/
www.uize.com/license.html
*/

Uize.module(

{name:'Uize.OmisIconBarImages',
builder:function(){var _a;
return function(_b){if(_a&& !_b)
return _a;
var _c=[
{title:'Offender Search',
category:'Profile',
image:'../images/offenderSearch.png',
description:'Offender Search',
rating:1},

{title:'Search Results',
category:'Profile',
image:'../images/offenderSearchResults.png',
description:'',
rating:1},

{title:'Profile',
category:'Profile',
image:'../images/offenderProfile.png',
description:'',
rating:1},

{title:'Address',
category:'Profile',
image:'../images/addressProfile.png',
description:'',
rating:1},

{title:'Alerts',
category:'Profile',
image:'../images/genericAlert.png',
description:'',
rating:1},

{title:'Risk Assessments',
category:'Profile',
image:'../images/riskAssessmentProfile.png',
description:'',
rating:1},

{title:'Basic Info',
category:'Profile',
image:'../images/basicInfoProfile.png',
description:'',
rating:1},

{title:'Birth Dates',
category:'Profile',
image:'../images/birthDatesProfile.png',
description:'',
rating:1},

{title:'Case Plan',
category:'Profile',
image:'../images/casePlan.png',
description:'',
rating:1},

{title:'Cautions',
category:'Profile',
image:'../images/genericCaution.png',
description:'',
rating:1},

{title:'Chonological Notes',
category:'Profile',
image:'../images/chronologicalNotes.png',
description:'',
rating:1},

{title:'Commit Status',
category:'Profile',
image:'../images/commitStatusProfile.png',
description:'',
rating:1},

{title:'Correctional Status',
category:'Profile',
image:'../images/correctionalStatusProfile.png',
description:'',
rating:1},

{title:'Court Case(s)',
category:'Profile',
image:'../images/courtCaseProfile.png',
description:'',
rating:1},

{title:'Current Offense(s)',
category:'Profile',
image:'../images/currentOffensesProfile.png',
description:'',
rating:1},

{title:'DNA',
category:'Profile',
image:'../images/dnaProfile.png',
description:'',
rating:1},

{title:'Education',
category:'Profile',
image:'../images/educationProfile.png',
description:'',
rating:1},

{title:'Employment',
category:'Profile',
image:'../images/employmentProfile.png',
description:'',
rating:1},

{title:'Family',
category:'Profile',
image:'../images/familyProfile.png',
description:'',
rating:1},

{title:'Gang',
category:'Profile',
image:'../images/gangProfile.png',
description:'',
rating:1},

{title:'Location',
category:'Profile',
image:'../images/locationProfile.png',
description:'',
rating:1},

{title:'Military',
category:'Profile',
image:'../images/offenderMilitary.png',
description:'',
rating:1},

{title:'Names (AKA\'s)',
category:'Profile',
image:'../images/nameProfile.png',
description:'',
rating:1},

{title:'Numbers',
category:'Profile',
image:'../images/numbersProfile.png',
description:'',
rating:1},

{title:'Officers',
category:'Profile',
image:'../images/officerProfile.png',
description:'',
rating:1},

{title:'Other Photos',
category:'Profile',
image:'../images/otherPhotosProfile.png',
description:'',
rating:1},

{title:'Registered Victims',
category:'Profile',
image:'../images/registeredVictimsProfile.png',
description:'',
rating:1},

{title:'Scars and Marks',
category:'Profile',
image:'../images/scarsMarksProfile.png',
description:'',
rating:1},

{title:'Substance Tests',
category:'Profile',
image:'../images/substanceTestProfile.png',
description:'',
rating:1},

{title:'Tier Designation',
category:'Profile',
image:'../images/tierDesignationProfile.png',
description:'',
rating:1},

{title:'Vehicles',
category:'Profile',
image:'../images/vehicleProfile.png',
description:'',
rating:1}

];

return _b?_c:(_a=_c);};}});

I'll send some pictures to you via e-mail.

[Jason Nelson]

here's the bare bones of the screen source.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="/OMIS/jsp/css/page.css"/>
<link rel="stylesheet" href="/OMIS/jsp/css/page.example.css"/>
<link rel="stylesheet" href="/OMIS/jsp/css/widget.collection.css"/>
<link rel="stylesheet" href="/OMIS/jsp/css/widget.dialog.css"/>
<link rel="stylesheet" href="/OMIS/jsp/css/
widget.dialog.confirm.css"/>

<script type="text/javascript" src="/OMIS/jsp/uizeCore/Uize.js"></
script>

<script type="text/javascript" src="/OMIS/jsp/uizeCore/
Uize.OmisIconBarImages.js"></script>

<style type="text/css">

body {
background:#728088;
margin:48px 0 0 0;
_margin-top:0; /* hack for IE6, because the title isn't fixed
positioned for this browser */
}


.collectionItem {
display:block;
position:relative;
width:auto;
height:auto;
font-size:11px;
margin:0 10px 12px 0;
padding:2px 8px 15px 8px;
background:#afbbb8;
float:left;
overflow:hidden;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
.collectionItem a {
text-decoration:none;
border:none;
}
.collectionItem .collectionItemActions {
text-align:right;
}
.collectionItem .collectionItemPreview {
position:relative;
}
.collectionItem .collectionItemPreview .collectionItemPreviewLink {
position:relative;
display:block;
top:1px;
width:auto;
height:auto;
}

.collectionItemOver {
background:#b6c4bf;
}
.collectionItemActive {
background:#fff;
}

.collectionItem .collectionItemPreview .collectionItemPreviewLink {

margin:2px;
border:none;
width:145px;
height:autopx;
}

.collectionItemPreviewImage {

margin:2px;
width:24px;
height:24px;
border:none;

}

/*** info strip ***/
.collectionItem .collectionItemInfo {
padding:4px 0 2px 0;
white-space:nowrap;
}

/*** select button ***/
.collectionItem .collectionItemInfo .collectionItemSelect {
display:block;
position:absolute;
left:8px;
bottom:3px;
border:1px solid #fff;
border-color:#788 #cdd #cdd #788;
width:14px;
height:14px;
background:#afbbb8;
}
.collectionItem .collectionItemInfo .collectionItemSelect .collectionItemSelectCheck
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:url(../images/check-mark.png) no-repeat center center;
opacity:.01;
filter:alpha(opacity=1);
}
.collectionItem .collectionItemInfo .collectionItemSelectOver .collectionItemSelectCheck
{
opacity:.5;
filter:alpha(opacity=50);
}
.collectionItem .collectionItemInfo .collectionItemSelectActive .collectionItemSelectCheck
{
opacity:1;
filter:alpha(opacity=100);
}

.collectionItem .collectionItemInfo .collectionItemInfoTitle {
position:absolute;
font-size:10px;
color:#000;
left:28px;
bottom:4px;
width:90px;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>

<!-- shell for dynamically generated photo grid -->

<div id="page_collection-shell"></div>
<div style="clear:left;"></div>

<!-- JavaScript code to make the dynamic collection "come alive" -->

<script type="text/javascript">

Uize.module ({
required:[

</script>

</body>
</html>