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
172 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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…

705 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

15 Experts available now in Live!

Get 1:1 Help Now