[RESOLVED] Dynamic MySQL Data in DIV Pop-Up

rsmith

Hey all,
I'm looking for the best way - examples or links that reference working models - to accomplish the following:

I have an array of MySQL data that is outputted to an HTML table in separate rows.
Each row shows several pieces of summarical information, each of which are clickable to view additional details.
I want these additional details to open in a DIV, much like lightbox does for pictures but to allow the user to edit the data, save the information back to MySQL, and then close the DIV.

Any advice and direction is greatly appreciated. TIA.

Derokorian

I would recommend using jQuery UI's Dialog ability. You can use any markup you choose in the dialog (including, but not limited to, form input fields). See http://jqueryui.com/demos/dialog/#modal-form for example of using it. The markup that makes the dialog can be anything, so you can of course set default values to the field (sounds like in this case it might be a textarea?). I would then check that the value upon closing the dialog is different than the default value before sending it to your server for updating (no reason to send a request to your server, and consequently to mysql if nothing changed).

rsmith

Awesome, thanks. I'm just getting started with jQuery actually so hopefully this solves it. At first glance I don't see anything about passing the id to the div but I'm at work and will have to dive into it later.

Derokorian

Well if/when you get stuck, show us what you tried and I'll be glad to help out.

rsmith

Finally had a chance to look through the article and I'm using this as a reference: http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

I viewed the "Full Demo" listed in the article and wrote my code snippets mirroring there's except of course with my table data etc.

Here's my jQuery that is in the <HEAD> section:

$(document).ready(function() {
	$('#tickets-table td a').each(function() {
		var $link = $(this);
		var $dialog = $('<div></div>')
			.load($link.attr('href') + '#content')
			.dialog({
				autoOpen: false,
				title: $link.attr('title'),
				width: 600,
				height: 400
			});

	$link.click(function() {
		$dialog.dialog('open');

		return false;
	});
});
});

And here's the beginning of my table and the first few lines of PHP that will direct the page to the DIV. Note that in the final product each TD will be a link to open the ticket but for now only the first TD has the code to actually pass the ticket. No use adding it all until I work out the bugs.

<table align="center" id="tickets-table" width="600" border="0" cellspacing="0">

while($ticket = mysql_fetch_assoc($result)){
	      		echo "<tr bgcolor='e0e0e0'><td style='height:20px;'><center><a href='view-ticket.php?id=".$ticket['id']."' title='".$ticket['title']."'>".$ticket['id']."</a></center></td><td>".$ticket['campus']."</td><td>".$ticket['sub_by']."</td><td>".$ticket['title']."</td><td>".$ticket['sub_date']."</td></tr>";
      		}

</table>

I'm sure I'm missing something trivial but can't seem to find where. Thanks for a fresh site of eyes, it's much appreciated.

Derokorian

First thing I always recommend when building JS is to get the JS working on a static HTML page before you try to mix it with PHP. On that note, here is what I would have expected to see, but maybe I'm still misunderstanding what you're looking for.

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Table cell click</title>
		<link type="text/css" href="scripts/css/overcast/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="scripts/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="scripts/js/jquery-ui-1.8.17.custom.min.js"></script>
		<script type="text/javascript">
		$(function() {
			$('#detailsContainer > div').each(function(k,v) {
				var divID = '#'+$(v).attr('id');
				var formID = '#form-'+$(v).attr('id').split('-')[1];
				$(divID).hide();
				$(divID).dialog({
					autoOpen: false,
					width: 300,
					height: 250,
					buttons:{
						"Submit": function() {
							$(formID).submit();
						},
						"Cancel": function() {
							$(this).dialog('close');
						}
					}
				});
				$(formID).submit(function() {
					// validation and form submission here
					$.ajax({
						type:'POST',
						url:'http://example.com/processChanges.php',
						data: $(formID).serialize(),
						success: function(data) {
							alert('Changes processed, server returned '+data);
						}
					});
				});
			});
		});
		function showDetails(cell) {
			$('#detail-'+$(cell).attr('id').split('-')[1]).dialog('open');
		}
      </script>
   </head>
   <body>
      <table>
         <tr>
            <td onclick="showDetails(this)" id="cell-1">Something</td>
            <td onclick="showDetails(this)" id="cell-2">Something Else</td>
         </tr>
      </table>
      <div id="detailsContainer">
         <div id="detail-1">
            <form id="form-1">
               <input type="hidden" name="rowID" value="1">
               <input type="hidden" name="colID" value="1">
               <textarea name="details">Some massive long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida, eros sed convallis cursus, purus quam vestibulum massa, vitae porttitor mauris lectus vitae metus. Cras a diam dolor. Nulla facilisi. Nullam sed sapien eu nulla aliquam euismod. Praesent velit ante, pulvinar vitae dapibus eget, pharetra at ligula. Suspendisse vestibulum eleifend leo id eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim felis. Nulla leo lorem, bibendum ut blandit eget, tincidunt vehicula nibh. Suspendisse convallis quam a lacus dapibus vel vulputate tellus elementum. Pellentesque id nibh diam.</textarea>
            </form>
         </div>
         <div id="detail-2">
            <form id="form-1">
               <input type="hidden" name="rowID" value="1">
               <input type="hidden" name="colID" value="1">
               <textarea name="details">Some massive long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida, eros sed convallis cursus, purus quam vestibulum massa, vitae porttitor mauris lectus vitae metus. Cras a diam dolor. Nulla facilisi. Nullam sed sapien eu nulla aliquam euismod. Praesent velit ante, pulvinar vitae dapibus eget, pharetra at ligula. Suspendisse vestibulum eleifend leo id eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim felis. Nulla leo lorem, bibendum ut blandit eget, tincidunt vehicula nibh. Suspendisse convallis quam a lacus dapibus vel vulputate tellus elementum. Pellentesque id nibh diam.</textarea>
            </form>
         </div>
      </div>
   </body>
