Currently the following code i have can work in an .aspx page.... but when i put the code into an .ascx usercontrol.... the jquery drag drop functionality does not work any more.
// let the gallery items be draggable
$('li', $gallery).draggable({
cancel: 'a.ui-icon', // clicking an icon won't initiate dragging
revert: 'invalid', // when not dropped, the item will revert back to its initial position
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
helper: 'clone',
cursor: 'move'
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: '#gallery > li',
activeClass: 'ui-state-highlight',
drop: function (ev, ui) {
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: '#trash li',
activeClass: 'custom-state-active',
drop: function (ev, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image">Recycle image</a>';
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $('ul', $trash).length ? $('ul', $trash) : $('<ul/>').appendTo($trash);
// image recycle function
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image">Delete image</a>';
function recycleImage($item) {
$item.fadeOut(function () {
$item.find('a.ui-icon-refresh').remove();
$item.css('width', '96px').append(trash_icon).find('img').css('height', '72px').end().appendTo($gallery).fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr('href');
var title = $link.siblings('img').attr('alt');
var $modal = $('img[src$="' + src + '"]');
Partial Class Test_Page
Inherits System.Web.UI.Page
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
Page.Theme = Profile.UserApplicationSettings.MyTheme2009
Page.ClientScript.RegisterClientScriptInclude("jQuery", "Net_Common/Net_Script/jQuery_ui/jquery-1.3.2.js")
Page.ClientScript.RegisterClientScriptInclude("uiCore", "Net_Common/Net_Script/jQuery_ui/ui/ui.core.js")
Page.ClientScript.RegisterClientScriptInclude("uiDraggable", "Net_Common/Net_Script/jQuery_ui/ui/ui.draggable.js")
Page.ClientScript.RegisterClientScriptInclude("uiDroppable", "Net_Common/Net_Script/jQuery_ui/ui/ui.droppable.js")
Page.ClientScript.RegisterClientScriptInclude("uiResizable", "Net_Common/Net_Script/jQuery_ui/ui/ui.resizable.js")
Page.ClientScript.RegisterClientScriptInclude("uiDialog", "Net_Common/Net_Script/jQuery_ui/ui/ui.dialog.js")
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
End Class
.ascx
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ListView_Transfer.ascx.vb"
Inherits="Portal_Custom_Controls_ListView_Transfer" %>
<div>
<ul id="gallery" runat="server">
<li>
<h5>
High Tatras</h5>
<%--<img src="/demos/droppable/images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" //>--%>
<a href="images/high_tatras.jpg" title="View larger image">
View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image"
>Delete image</a> </li>
<li>
<h5>
High Tatras 2</h5>
<%--<img src="/demos/droppable/images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" //>--%>
<a href="images/high_tatras2.jpg" title="View larger image">
View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image"
>Delete image</a> </li>
<li>
<h5>
High Tatras 3</h5>
<%--<img src="/demos/droppable/images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" //>--%>
<a href="images/high_tatras3.jpg" title="View larger image">
View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image"
>Delete image</a> </li>
<li>
<h5>
High Tatras 4</h5>
<%--<img src="/demos/droppable/images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" //>--%>
<a href="images/high_tatras4.jpg" title="View larger image">
View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image"
>Delete image</a> </li>
</ul>
<div id="trash">
<h4>
<span>Trash</span> Trash</h4>
</div>
</div>
.ascx.vb
Partial Class Portal_Custom_Controls_ListView_Transfer
Inherits System.Web.UI.UserControl
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Also, is it possible to use the asp.net listview control inside of the html <ul>? ( so as the be able to make use of asp.net's state management (viewstate) capabilities.)
leroylll
Member
131 Points
258 Posts
jQuery inside Usercontrol
Feb 08, 2010 12:56 PM|LINK
Hi all,
Currently the following code i have can work in an .aspx page.... but when i put the code into an .ascx usercontrol.... the jquery drag drop functionality does not work any more.
Please kindly assist.
.aspx file:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test_Page.aspx.vb" Inherits="Test_Page" %>
<%@ Register Assembly="DevExpress.Web.v9.3, Version=9.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxSplitter" TagPrefix="dx" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<style type="text/css">
#gallery
{
float: left;
width: 65%;
min-height: 12em;
}
* html #gallery
{
height: 12em;
}
/* IE6 */
.gallery.custom-state-active
{
background: #eee;
}
.gallery li
{
float: left;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
}
.gallery li h5
{
margin: 0 0 0.4em;
cursor: move;
}
.gallery li a
{
float: right;
}
.gallery li a.ui-icon-zoomin
{
float: left;
}
.gallery li img
{
width: 100%;
cursor: move;
}
#trash
{
float: right;
width: 32%;
min-height: 18em;
padding: 1%;
}
* html #trash
{
height: 18em;
}
/* IE6 */
#trash h4
{
line-height: 16px;
margin: 0 0 0.4em;
}
#trash h4 .ui-icon
{
float: left;
}
#trash .gallery h5
{
display: none;
}
</style>
<script type="text/javascript">
$(function () {
// there's the gallery and the trash
var $gallery = $('#gallery'), $trash = $('#trash');
// let the gallery items be draggable
$('li', $gallery).draggable({
cancel: 'a.ui-icon', // clicking an icon won't initiate dragging
revert: 'invalid', // when not dropped, the item will revert back to its initial position
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
helper: 'clone',
cursor: 'move'
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: '#gallery > li',
activeClass: 'ui-state-highlight',
drop: function (ev, ui) {
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: '#trash li',
activeClass: 'custom-state-active',
drop: function (ev, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image">Recycle image</a>';
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $('ul', $trash).length ? $('ul', $trash) : $('<ul/>').appendTo($trash);
$item.find('a.ui-icon-trash').remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function () {
$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
});
});
}
// image recycle function
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image">Delete image</a>';
function recycleImage($item) {
$item.fadeOut(function () {
$item.find('a.ui-icon-refresh').remove();
$item.css('width', '96px').append(trash_icon).find('img').css('height', '72px').end().appendTo($gallery).fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr('href');
var title = $link.siblings('img').attr('alt');
var $modal = $('img[src$="' + src + '"]');
if ($modal.length) {
$modal.dialog('open')
} else {
var img = $('<img alt="' + title + '" width="384" height="288" style="display:none;padding: 8px;" />')
.attr('src', src).appendTo('body');
setTimeout(function () {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$('ul.gallery > li').click(function (ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-trash')) {
deleteImage($item);
} else if ($target.is('a.ui-icon-zoomin')) {
viewLargerImage($target);
} else if ($target.is('a.ui-icon-refresh')) {
recycleImage($item);
}
return false;
});
});
</script>
<uclstViewTransf:iSolCCListViewTransf ID="listviewtransfer" runat="server" />
</form>
</body>
</html>
.aspx.vb
Partial Class Test_Page
Inherits System.Web.UI.Page
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
Page.Theme = Profile.UserApplicationSettings.MyTheme2009
Page.ClientScript.RegisterClientScriptInclude("jQuery", "Net_Common/Net_Script/jQuery_ui/jquery-1.3.2.js")
Page.ClientScript.RegisterClientScriptInclude("uiCore", "Net_Common/Net_Script/jQuery_ui/ui/ui.core.js")
Page.ClientScript.RegisterClientScriptInclude("uiDraggable", "Net_Common/Net_Script/jQuery_ui/ui/ui.draggable.js")
Page.ClientScript.RegisterClientScriptInclude("uiDroppable", "Net_Common/Net_Script/jQuery_ui/ui/ui.droppable.js")
Page.ClientScript.RegisterClientScriptInclude("uiResizable", "Net_Common/Net_Script/jQuery_ui/ui/ui.resizable.js")
Page.ClientScript.RegisterClientScriptInclude("uiDialog", "Net_Common/Net_Script/jQuery_ui/ui/ui.dialog.js")
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
End Class
.ascx
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ListView_Transfer.ascx.vb"
Inherits="Portal_Custom_Controls_ListView_Transfer" %>
<div>
<ul id="gallery" runat="server">
<li>
<h5>
High Tatras</h5>
<%--<img src="/demos/droppable/images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" //>--%>
<a href="images/high_tatras.jpg" title="View larger image">
View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image"
>Delete image</a> </li>
<li>
<h5>
High Tatras 2</h5>
<%--<img src="/demos/droppable/images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" //>--%>
<a href="images/high_tatras2.jpg" title="View larger image">
View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image"
>Delete image</a> </li>
<li>
<h5>
High Tatras 3</h5>
<%--<img src="/demos/droppable/images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" //>--%>
<a href="images/high_tatras3.jpg" title="View larger image">
View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image"
>Delete image</a> </li>
<li>
<h5>
High Tatras 4</h5>
<%--<img src="/demos/droppable/images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" //>--%>
<a href="images/high_tatras4.jpg" title="View larger image">
View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image"
>Delete image</a> </li>
</ul>
<div id="trash">
<h4>
<span>Trash</span> Trash</h4>
</div>
</div>
.ascx.vb
Partial Class Portal_Custom_Controls_ListView_Transfer
Inherits System.Web.UI.UserControl
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
End Class
alaa9jo
Star
11375 Points
2036 Posts
Re: jQuery inside Usercontrol
Feb 08, 2010 02:14 PM|LINK
The only possible problem that I can think of right now is that the paths are incorrect,I'm talking about these lines:
Page.ClientScript.RegisterClientScriptInclude("jQuery", "Net_Common/Net_Script/jQuery_ui/jquery-1.3.2.js") Page.ClientScript.RegisterClientScriptInclude("uiCore", "Net_Common/Net_Script/jQuery_ui/ui/ui.core.js") Page.ClientScript.RegisterClientScriptInclude("uiDraggable", "Net_Common/Net_Script/jQuery_ui/ui/ui.draggable.js") Page.ClientScript.RegisterClientScriptInclude("uiDroppable", "Net_Common/Net_Script/jQuery_ui/ui/ui.droppable.js") Page.ClientScript.RegisterClientScriptInclude("uiResizable", "Net_Common/Net_Script/jQuery_ui/ui/ui.resizable.js") Page.ClientScript.RegisterClientScriptInclude("uiDialog", "Net_Common/Net_Script/jQuery_ui/ui/ui.dialog.js")Can you try to provide the full path? like this:
Page.ClientScript.RegisterClientScriptInclude("jQuery", ResolveUrl("~/Net_Common/Net_Script/jQuery_ui/jquery-1.3.2.js")) Page.ClientScript.RegisterClientScriptInclude("uiCore", ResolveUrl("~/Net_Common/Net_Script/jQuery_ui/ui/ui.core.js")) Page.ClientScript.RegisterClientScriptInclude("uiDraggable", ResolveUrl("~/Net_Common/Net_Script/jQuery_ui/ui/ui.draggable.js")) Page.ClientScript.RegisterClientScriptInclude("uiDroppable", ResolveUrl("~/Net_Common/Net_Script/jQuery_ui/ui/ui.droppable.js")) Page.ClientScript.RegisterClientScriptInclude("uiResizable", ResolveUrl("~/Net_Common/Net_Script/jQuery_ui/ui/ui.resizable.js")) Page.ClientScript.RegisterClientScriptInclude("uiDialog", ResolveUrl("~/Net_Common/Net_Script/jQuery_ui/ui/ui.dialog.js"))Ala'a Alnajjar
----------------------------------------------------
My Webblog
leroylll
Member
131 Points
258 Posts
Re: jQuery inside Usercontrol
Feb 09, 2010 12:07 PM|LINK
the strange thing is that when i put the markup from the .ascx into the .aspx.
it works perfetly fine.
only when the markup is in the .ascx then the drag drop script does not work.
please kindly assist.
leroylll
Member
131 Points
258 Posts
Re: jQuery inside Usercontrol
Feb 09, 2010 12:07 PM|LINK
the strange thing is that when i put the markup from the .ascx into the .aspx.
it works perfetly fine.
only when the markup is in the .ascx then the drag drop script does not work.
please kindly assist.
alaa9jo
Star
11375 Points
2036 Posts
Re: jQuery inside Usercontrol
Feb 09, 2010 01:21 PM|LINK
OK...after a quick review on your code,I figured it out that the issue appeared because of (runat="server")
remove the runat="server" from the gallery,it should be without it:
why did you make it to aunat="server"?
Ala'a Alnajjar
----------------------------------------------------
My Webblog
leroylll
Member
131 Points
258 Posts
Re: jQuery inside Usercontrol
Feb 10, 2010 01:13 PM|LINK
Hi,
Thanks it works now.
I put the runat=server cuz i intend to get the list items from a database.
Now without the runat=server, how about should i bind the <ul id="gallery"> to some backend database data?
Please kindly assist.
Best Regards,
leroylll
alaa9jo
Star
11375 Points
2036 Posts
Re: jQuery inside Usercontrol
Feb 10, 2010 01:37 PM|LINK
mmm...OK return it back to runat="server",then add this tiny function at the end of the usercontrol:
<script type="text/javascript"> function GalleryID() { return '<%= gallery.ClientID %>'; } </script>then change the whole script in your page to this:
<script type="text/javascript"> $(function() { // there's the gallery and the trash var $gallery = $('#' + GalleryID()), $trash = $('#trash'); // let the gallery items be draggable $('li', $gallery).draggable({ cancel: 'a.ui-icon', // clicking an icon won't initiate dragging revert: 'invalid', // when not dropped, the item will revert back to its initial position containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present helper: 'clone', cursor: 'move' }); // let the trash be droppable, accepting the gallery items $trash.droppable({ accept: '#' + GalleryID() + ' > li', activeClass: 'ui-state-highlight', drop: function(ev, ui) { deleteImage(ui.draggable); } }); // let the gallery be droppable as well, accepting items from the trash $gallery.droppable({ accept: '#trash li', activeClass: 'custom-state-active', drop: function(ev, ui) { recycleImage(ui.draggable); } }); // image deletion function var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image">Recycle image</a>'; function deleteImage($item) { $item.fadeOut(function() { var $list = $('ul', $trash).length ? $('ul', $trash) : $('<ul/>').appendTo($trash); $item.find('a.ui-icon-trash').remove(); $item.append(recycle_icon).appendTo($list).fadeIn(function() { $item.animate({ width: '48px' }).find('img').animate({ height: '36px' }); }); }); } // image recycle function var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image">Delete image</a>'; function recycleImage($item) { $item.fadeOut(function() { $item.find('a.ui-icon-refresh').remove(); $item.css('width', '96px').append(trash_icon).find('img').css('height', '72px').end().appendTo($gallery).fadeIn(); }); } // image preview function, demonstrating the ui.dialog used as a modal window function viewLargerImage($link) { var src = $link.attr('href'); var title = $link.siblings('img').attr('alt'); var $modal = $('img[src$="' + src + '"]'); if ($modal.length) { $modal.dialog('open') } else { var img = $('<img alt="' + title + '" width="384" height="288" style="display:none;padding: 8px;" />') .attr('src', src).appendTo('body'); setTimeout(function() { img.dialog({ title: title, width: 400, modal: true }); }, 1); } } // resolve the icons behavior with event delegation $('ul.' + GalleryID() + ' > li').click(function(ev) { var $item = $(this); var $target = $(ev.target); if ($target.is('a.ui-icon-trash')) { deleteImage($item); } else if ($target.is('a.ui-icon-zoomin')) { viewLargerImage($target); } else if ($target.is('a.ui-icon-refresh')) { recycleImage($item); } return false; }); }); </script>Ala'a Alnajjar
----------------------------------------------------
My Webblog
leroylll
Member
131 Points
258 Posts
Re: jQuery inside Usercontrol
Feb 10, 2010 02:04 PM|LINK
Thanks it works now.... but there is another problem....
the items can only move from the left side to the right side and not the other way around.
please kindly assist.
thank you in advance.
best regards,
leroylll
alaa9jo
Star
11375 Points
2036 Posts
Re: jQuery inside Usercontrol
Feb 10, 2010 02:08 PM|LINK
It's working in my side. Check again
Ala'a Alnajjar
----------------------------------------------------
My Webblog
leroylll
Member
131 Points
258 Posts
Re: jQuery inside Usercontrol
Feb 10, 2010 02:17 PM|LINK
Hi,
Also, is it possible to use the asp.net listview control inside of the html <ul>? ( so as the be able to make use of asp.net's state management (viewstate) capabilities.)
Best Regards,
leroylll