asked on Problem using jQuery UI 1.8.1 Modal Dialogue
Hi
Created a modal dialogue form, shows and functions fine. problems are:
* The top-right "close" cross doesn't show.
* Bottom stretch icon doesn't show either.
Any ideas what's missing please ?
[ Code attached, sorry, a bit verbose, thanks. ]
Created a modal dialogue form, shows and functions fine. problems are:
* The top-right "close" cross doesn't show.
* Bottom stretch icon doesn't show either.
Any ideas what's missing please ?
[ Code attached, sorry, a bit verbose, thanks. ]
<%@ Page Language="C#" AutoEventWireup="true" %>
<!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>My Table Maint</title>
<link type="text/css" href="common/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
var product_id = "";
var product_name = "";
var list_price = "";
var allFields = "";
var tips = "";
$("document").ready(function () {
$.ajaxSetup({
cache: false,
datatype: "xml",
error: function (xhr, status, error) { alert("An error occurred: " + error); },
timeout: 60000,
type: "GET"
});
fnGetProducts();
});
function fnGetProducts() {
var buf = new fnStringBuilder;
var i_xml = "<root><method>GetProducts</method></root>";
var iRow = 0;
var prod = "";
var status = "";
$.ajax({
url: "dac.ashx?i_xml=" + fnEncode(i_xml),
success: function (xml) {
status = $(xml).find('status_code').text();
switch (parseFloat(status)) {
case 0:
buf.append("<table border='0' id='tbl0' cellspacing='1' cellpadding='2'>");
buf.append("<col width=97/><col width=161/><col width=322/><col width=118/>");
buf.append("<tr>");
buf.append(" <td class='th1'>ProductID</td>");
buf.append(" <td class='th1'>Category Name</td>");
buf.append(" <td class='th1'>Product Name</td>");
buf.append(" <td class='th1'>List Price</td>");
buf.append(" <td class='th1'>Sell S/Date</td>");
buf.append("</tr>");
buf.append("</table>");
$('#sec00').html(buf.toString());
buf = new fnStringBuilder;
buf.append("<table border='0' id='tbl1' cellspacing='1' cellpadding='2'>");
buf.append("<col width=90/><col width=150/><col width=300/><col width=110/><col width=120/>");
$(xml).find('Table').each(function () {
buf.append("<tr>");
prod = fnFormatProdId(iRow, $(this).find('ProductID').text());
buf.append(" <td class='td2' id='product_id_" + iRow + "'>" + prod + "</td>");
buf.append(" <td class='td0'>" + $(this).find('CategoryName').text() + "</td>");
buf.append(" <td class='td0' id='product_name_" + iRow + "'>" + $(this).find('ProductName').text() + "</td>");
buf.append(" <td class='td3' id='list_price_" + iRow + "'>" + $(this).find('ListPrice').text() + "</td>");
buf.append(" <td class='td2'>" + $(this).find('SellStartDate').text() + "</td>");
buf.append("</tr>");
iRow++;
});
buf.append("</table>");
$('#sec01').html(buf.toString());
$("#tbl1 tr:even").addClass("tr1");
$("#tbl1 tr:odd").addClass("tr2");
break;
default:
var status_msg = $(xml).find('status_message').text();
alert("ERROR. " + status_msg);
break;
}
}
});
}
function fnFormatProdId(p_row, p_item) {
return "<a href='javascript: fnEditProduct(" + p_row + ")'>" + p_item + "</a>";
}
function fnEditProduct(p_row) {
product_id = document.getElementById("product_id_" + p_row).innerText;
product_name = document.getElementById("product_name_" + p_row).innerText;
list_price = document.getElementById("list_price_" + p_row).innerText;
$("#ProductName").val(product_name);
$("#ListPrice").val(list_price);
allFields = $([]).add(product_name).add(list_price);
tips = $(".validateTips");
$("#dialog_form_product").dialog({
autoOpen: false,
closeOnEscape: true,
height: 300,
width: 350,
resizable: true,
position: "center",
modal: true,
buttons: {
'Save Product Change': function () {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid && fnCheckLength($("#ProductName"), "ProductName", 3, 80);
bValid = bValid && fnCheckLength($("#ListPrice"), "ListPrice", 1, 10);
if (bValid) {
product_name = $("#ProductName").val();
list_price = $("#ListPrice").val();
fnSaveProductChange();
$(this).dialog('close');
}
},
Cancel: function () {
$(this).dialog('close');
}
},
close: function () {
allFields.val('').removeClass('ui-state-error');
}
});
document.getElementById("dialog_form_product").style.display = '';
$('#dialog_form_product').dialog('open');
}
function fnSaveProductChange() {
var status = "";
var i_xml = "";
i_xml += "<root>"
i_xml += "<method>UpdateProduct</method>";
i_xml += "<product_id>" + product_id + "</product_id>";
i_xml += "<product_name>" + product_name + "</product_name>";
i_xml += "<list_price>" + list_price + "</list_price>";
i_xml += "</root>"
$.ajaxSetup({ cache: false });
$.ajax({
type: "GET",
url: "dac.ashx?i_xml=" + fnEncode(i_xml),
datatype: "xml",
success: function (xml) {
status = $(xml).find('status_code').text();
switch (parseFloat(status)) {
case 0:
fnGetProducts();
break;
default:
var status_msg = $(xml).find('status_message').text();
alert(status_msg);
break
};
}
});
}
function updateTips(t) {
tips
.text(t)
.addClass('ui-state-highlight');
setTimeout(function () {
tips.removeClass('ui-state-highlight', 1500);
}, 500);
}
function fnCheckLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass('ui-state-error');
updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
return false;
} else {
return true;
}
}
function fnEncode(item) {
var rtn = item.replace(/\</g, ";60;"); // left <
rtn = rtn.replace(/\>/g, ";62;"); // right >
rtn = rtn.replace(/\//g, ";47;"); // forward slash "/"
return rtn;
}
function fnStringBuilder() {
this._strings = [];
this.append = function (s) { this._strings.push(s); };
this.toString = function () { return this._strings.join(''); };
}
</script>
<style type="text/css">
body { margin: 40px; }
#sec00 { width: 850px; }
#sec01 { width: 850px; height: 250px; overflow: auto; }
#tbl0 { background-color: #d3d3d3; width: 100%; font-family: Consolas; font-weight: bold; }
#tbl1 { background-color: #d3d3d3; width: 100%; font-family: Consolas; }
.tr1 { background-color: #00FFFF; }
.tr2 { background-color: #e6e6fa; }
.th1 { background-color: #FFFFFF; text-align: center; }
.td1 { text-align: left; }
.td2 { text-align: center; }
.td3 { text-align: right; }
div#dialog_form_product input { margin-bottom: 12px; width: 95%; padding: .4em; }
div#dialog_form_product fieldset { padding: 0; border: 0; margin-top: 25px; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
</head>
<body>
<form id="frm1">
<div id="sec00"></div>
<div id="sec01"></div>
</form>
<div id="dialog_form_product" title="Edit Product" style="display: none">
<p class="validateTips">
All form fields are required.</p>
<form id="frm2">
<fieldset>
<label for="ProductName">
Product Name:</label>
<input type="text" name="ProductName" id="ProductName" class="text ui-widget-content ui-corner-all" />
<label for="ListPrice">
List Price:</label>
<input type="text" name="ListPrice" id="ListPrice" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
</body>
</html>
jQueryJavaScript
Last Comment
jonatec
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
yep, thanks, images missing, works now cheers.