• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 183
  • Last Modified:

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="categoryUserFriendlyList" name="categoryUserFriendlyList" type="text" value="home > toys and games > junior" />

<!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>

Open in new window

0
Neil Thompson
Asked:
Neil Thompson
  • 5
  • 2
2 Solutions
 
RobOwner (Aidellio)Commented:
Target the modal directly using its ID:

function returnAndClose($this) {                  
                  document.getElementById('categoryID').value = $this.id;                              
                  document.getElementById('categoryUserFriendlyList').value = $this.title;      
                  $('#amendCategoryListModal').dialog("close");
            }
0
 
RobOwner (Aidellio)Commented:
As for styling it yourself, do not include the jquery styles:

<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">

Then I would just use the inspector and dev tools to style each element as you would like it (based on the classes present in each element)
0
 
RobOwner (Aidellio)Commented:
Here is a list of the styles: http://api.jqueryui.com/theming/css-framework/
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Neil ThompsonSenior Systems DeveloperAuthor Commented:
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('categoryID').value = $this.id;                              
 ------->                  document.getElementById('categoryUserFriendlyList').value = $this.title;      
                   $('#amendCategoryListModal').dialog("close");
             }

regards
Neil
0
 
RobOwner (Aidellio)Commented:
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(elem_id) with just $(elem_id), though you'd use the val() function to set the value rather than the value property.
0
 
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Thanks again Rob, really appreciated.

Neil
0
 
RobOwner (Aidellio)Commented:
Not a problem Neil. Just happy to help.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now