John Davidson

Message:

I am trying to set up a page that presents a grid with a sequence of times on it for a group of people. Essentially a calendar with rows for a specific time and columns for the person it relates to.

I intend to have a modal dialog box open when a user clicks on a time and load the current data via AJAX. This is very similar to the contact form example except of course that I will not know what the time and person are until the link is clicked. So I would like a way to pass this extra data to the dialog calling script.

Many thanks

---

My Answer:
You can pass additional parameters to the modal dialog calling script by using data attributes on the element that triggers the modal. Here's an example of how you can achieve this:

1. In your HTML, add data attributes to the elements that trigger the modal dialog:

html

9:00 AM

10:00 AM

2. In your JavaScript, use the data attributes to pass the additional parameters to the modal dialog:

javascript
$('.time-slot').click(function() {
var time = $(this).data('time');
var person = $(this).data('person');

$.modal('

Time: ' + time + '

Person: ' + person + '

');
});


In this example, when a user clicks on a time slot, the `time` and `person` data attributes are retrieved from the clicked element using jQuery's `data()` method. These values are then passed to the modal dialog using the `$.modal()` function.

You can modify the content of the modal dialog to load data via AJAX based on the `time` and `person` parameters passed from the clicked element.

I hope this helps! Let me know if you have any further questions.