Solved

jQuery to pop up a sized window, display a list that users can click which closes window and populates divs

Posted on 2015-01-05
7
173 Views
Last Modified: 2015-01-06
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
Comment
Question by:NeilT
  • 5
  • 2
7 Comments
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40532756
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
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 500 total points
ID: 40532763
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40532764
Here is a list of the styles: http://api.jqueryui.com/theming/css-framework/
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 3

Author Closing Comment

by:NeilT
ID: 40533035
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40533040
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
 
LVL 3

Author Comment

by:NeilT
ID: 40533054
Thanks again Rob, really appreciated.

Neil
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40533114
Not a problem Neil. Just happy to help.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

867 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now