Select index Array with Drag & Drop - javascript

Good Day, I have this HTML:
<ul class="sortable-list" style="list-style-type: none;"></ul>
and this Javascript:
$(document).ready(function() {
var old, manip;
function Person(id, first, last, age, eyecolor) {
this.id = id;
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.display = function() {
sortableList.push(this);
$(".sortable-list").sortable({
axis: "y",
containment: ".sortable-list",
revert: true,
start: function(event, ui) {
var updt = ui.item.index();
manip = updt;
old = sortableList[manip];
},
update: function(event, ui) {
var newIndex = ui.item.index();
sortableList.splice(manip, 1);
sortableList.splice(newIndex, 0, old);
}
});
var moveMe = "<i class='fa fa-arrows-v' aria-hidden='true' style='border:1px solid black;padding:5px;background-color:#91DAF2;'></i>";
var seeDetails = "<i class='fa fa-eye' aria-hidden='true' style='border:1px solid black;padding:5px;background-color:#F5940C;' onclick='seeDetails(" + this.id + ");'></i>";
var fNameObj = "<input type='text' value=" + this.firstName + " size='7' style='font-size:13px;' disabled=true>";
var lNameObj = "<input type='text' value=" + this.lastName + " size='7' style='font-size:13px;' disabled=true>";
var ageObj = "<input type='text' value=" + this.age + " size='3' style='font-size:13px;' disabled=true>";
var output = "<li>" + moveMe + " " + seeDetails + " " + fNameObj + " " + lNameObj + " " + ageObj + "</li>";
$(".sortable-list").append(output);
};
var me = new Person(1, "John", "Doe", 22, "blue");
me.display();
var you = new Person(2, "Jane", "Smith", 33, "green");
you.display();
var him = new Person(3, "Mike", "Jones", 44, "brown");
him.display();
var her = new Person(4, "Gill", "Greer", 55, "green");
her.display();
var us = new Person(5, "Paul", "Mall", 66, "blue");
us.display();
});
var sortableList = [];
function seeDetails(index) {
var temp = sortableList[index - 1];
alert(temp.firstName + " " + temp.lastName + " has " + temp.eyeColor + " eyes.");
console.log(sortableList);
}
I use FontAwesome to display the icons for the buttons.
What I try to do is to display the content of the object by passing the id to the function seeDetails.
I'd like to keep track of the elements order, because I'll use it further in my code.
Is there any way to use that code to display the proper content of the object, after drag&drop ? Anybody can help ? Thanks!
JSFIDDLE

Sortable has 2 methods that may help: serialize and toArray
serialize
Serializes the sortable's item ids into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.
It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".
See more: http://api.jqueryui.com/sortable/#method-serialize
toArray
Serializes the sortable's item id's into an array of string.
See More: http://api.jqueryui.com/sortable/#method-toArray
Depending on how you want to use the order later, one of these methods will help you. I suspect you will want to pass this data into a variable in update or stop callback.
To ensure these work better, you would want to add an id attribute to opit list items. For example:
var output = "<li id='person-" + this.id + "'>" + moveMe + " " + seeDetails + " " + fNameObj + " " + lNameObj + " " + ageObj + "</li>";
What I noticed is that we're passing back an index to seeDetails(), when you can also pass back the id for that person. Consider this:
function seeDetails(i) {
var temp;
$.each(sortableList, function(k, p) {
if (p.id == i) {
temp = p;
}
});
console.log(temp.firstName, temp.lastName, "has", temp.eyeColor, "eyes.");
}
Putting it all together, here is what I would advise: https://jsfiddle.net/Twisty/Lyotc8d5/
JavaScript
$(document).ready(function() {
var old, manip;
function Person(id, first, last, age, eyecolor) {
this.id = id;
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.display = function() {
sortableList.push(this);
var that = this;
$(".sortable-list").sortable({
axis: "y",
containment: ".sortable-list",
revert: true,
start: function(event, ui) {
var updt = ui.item.index();
manip = updt;
old = sortableList[manip];
},
update: function(event, ui) {
var newIndex = ui.item.index();
sortableList.splice(manip, 1);
sortableList.splice(newIndex, 0, old);
}
});
var moveMe = $("<i>", {
class: 'fa fa-arrows-v',
"aria-hidden": true,
style: 'border:1px solid black;padding:5px;background-color:#91DAF2;'
});
var detailsBtn = $("<i>", {
class: 'fa fa-eye',
"aria-hidden": true,
style: 'border:1px solid black;padding:5px;background-color:#F5940C;'
}).click(function(e) {
seeDetails(that.id);
});
var fNameObj = $("<input>", {
type: 'text',
value: that.firstName,
size: 7,
style: 'font-size:13px;',
disabled: true
});
var lNameObj = $("<input>", {
type: 'text',
value: that.lastName,
size: 7,
style: 'font-size:13px;',
disabled: true
});
var ageObj = $("<input>", {
type: 'text',
value: this.age,
size: 3,
style: 'font-size:13px;',
disabled: true
});
var output = $("<li>", {
id: 'person-' + that.id
});
output.append(moveMe, detailsBtn, fNameObj, lNameObj, ageObj);
$(".sortable-list").append(output);
};
var me = new Person(1, "John", "Doe", 22, "blue");
me.display();
var you = new Person(2, "Jane", "Smith", 33, "green");
you.display();
var him = new Person(3, "Mike", "Jones", 44, "brown");
him.display();
var her = new Person(4, "Gill", "Greer", 55, "green");
her.display();
var us = new Person(5, "Paul", "Mall", 66, "blue");
us.display();
});
var sortableList = [];
function seeDetails(i) {
var temp;
$.each(sortableList, function(k, p) {
if (p.id == i) {
temp = p;
}
});
console.log(temp.firstName, temp.lastName, "has", temp.eyeColor, "eyes.");
}
A few small updates. Not that your code was wrong or incorrect, I just like creating the jQuery objects and find them easier to work with. Assigning this to variable that is helpful to ensure there is no confusion around this in other functions, like for click callback.

Related

Country name converter to ISO

I am trying to make a World chart that also shows how many transactions are coming from certain country's. But i need to translate the name of the country's to ISO because that is the only way this chart will work. Also the transactions is String (It is actually type of transactions) so i am trying to kind of convert the strings to numbers as well. I don't know if i am doing that right as well.
Here is my code:
<script>
var xmlURL = "some url";
var xml;
var xmlData;
var countryCodeColumn = "Counterparty country";
var categoryColumn = "Type of transaction";
var map;
var jsonText = "{";
var mapData;
var regionStyling = {initial: {fill: '#93959b'}};
$j.ajax({
url:xmlURL,
dataType:"xml",
beforeSend: function(){
$j('#loader').show();
},
success: function(data){
xml = data;
drawMap();
$j('#loader').hide();
}
});
function drawMap(){
console.log("xml as text", (new XMLSerializer()).serializeToString(xml));
var columns = {};
var columnNames = [];
var xmlColumns = $j('head', xml);
xmlColumns.find('headColumn').each(function(){
var columnName = $j(this).find('columnValue').text();
var columnID = $j(this).attr('columnid');
columns[columnName] = columnID;
console.log("column",columnName,columnID);
});
var xmlData = $j('data', xml);
var countryCode;
var category;
var categoryColor;
var url;
xmlData.find('item').each(function(){
itemId = $j(this).find('itemID').text();
url = "./injectColumnViewItemPage.action?metaData.channelID=9&metaData.siteID=723&metaData.sheetId=4640&metaData.itemId=" + itemId + "&metaData.sheetViewID=0&metaData.viewMode=0&view=readonly&sheetItemLinkView=true";
console.log("url", url);
console.log("itemid", itemId);
$j(this).find('column').each(function(){
var colID = $j(this).attr("columnid");
console.log(colID);
var value = $j(this).find('displayData').text();
console.log("field:", colID,value);
if(colID == columns[countryCodeColumn]){
countryCode = value;
}else if(colID == columns[categoryColumn]){
if(value != 0){
category++;
}
category = value;
categoryColor = $j(this).find('rawData').find('choice').attr('style');
}
});
jsonText += '"' + countryCode + '":{' + '"Transactions":"' + category + '","Color":"' + categoryColor + '","ItemID":' + itemId + '},';
});
jsonText = jsonText.substring(0,jsonText.length-1) + "}";
console.log("jsontext", jsonText);
mapData = JSON.parse(jsonText);
console.log("json", JSON.stringify(mapData));
map = new jvm.Map({container: $j('#isheet-map'),
map: 'world_mill_en',
series:{
regions: [{
normalizeFunction: 'polynomial'
}]
},
zoomOnScroll: true,
regionStyle: regionStyling,
backgroundColor: "#ffffff",
onRegionTipShow: function(e,el,code)
{
if(mapData[code])
{
el.html('<div style = "line-height:50%;"><span class="map-tip-title">' + el.html() + '</span><p></p><span class="map-tip-label">Transactions:</span>' + mapData[code]["Transactions"] + '<p></p></div>');
}else{
return false;
}
},
onRegionClick: function(e, code){
if(mapData[code]){
var href ="./injectColumnViewItemPage.action?metaData.channelID=9&metaData.siteID=" + 723 + "&metaData.sheetId=" + 4640 + "&metaData.itemId=" + mapData[code]["itemId"] + "&metaData.sheetViewID=0&metaData.viewMode=0&view=readonly&sheetItemLinkView=true";
$j("#iframe-Map").attr('src', href);
$j("#map-dialog").dialog({modal: true, title: map.getRegionName(code), width:600, height:500});
}
else{
return false;
}
}
});
map.series.regions[0].setValues(getColors());
function getColors(){
var colors = {};
$j.each(mapData,function(code,val){
colors[code] = mapData[code]["Color"];
});
console.log("colors", colors);
return colors;
}
}
</script>
There is nothing wrong with my ajax code since if i link it to another url it works fine

Problems with remove timestamps in JQuery

When I double click the card the dialog pops up, and it is then possible to create comments. So far so good. When creating the comments it is possible to delete it.
The issue is, that the timestamps can't be removed. The way I'm trying to remove the timestamps is by this line: $('.labelStyle').remove();
I want to be able to remove the timestamps, like the others elements but how?
Live Demo
JQuery: "click" handler
$('#divComments').on('click', '.delete', function (e) {
var uniqueval = $(this).attr("for")
var NameOfDataValue = $('label[for=' + uniqueval + ']').text();
$('img[for=' + uniqueval + ']').remove();
$('label[for=' + uniqueval + ']').remove();
$('p[for=' + uniqueval + ']').remove();
$('.labelStyle').remove();
var arr = $('#divComments').data('comments');
var theIndex = -1;
for (var i = 0; i < arr.length; i++) {
if (arr[i].commentString== NameOfDataValue) {
theIndex = i;
break;
}
}
if (theIndex == -1) {
alert("Error");
}
else {
$('#divComments').data("comments").splice(theIndex, 1);
}
});
JQuery: Add comment function
function addComment(commentString) {
var container = $('#divComments');
var inputs = container.find('label');
var id = inputs.length + 1;
var data1 = {
commentString: commentString
};
var div = $('<div />', { class: 'CommentStyle' });
$('<label />', {
id: 'comment' + id,
for: 'comment' + id,
text: commentString
}).on('change', function () {
data1.commentString = $(this).text();
}).appendTo(div);
$('<br/>').appendTo(div);
var $Image = $('<img />',
{
"src": "/Pages/Images/alert.png",
"class": "CommentImage",
"for": "comment" + id
}).appendTo(container);
var d = new Date();
var $fulaDate = $('<div>' + d.getDate()
+ "-" + monthNames[d.getMonth()]
+ "-" + d.getFullYear()
+ "//" + d.getHours()
+ ":" + d.getMinutes()
+ '</div>').addClass('labelStyle').append(' ~').appendTo(div);
var $edit = $('<p />', {
class: 'edit',
for: 'comment' + id,
text: 'Edit'
}).append(' ~').appendTo(div);
var $delete = $('<p />', {
class: 'delete',
for: 'comment' + id,
text: 'Delete'
}).appendTo(div);
div.appendTo(container).focus();
container.data('comments').push(data1);
}
You could do:
$(this).parent().find('.labelStyle').remove();
This will select the parent of the clicked button (.CommentStyle) then find the .labelStyle and remove it.

How can I compare these strings in jQuery?

This program right now reads in xml code, gets a stock abbreviation, alphabetically sorts them, and then prints them out in an uo list. If you hover over the abbreviations the color will change to red. The goal I'm having is when you hover over an abbreviation, it will show all the data from the xml data just for that company. I tried using the if statement saying if the symbol (abbreviation in xml file) is equivalent to the name (abbreviation in array) then it prints out all the junk for it. The line that prints everything out works correctly in the format I want. I just need to work on the if statement.
What I have figured out is I cannot compare two variables with the ==. Keep in mind symbol is an attribute as well, and name is from an array that stores the symbols. I also tried just saying - if(checkPassword(name, symbol)) - and print it all out as I did in the jQuery code below, but that did not work.
I put a comment next to the if statement I am working on, it's towards the bottom of the jQuery.
HTML:
<body onload="onBodyLoad()">
<div id="stockList"></div>
<br />
<br />
<br />
<div id="stockInfo"></div>
jQuery:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "stocks.xml",
dataType: "xml",
success: function (xml) {
var companyNames = [];
$(xml).find('Stock').each(function () {
var symbol = $(this).attr('symbol');
companyNames.push(symbol);
});
companyNames.sort();
$.each(companyNames, function (index, name) {
$('#stockList').append('<div><li>' + name + '</li></div>');
});
function CheckPassword(val, val2) {
var strInput = val.value;
var strInput2 = val2.value;
if (strInput != strInput2) {
val2.focus();
val2.select();
return false;
} else
return true;
}
$(xml).find('Stock').each(function () {
var company = $(this).find('Company').text();
var symbol = $(this).attr('symbol');
var market = $(this).find('Market').text();
var sector = $(this).find('Sector').text();
var price = $(this).find('Price').text();
var low = $(this).find('Low').text();
var high = $(this).find('High').text();
var amount = $(this).find('Amount').text();
var yieldx = $(this).find('Yield').text();
var frequency = $(this).find('Frequency').text();
$('*').mouseover(function () {
$('#stockList li').text($(this).attr('comparison'));
});
$('#stockList li').hover(
function () {
$(this).css({ color: 'red' }); //mouseover
if (name == symbol) { // THIS IS THE STATEMENT YOU'RE LOOKING FOR PROGRAMMING GODS
$('#stockInfo').append('<div><ol><li>' + "Company = " + company + '</li><br/><li>' + "Market = " + market + '</li><br/><li>' + "Sector = " + sector + '</li><br/><li>' + "Price = " + price + '</li><br/><li>' + "Year Range = " + low + " " + high + '</li></ol><br/>');
}
},
function () {
$(this).css({ color: 'navy' }); // mouseout
$('#stockInfo').empty();
}
);
});
}
});
});
XML sample:
<Products>
<Stock symbol="GOOG">
<Company>Google</Company>
<Market>NASDAQ</Market>
<Sector>Software</Sector>
<Price>$487.80</Price>
<YearRange>
<Low>$331.55</Low>
<High>$488.50</High>
</YearRange>
<Dividend available="false"/>
</Stock>
<Stock symbol="BA">
<Company>Boeing Company</Company>
<Market>NYSE</Market>
<Sector>Aerospace</Sector>
<Price>$79.05</Price>
<YearRange>
<Low>$63.70</Low>
<High>$89.58</High>
</YearRange>
<Dividend available="true">
<Amount>$1.20</Amount>
<Yield>$1.50</Yield>
<Frequency>QTR</Frequency>
</Dividend>
</Stock>
<Stock symbol="MO">
<Company>Altria Group</Company>
<Market>NYSE</Market>
<Sector>Comsumables</Sector>
<Price>$81.70</Price>
<YearRange>
<Low>$68.36</Low>
<High>$85.00</High>
</YearRange>
<Dividend available="true">
<Amount>$3.44</Amount>
<Yield>$4.2</Yield>
<Frequency>ANNUAL</Frequency>
</Dividend>
</Stock>
</Products>
var companyData = [];
$(xml).find('Stock').each(function () {
var symbol = $(this).attr('symbol');
companyNames.push(symbol);
companyData[symbol] = {
company: $(this).find('Company').text(),
symbol: $(this).attr('symbol'),
market: $(this).find('Market').text(),
sector: $(this).find('Sector').text(),
price: $(this).find('Price').text(),
low: $(this).find('Low').text(),
high: $(this).find('High').text(),
amount: $(this).find('Amount').text(),
yieldx: $(this).find('Yield').text(),
frequency: $(this).find('Frequency').text()
};
});
...
$("#stocklist li").hover(function() {
$(this).css({ color: 'red' }); //mouseover
var info = companyData[$(this).text()];
$('#stockInfo').append('<div><ol><li>' + "Company = " + info.company + '</li><br/><li>' + "Market = " + info.market + '</li><br/><li>' + "Sector = " + info.sector + '</li><br/><li>' + "Price = " + info.price + '</li><br/><li>' + "Year Range = " + info.low + " " + info.high + '</li></ol><br/>');
});

