BACKGROUND:
Before a product gets added into the checkout chart, I need to fire a modal window which will have customisation options. Only after this event the item should be added into the chart. I can achive this function if I use other language (c#), but I like to learn more JQuery and JQuery UI.
PROBLEM:
I have tried various ways to allocate the container with the data but so far all my methods have failed. So I have simplified the program a little as the HTML side is around 2000 lines of code and I don’t like to bore you guys. Please ignore any silly mistakes like extra markup tags and missing closing tags as I tried to shorten the problem from the original source and may have missed some stuff out.
Partial HTML:
<html>
<head></head>
<body>
<div class="ui-widget ui-helper-clearfix" style="height:100%; float:left !important; border:2px solid Black;">
<center>
<div class="optionsHeader" style="">RECOMMENDED VALUE PACKAGES</div></center><br />
<ul id="options" class="options ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr" id="100400" title="Please view product details for handle preferences before sellecting this option.">
<h5 class="ui-widget-header">Option 1</h5>
<font class="repairDetails" alt="Repair Details" style="">REHANDLE<br />FULL BLADE/TOE<br />REPAIR/REFURB</font>
<font style="color:Red; text-decoration:blink; font-size:0.7em; bottom:10;">Please view product details for <u>handle preferences</u> before sellecting this option.
</font><br />
<label class="price">£49.99</label>
<a class="ui-icon ui-icon-wrench dialog_but" title="View Product Detail" href="#" style="">View Product Detail</a>
<div class="dialog_content" title="" style="">
<div id="products">
<h1 class="ui-widget-header">Avaliable Bundle Options</h1>
<font>You can customise this option below</font>
<div id="pOptions">
<h2><a href="#">Handle</a></h2>
<div>
<ul>
</ul>
</div>
<h2><a href="#">Blade</a></h2>
<div>
<ul>
</ul>
</div>
<h2><a href="#">Grips</a></h2>
<div>
<ul>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Sellected Options</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder"><i>Drag & Drop</i> your bat repair here</li>
</ol>
</div>
</div>
</div>
<a href="" title="Add to chart" class="ui-icon ui-icon-cart chart_but">Add to chart</a>
</li>
</ul>
</div>
<div id="chart" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-cart"></span>Repair Options You Have Chosen</h4>
</div>
</body>
</html>
Partial JQuery:
$(function() {
// there's the options and the chart
var $options = $("#options"),
$chart = $("#chart");
//Add to chart
var recycle_icon = "<a href='' title='Remove this option' class='ui-icon ui-icon-arrowreturnthick-1-w'>Remove Option</a>";
function addToChart($item) {
// He is where i need to prompt the modal than continue as below;
$item.fadeOut(function() {
var $list = $("ul", $chart).length ? $("ul", $chart) : $("<ul class='options <ui-helper-> </ui-helper->reset'/>").appendTo($chart);
$item.find("a.ui-icon-cart").remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({
width: "100%px",
height: "100%px"
}) //Box
.find("font").animate({}); //Font
});
});
}
// revert frm chart function
var chart_icon = "<a href='' title='Add this option' class='ui-icon ui-icon-cart'>Add Option</a>";
function revertFrmChart($item) {
$item.fadeOut(function() {
$item.find("a.ui-icon-arrowreturnthick-1-w").remove().end().css("width", "100%px").append(chart_icon).find("font").css("height", "100%px").end().appendTo($options).fadeIn();
});
}
// resolve the icons behavior with event delegation
$("ul.options > li").click(function(event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-cart")) {
addToChart($item);
} else if ($target.is("a.ui-icon-arrowreturnthick-1-w")) {
revertFrmChart($item);
}
return false;
});
});
//do when the dom is ready
jQuery(document).ready(function($) {
//loop through every button anchor element
$('.dialog_but').each(function() {
//create a local scope of a dialog variable to attach
var $dialog;
//create the dialog for the div.dialog_content standing next to the anchor element
//I set the autoOpen false so that it can be reusable later
//also I set the modal = true to appear the dialog as a modal prompt
$dialog = $(this).next('div.dialog_content').dialog({
title: 'Product Detail',
modal: true,
autoOpen: false,
width: 600,
show: 'fade',
hide: 'fade'
});
//Swapped this with the inline version
//add a wee bit of button thing
// $(this).button({
// icons: {
// primary: 'ui-icon-info'
// }
// });
//now attach the open event of the dialog to the anchor element
$(this).click(function(e) {
//prevent the anchor element to go to the hyperlinked page
e.preventDefault();
//open the dialog
$dialog.dialog('open');
}); //done
});
});
//Modal window to ask and submit additional user details
$(function() {
var hShape = $("#hShape"),
hSize = $("#hSize"),
hType = $("#hType"),
allFields = $([]).add(hShape).add(hSize).add(hType),
tips = $(".validateTips");
$("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 400,
modal: true,
show: 'fade',
hide: 'fade',
buttons: {
"Add Details": function() {
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(hShape, "Handle Shape", 3);
bValid = bValid && checkLength(hSize, "Handle Size", 1);
bValid = bValid && checkLength(hType, "Handle Type", 3);
// find relevant parent element
var $el = $(this).closest('.ui-dialog');
if (bValid) {
// set the context to the visible div in the background -
$('#addHere', $el.prevAll('.ui-dialog:visible')).append("<tr>" + "<td>" + hShape.val() + "</td>" + "<td>" + hSize.val() + "</td>" + "<td>" + hType.val() + "</td>" + "</tr>")
}
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
$("#handle-pre").live("click", function() {
$("#dialog-form").dialog("open");
});
});
JSFiddle :
If you click on the wrench icon you will be prompted with a modal. This is the modal I need to fire when the user clicks on the add to chart.
I think the confusing bit is to pin point each modal data div for each product. So gave each modal data div a unique IDs and on add to chart i added an switch statement to fire correct modals.
So the HTML where the modal data is now have a ID;
And the add to chat is now have the following;
(EDIT) FIDDLE LINK
Let me know if anyone can think of a better way than using a switch statement…