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
174 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
  • 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: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 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:Neil Thompson
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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 how to dynamically set the form action using jQuery.
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)

776 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