[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
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
Medium Priority
?
181 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:Neil Thompson
[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
  • 5
  • 2
7 Comments
 
LVL 43

Accepted Solution

by:
Rob earned 2000 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 43

Assisted Solution

by:Rob
Rob earned 2000 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 43

Expert Comment

by:Rob
ID: 40532764
Here is a list of the styles: http://api.jqueryui.com/theming/css-framework/
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Closing Comment

by:Neil Thompson
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 43

Expert Comment

by:Rob
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:Neil Thompson
ID: 40533054
Thanks again Rob, really appreciated.

Neil
0
 
LVL 43

Expert Comment

by:Rob
ID: 40533114
Not a problem Neil. Just happy to help.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

650 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