User control(.ascx) and java script functions

In default.aspx page, there is a user control side_menu.ascx.
This is part of the code in side_menu.ascx
<script src="../library/scripts/side_menu.js" type="text/javascript"></script>
<script src="../library/scripts/side_menu_items.js" type="text/jscript"></script>
<script src="../library/scripts/side_menu_tpl.js" type="text/jscript"></script>
<script language="JavaScript" type="text/javascript">
<!--
new menu(SIDE_MENU_ITEMS, SIDE_MENU_POS, SIDE_MENU_STYLES);
// -->
</script>
The function menu is defined in side_menu.js. SIDE_MENU_ITEMS is an array containing all the menu items and the path.
var SIDE_MENU_ITEMS =[
["Administration", null,
["Report a Bug", "administration/bugs/report_bug.aspx"], // /TOrders/
["Bug Tracker", "administration/bugs/bug_tracker.aspx?fmtid=bugs"], // /TOrders/
["Feature Request", "administration/features/request_feature.aspx"], // /TOrders/
["Feature Tracker", "administration/features/feature_tracker.aspx"] // /TOrders/
]
When a menu item is clicked it, it loads the page /localhost/administration/bugs/whateverpage.aspx. This works fine. However, when a menu item is clicked the second time the path becomes /localhost/administration/bugs/administration/bugs/whateverpage.aspx. THE PATH is getting appended. I just cant figure out where to go and clear the array. When I click on the the menu item, the menu_onnclick() is called and this.item[id] is already populated with the wrong path. Not sure where to clear it.
Here are some of the function in side_menu.js
function menu (item_struct, pos, styles) {
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];
this.add_item = menu_add_item;
this.hide = menu_hide;
this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;
var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children[i].visibility(true);
menus[this.id] = this;
}
function menu_add_item (item) {
var id = this.items.length;
this.items[id] = item;
return (id);
}
function menu_onclick (id) {
var item = this.items[id];
return (item.fields[1] ? true : false);
}
function menu_item (path, parent, container) {
this.path = new String (path);
this.parent = parent;
this.container = container;
this.arrpath = this.path.split('_');
this.depth = this.arrpath.length - 1;
// get pointer to item's data in the structure
var struct_path = '', i;
for (i = 0; i <= this.depth; i++)
struct_path += '[' + (Number(this.arrpath[i]) + (i ? 2 : 0)) + ']';
eval('this.fields = this.container.item_struct' + struct_path);
if (!this.fields) return;
// assign methods
this.get_x = mitem_get_x;
this.get_y = mitem_get_y;
// these methods may be different for different browsers (i.e. non DOM compatible)
this.init = mitem_init;
this.visibility = mitem_visibility;
this.switch_style = mitem_switch_style;
// register in the collections
this.id = this.container.add_item(this);
parent.children[parent.children.length] = this;
// init recursively
this.init();
this.children = [];
var child_count = this.fields.length - 2;
for (i = 0; i < child_count; i++)
new menu_item (this.path + '_' + i, this, this.container);
this.switch_style('onmouseout');
}
function mitem_init() {
document.write (
'<a id="mi_' + this.container.id + '_'
+ this.id +'" class="m' + this.container.id + 'l' + this.depth
+'o" href="' + this.fields[1] + '" style="position: absolute; top: '
+ this.get_y() + 'px; left: ' + this.get_x() + 'px; width: '
+ this.container.pos['width'][this.depth] + 'px; height: '
+ this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
+' background: black; color: white; z-index: ' + (this.depth + 10000) + ';" ' // changed this.depth to (this.depth + 10000)
+ 'onclick="return menus[' + this.container.id + '].onclick('
+ this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
+ this.id + ');window.status=\'\';return true;" onmouseover="menus['
+ this.container.id + '].onmouseover(' + this.id + ');window.status=\''
+ this.fields[0] + '\';return true;"onmousedown="menus[' + this.container.id
+ '].onmousedown(' + this.id + ');"><div class="m' + this.container.id + 'l'
+ this.depth + 'i">' + this.fields[0] + "</div></a>\n"
);
this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
}
Change your array to:
var url="http://"+window.location.hostname;
var SIDE_MENU_ITEMS =[
["Administration", null,
["Report a Bug", url+"/administration/bugs/report_bug.aspx"], // /TOrders/
["Bug Tracker", url+"/administration/bugs/bug_tracker.aspx?fmtid=bugs"], // /TOrders/
["Feature Request", url+"/administration/features/request_feature.aspx"], // /TOrders/
["Feature Tracker", url+"/administration/features/feature_tracker.aspx"] // /TOrders/
]
];
Or (The more general way for support the urls with port numbers such as http://localhost:51143/):
function getUrl(){
url = window.location.href.split('/');
return url[0]+'//'+url[2];
}
var SIDE_MENU_ITEMS =[
["Administration", null,
["Report a Bug", getUrl()+"/administration/bugs/report_bug.aspx"], // /TOrders/
["Bug Tracker", getUrl()+"/administration/bugs/bug_tracker.aspx?fmtid=bugs"], // /TOrders/
["Feature Request", getUrl()+"/administration/features/request_feature.aspx"], // /TOrders/
["Feature Tracker", getUrl()+"/administration/features/feature_tracker.aspx"] // /TOrders/
]
];

JQuery Checkbox value not working

I have created a Check box JQuery Plugin, but when i want to get the value of the check box when selected the check box value always returns false. I have taken out the plugin and used the check box in a raw state but still returns false when check box is selected.
JAVASCRIPT
function DialogWindowDragMediaItems(userPageType, imageParams, idParams) {
idParams = idParams.replace(/~/g, "|")
var divBGContainer = $("<div/>");
var lengthVideos = imageParams.split("~").length - 1;
var divInfoText1 = $("<div/>"); ;
$(divBGContainer).append(divInfoText1);
$(divInfoText1).text("What would you like to do with the videos selected?");
$(divInfoText1).attr("class", "videosselecteddraginfo");
var checkBox1 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox1);
$(checkBox1).genCheckBox({ name: 'copymedia', text: 'Move and Copy', checked: true });
$(checkBox1).attr("id", "copymediamoveandcopy");
var checkBox2 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox2);
$(checkBox2).genCheckBox({ name: 'copymedia', text: 'Move and Delete' });
var buttonMove = GetDialogWindowButton("Move Items", "DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID'); WebForm_DoCallback('MainPageControl1','dragmediatomedia~" + userPageType + "~" + idParams + "~' + $('#copymediamoveandcopy').is(':checked'),null,null,null,true)");
CreateGenericWindowDialog($(divBGContainer), "DialogWindowDragMediaItemsAddID", 500, "images/mainpage/dialogwindow/titleimageaddmedia.png", "Move Items", "Cancel", buttonMove, true);
}
function CreateGenericWindowDialog(content, id, width, imageUrl, title, buttonText, button, destroyAndHideTransparent) {
var divContainer = $("<div/>");
$("body").append(divContainer);
$(divContainer).attr("class", "divaddvideomediacontrolcontainer");
$(divContainer).attr("id", id);
var divInnerContainer = $("<div/>");
$(divContainer).append(divInnerContainer);
$(divInnerContainer).attr("class", "divaddvideomediainnercontrolcontainer");
$(divInnerContainer).css("width", width + "px");
var divTopLeftCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopLeftCornerContainer);
$(divTopLeftCornerContainer).attr("class", "divgenericwindowtopleftcorner");
var divTopCenterCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopCenterCornerContainer);
$(divTopCenterCornerContainer).attr("class", "divcentergenericwindow");
$(divTopCenterCornerContainer).css("width", width - 16 + "px");
var divTopRightCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopRightCornerContainer);
$(divTopRightCornerContainer).attr("class", "divgenericwindowtoprightcorner");
var imageTitle = $("<img/>");
$(divTopCenterCornerContainer).append(imageTitle);
$(imageTitle).attr("class", "imagetitledialogwindow");
$(imageTitle).attr("src", imageUrl);
var divTitleContainer = $("<div/>");
$(divTopCenterCornerContainer).append(divTitleContainer);
$(divTitleContainer).attr("class", "divgenericwindowtitlecontainer");
$(divTitleContainer).text(title);
var divControlsContainer = $("<div/>");
$(divInnerContainer).append(divControlsContainer);
$(divControlsContainer).attr("class", "divgenericwindowcontrolscontainer");
$(divControlsContainer).css("width", width - 6 + "px");
$(divControlsContainer).append($(content));
var divBottomLeftCornerContainer = $("<div/>");
$(divInnerContainer).append(divBottomLeftCornerContainer);
$(divBottomLeftCornerContainer).attr("class", "divgenericwindowbottomleftcorner");
var divBottomCenterContainer = $("<div/>");
$(divInnerContainer).append(divBottomCenterContainer);
$(divBottomCenterContainer).attr("class", "divbottomcentergenericwindow");
$(divBottomCenterContainer).css("width", width - 16 + "px");
var divBottomRightCornerContainer = $("<div/>");
$(divInnerContainer).append(divBottomRightCornerContainer);
$(divBottomRightCornerContainer).attr("class", "divgenericwindowbottomrightcorner");
if (destroyAndHideTransparent) {
$(divBottomCenterContainer).append(GetDialogWindowButton(buttonText, "DestroyDialogWindowHideTransparent('" + id + "')"));
}
else {
$(divBottomCenterContainer).append(GetDialogWindowButton(buttonText, "DestroyDialogWindow('" + id + "')"));
}
if (button != null && button.length > 0) {
$(divBottomCenterContainer).append(button);
}
CenterGenericControl(id);
$(divContainer).show();
}
function GetDialogWindowButton(text, linkCall) {
var linkCancel = $("<a/>");
$(linkCancel).attr("class", "linkgenericdialogbutton");
$(linkCancel).attr("href", "javascript:" + linkCall);
$(linkCancel).css("marginTop", 14 + "px");
$(linkCancel).css("marginRight", 10 + "px");
var divCancel = $("<div/>");
$(linkCancel).append(divCancel);
$(divCancel).attr("class", "divlinkaddmediaurlbuttontext");
$(divCancel).text(text);
return linkCancel;
}
JQUERY CHECKBOX PLUGIN
(function($) {
$.fn.genCheckBox = function(settings) {
var def = {
height: 15,
width: 15
};
settings = $.extend(def, settings)
$(this).attr("name", settings.name);
$(this).css("display", "none");
$(this).prop("checked", settings.checked);
var divContainer = $("<div style='clear:left;float:left;padding:10px;'/>");
$(divContainer).insertAfter(this);
var span = $("<span class='checkbox' style='float:left'/>");
if (settings.checked) {
$(span).css("background-position", "0px 17px");
}
else {
$(span).css("background-position", "0px 0px");
}
$(divContainer).append(span);
//$(span).attr("name", settings.name);
var div = $("<div style='float:left;margin-left:10px;disply:block'/>");
$(div).insertAfter(span);
$(div).text(settings.text);
$(span).click(function() {
var position = $(this).css("background-position");
if (position == '0px 0px') {
$(".checkbox").css("background-position", "0px 0px");
var el = document.getElementsByName(settings.name);
for (var i = 0; i < el.length; i++) {
var input = el[i];
$(input).prop("checked", false);
}
$(this).css("background-position", "0px 17px");
var checkBox = $($(this).parent()).prev();
$(checkBox).prop("checked", true);
}
});
}
})(jQuery);
I split the code up from the button click event and then i could retrieve the value from the check box. Weird i still don't understand why it shouldn't work first time.
function DialogWindowDragMediaItems(userPageType, imageParams, idParams) {
idParams = idParams.replace(/~/g, "|")
var divBGContainer = $("<div/>");
var lengthVideos = imageParams.split("~").length - 1;
var divInfoText1 = $("<div/>"); ;
$(divBGContainer).append(divInfoText1);
$(divInfoText1).text("What would you like to do with the videos selected?");
$(divInfoText1).attr("class", "videosselecteddraginfo");
var checkBox1 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox1);
$(checkBox1).genCheckBox({ name: 'copymedia', text: 'Move and Copy', checked: true, id: 'copymediamoveandcopy' });
var checkBox2 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox2);
$(checkBox2).genCheckBox({ name: 'copymedia', text: 'Move and Delete' });
var buttonMove = GetDialogWindowButton("Move Items", "");
CreateGenericWindowDialog($(divBGContainer), "DialogWindowDragMediaItemsAddID", 500, "images/mainpage/dialogwindow/titleimageaddmedia.png", "Move Items", "Cancel", $(buttonMove), true);
//$(buttonMove).attr("href", "javascript:DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID'); WebForm_DoCallback('MainPageControl1','dragmediatomedia~" + userPageType + "~" + idParams + "~' + $('#copymediamoveandcopy').is('checked'),null,null,null,true)");
$(buttonMove).attr("href", "javascript:MoveItemsClick('" + userPageType + "','" + idParams + "')");
}
function MoveItemsClick(userPageType, idParams) {
var booleanValue = $('#copymediamoveandcopy')[0].checked;
DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID');
WebForm_DoCallback('MainPageControl1', 'dragmediatomedia~' + userPageType + '~' + idParams + '~' + booleanValue, null, null, null, true);
}

Categories

Resources