Neil Thompson
asked on
jQuery to pop up a sized window, display a list that users can click which closes window and populates divs
Hi all
I'm getting my head around a few jQuery bits but wondered if you gurus could assist with the following to get me started.
I'm trying to get a popup box appear in the centre of the screen when a user clicks the [Amend Category] link, within that I'm going to have a list of all the shop categories for them to choose from in a easy to read format, e.g.
home > toys and games > pre school this works fine but I would like the following:
1) to be able to close the window when a link is clicked, at present it updates the boxes but doesn't close
2) do away with the UI CSS download and just basically skim myself (all I want is the modal effect and a clean/clear box)
Each of these category links have their ID/TITLE associated with them and when the user clicks their chosen category have the ID and TITLE values replace what ever content is in the form fields (e.g.)
<input id="categoryID" name="categoryID" type="text" value="12" />
<input id="categoryUserFriendlyLi st" name="categoryUserFriendly List" type="text" value="home > toys and games > junior" />
I'm getting my head around a few jQuery bits but wondered if you gurus could assist with the following to get me started.
I'm trying to get a popup box appear in the centre of the screen when a user clicks the [Amend Category] link, within that I'm going to have a list of all the shop categories for them to choose from in a easy to read format, e.g.
home > toys and games > pre school this works fine but I would like the following:
1) to be able to close the window when a link is clicked, at present it updates the boxes but doesn't close
2) do away with the UI CSS download and just basically skim myself (all I want is the modal effect and a clean/clear box)
Each of these category links have their ID/TITLE associated with them and when the user clicks their chosen category have the ID and TITLE values replace what ever content is in the form fields (e.g.)
<input id="categoryID" name="categoryID" type="text" value="12" />
<input id="categoryUserFriendlyLi
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="amendCategoryListModal">
Full list of categories will appear here in a scrollable div
The ID can be in a link link or like below, whatever is achievable
<ul>
<li>home > toys and games</li>
<li>home > toys and games > pre school</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li>home > toys and games > junior</li>
<li><a href="#" id="13" title="home > toys and games > senior" onclick="returnAndClose(this);">home > toys and games > senior</a></li>
</ul>
<script>
function returnAndClose($this) {
document.getElementById('categoryID').value = $this.id;
document.getElementById('categoryUserFriendlyList').value = $this.title;
$(this).dialog("close");
}
</script>
</div>
<p><a href="#" id="amendCategoryLink">amend Category</a></p>
<p>
current categoryID
<input id="categoryID" name="categoryID" type="text" value="11" />
</p>
<p>
current categoryUserFriendlyList
<input id="categoryUserFriendlyList" name="categoryUserFriendlyList" type="text" value="home > toys and games" size="100" />
</p>
<script>
$(function() {
$( "#amendCategoryListModal" ).dialog({
autoOpen: false,
width:600,
height:400,
resizable: false,
title:'Please select a new category'
});
$( "#amendCategoryLink" ).click(function() {
$( "#amendCategoryListModal" ).dialog( "open" );
});
});
</script>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Here is a list of the styles: http://api.jqueryui.com/theming/css-framework/
ASKER
Thanks Rob
The styling tip is a no brainer when you think of it (annoyingly I seem to have spent hours not thinking of the easy way :) )
The return function am I mixing normal JS with jQuery, should more be done in jQuery with regard to assigning the values or am I worrying too much?
function returnAndClose($this) {
-------> document.getElementById('c ategoryID' ).value = $this.id;
-------> document.getElementById('c ategoryUse rFriendlyL ist').valu e = $this.title;
$('#amendCategoryListModal ').dialog( "close");
}
regards
Neil
The styling tip is a no brainer when you think of it (annoyingly I seem to have spent hours not thinking of the easy way :) )
The return function am I mixing normal JS with jQuery, should more be done in jQuery with regard to assigning the values or am I worrying too much?
function returnAndClose($this) {
-------> document.getElementById('c
-------> document.getElementById('c
$('#amendCategoryListModal
}
regards
Neil
There's nothing wrong with mixing the two, jQuery just gives you more functions and easier access to the same properties.
You could quite easily replace document.getElementById(el em_id) with just $(elem_id), though you'd use the val() function to set the value rather than the value property.
You could quite easily replace document.getElementById(el
ASKER
Thanks again Rob, really appreciated.
Neil
Neil
Not a problem Neil. Just happy to help.