</html>

I'm not entirely sure what you got going on in yours as its totally not the way I've seen this type of thing done. One thing I recommend is not use $ in variable names, since that's the jQuery shortcut, its makes it easier to see where you use jQuery and where you use a variable (in my mind anyway).

rsmith

I've gotten all the HTML markup but for brevity I didn't include it. But I have all the calls to all the JS and jQuery libraries like you'd expect. The only thing I did different was move my jQuery code to it's own .js file and just link to it. Much like the other <script> tags in your example.

From what I've read on the link you gave me, and the Nemikor blog, is that the jQuery dynamically creates the DIV inside which the page should load. If you view the source of the full demo linked on the Nemikor example (http://example.nemikor.com/loading-a-page-into-a-dialog/) and compare it to the code snippets I have written, you'll see that they are similar, except where I have put in my application's pertinent information.

Maybe I'm just missing some syntax but I can't see it. Going on 10 or so hours tweaking it and I'm out of Red Bull soooo you know how that goes 😃

I've done it the way you're example shows to but this seemed like a cleaner and more concise way of achieving it.

Derokorian

rsmith;10998647 wrote:
I've gotten all the HTML markup but for brevity I didn't include it. But I have all the calls to all the JS and jQuery libraries like you'd expect. The only thing I did different was move my jQuery code to it's own .js file and just link to it. Much like the other <script> tags in your example.

This is exactly what I always do, but to get the script working I put it in its own static page, then move it to a js file to include in the area I'm developing it for.

rsmith;10998647 wrote:
From what I've read on the link you gave me, and the Nemikor blog, is that the jQuery dynamically creates the DIV inside which the page should load. If you view the source of the full demo linked on the Nemikor example (http://example.nemikor.com/loading-a-page-into-a-dialog/) and compare it to the code snippets I have written, you'll see that they are similar, except where I have put in my application's pertinent information.

Note that Nemikors example is 3 years old, and that should be taken into account. Also note that my example loads the form into the page when its sent to the browser initially, as opposed to this example which makes a request to the server for the document located at the href specified. Which means you need a file on your server called view-ticket.php which is properly giving you the info you expect to have show up in the dialog. So while it may be less initial output code, it will require more server requests, and the div is only created dynamically in the sense that its being loaded by another request to the server instead simply showing a div which is already on the page.

Maybe I'm just missing some syntax but I can't see it. Going on 10 or so hours tweaking it and I'm out of Red Bull soooo you know how that goes 😃

I gave up red bull about a year back, and you should think about doing the same. Espresso is WAY better!

I've done it the way you're example shows to but this seemed like a cleaner and more concise way of achieving it.

It may seem more concise and maybe it is, but note that my example has ajax while yours doesn't (added code), defines buttons (8 lines of code) and if you take those out my JS is 5 lines shorter. Not to mention would only require one server side script to create the page and the forms, as opposed to the 2 you need now. Which means less moving parts server side.

You could even make the forms in the cells and use the child selector to make that div a dialog which would even further reduce the code. Which means you can output all the info at once as you iterate the rows from a mysql call for example. Instead of making a mysql call to put the table, and another call each time a link is clicked to make changes.

rsmith

In your example I see that you have hard-coded the content of the DIVs. As you say in my code I am using view-ticket.php?id= to pass the id I want so that the following page pulls and displays the SQL data. How does the id= get passed to the DIV? Ultimately I'd want a single div that is targeted to show the content:

<div id="details">
All the information of the ticket that is pulled from MySQL would go here.
</div>

Thanks again!

Derokorian

Well in my example, I use ids with consistency, note the cells are cell-1 cell-2 and the divs are detail-1 and detail-2 so when I click on a cell, I trigger my showDetails function. If i break it down into multiple lines it would look something like this:

function showDetails(cell) {
   var cellID = $(cell).attr('id'); // get the ID of the cell we clicked on
   cellID = cellID.split('-'); // Like using explode in PHP with the separator being a dash
   var ID = cellID[1];  // Gets the last element of the array we created (in this case the number at the end of the id)
   $(ID).dialog('open'); // Opens the dialog we created in the loop earlier
}

Is that what you mean?

My other solution I threw out was to put the forms in the TD and hide those then open a dialog when you click on the link. If you want to see how that works I can mock something up.

Derokorian

Basically if you use one div, for everything you can click on so that you can target them each individually, hence I added the numbers to the end of everything. This number could be either a counter, or the ID associated with the row you end up editing.

rsmith

Aha! Making progress.

i found that the order in which I reference my jQuery libraries in my <head> section was wrong. I was putting the script file I created for the jQuery action BEFORE the jQuery and jQuery UI libraries loaded... Now it shows! Now just to tweak it so it looks right.

Thanks again man, I appreciate the insight.

On a side note: Not a fan of Espresso but I do love the Xyience Xenergy line 🙂

Derokorian

Ha! See if you had shown your full code I could have noticed they were out of order for you, not saying I would have but I certainly could have.

Also, I have my own espresso machine so I make some amazing lattes and such! And its soooo much cheaper than starbucks 😛 In fact, I was probably spending around $12 a day on red bull when I drank that, I now spend about $8 per week drinking espresso based things, and I'm wired more than red bull just my personal preference!

rsmith

Ahahaha whatever gets the code written right? Heheh.

Derokorian

Indeed, on that note - is everything working now?

rsmith

Yup, now I just have to finish formatting the exact way I want things displayed. Works like a charm.