Solved

Problem using jQuery UI 1.8.1 Modal Dialogue

Posted on 2010-09-10
2
407 Views
Last Modified: 2012-05-10
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. ]
<%@ 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>

Open in new window

0
Comment
Question by:jonatec
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 9

Accepted Solution

by:
wellhole earned 500 total points
ID: 33648123
Did you reference the jquery ui css and image files correctly?

Can you resize the dialog using the mouse?

Can you click the invisible close button?
0
 

Author Closing Comment

by:jonatec
ID: 33648254
yep, thanks, images missing, works now cheers.
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question