Pass parameter from parent to modal

JavaScript
1

Played with this for a while now and what I thought would be quite simple, I can’t seem to do. I have a template that’s populated from db…including an item id. This item id needs to be passed onto a report form.

I’m using featherlight as a modal window.
Parent doc has…

<a id="modal" href="report.html .outter-ajax-container" data-featherlight="ajax">
                    <span id="option-ri" class="inner">Report item</span></a>

featherlight js has

$.extend(Featherlight, {
	id: 1,                                    /* Used to id single featherlight instances */
	autoBind:       '[data-featherlight]',    /* Will automatically bind elements matching this selector. Clear or set before onReady */
	defaults:       Featherlight.prototype,   /* You can access and override all defaults using $.featherlight.defaults, which is just a synonym for $.featherlight.prototype */

I thought it would be idea to set the featherlight id to the item id and tried along the lines of

<a id="modal" href="report.html .outter-ajax-container" data-featherlight="ajax", "2">

but not sure if this works or how to call this back from the modal.

2

if parent page has <span id="item-id">112233></span>
and modal page has

div id="itemnum">
<script>function myFunction(){
if (parent.document.getElementById('item-id') != null) {
    var str = parent.document.getElementById('item-id').value;
}
else {
    var str = "no id";
}
return str}
</script>

<script>
document.getElementById("itemnum").innerHTML = myFunction();
</script>
</div>

`
str should get passed item id value, no? But this keeps returning no id :frowning: Have tried removing/adding .value

3

Can you not pass the ID in the URL?

<a id="modal" href="report.html?id=2 .outter-ajax-container" data-featherlight="ajax">
1 Like
4

Maybe…if the href id can be made dynamically, but then have to capture the id from the url…

now I’ve got as far as assigning the id to a variable… just need to get access to this from the modal…

parent doc gets id via

  <script>
 $("#option-ri").click(function () {
 var item_id = $(this).data("item-id");
});
 </script>

modal form has below… tried item-id / item_id… and cant even get the button to show the id…say function getid undefined :frowning:

<button onclick="getid()">ID</button>

<script>
function getid(){
if (parent.document.getElementById('item-id') != null) {
var str = parent.document.getElementById('item-id').value;
}
else {
str="9"
}
return str}
</script>

Something is going terribly wrong! Why would getid() function give error function undefined?

5

You mention that you’re getting data from a DB, so I’m assuming you’re using a server-side language like PHP or Ruby? Data you pass in the query string as I suggested will be available to your code that runs on the server. In PHP, it’s as easy as:

$id = $_GET['id'];

What exactly do you need to do with the ID value?

6

well each item will have an id number…also each item gets a report link that opens in modal. When a report is sent, we need to know which item this refers to hence the id passing

7

OK, so unless I’m missing something, passing the ID in the URL is the way to do it. This will allow you to do whatever you need to do to generate the report on the server. All the modal has to do is display the returned page.

8

Sure it can be one of the ways to do it. But we still need js to capture the id from url or from the passing of a variable

9

This is the part I’m having trouble to understand - what do you need to do in JS that requires the ID from the clicked link? If I understood this, I could offer more specific advice.

Looking at the featherlight docs, there are several callbacks you can pass (beforeOpen, beforeContent, afterOpen and afterContent) which receive the click event as an argument, so you could do something like this:

<a id="modal" href="report.html .outter-ajax-container" data-featherlight="ajax" data-item-id="2">

In featherlight config object:

afterContent: function(e) {
    var id = $(e.target).data('item-id');
    // do something with id
}
10

This is the part I’m having trouble to understand - what do you need to do in JS that requires the ID from the clicked link? If I understood this, I could offer more specific advice.

All we need is for the ID to be mailed to us. Asides from this, the ID is of no use.

You see we have a generic template that all item contents get loaded into. Each generic template has a report item and an assigned ID that refers to the item. Then in a separate file we have the report form which is loaded as a modal via ajax. The problem is that when a complaint or problem is reported about the item, we have no idea what item is being reported unless we are able to see the ID. This is why we need to pass the ID of the item to the report form when it’s loaded and sent.

I attempted what you said above and put the below in the separate report form. Would also need the featherlight.js included right…and this is expecting item-id to be on the same page?

 <script>
afterContent: function(e) {
    var id = $(e.target).data('item-id');
    alert (id);
}
</script>

I typed id into console and get id undefined… (item-id) is not on the same page so need .parent or soemthing?

Sorry for my lack of experience here =/

11

Modal/lightbox plugins usually insert the AJAX content into the active page, so you don’t need to call parent. Any JS running on the page has access to the new content too.

What I meant was to pass the afterContent function as a configuration option to featherlight, but re-reading the docs I see there’s an alternative that you might find easier:

In the main page:

$.featherlight.defaults.afterContent = function(e) {
    // put your item ID here when the page is rendered on the server
    var id = <?php echo $itemId ?>; 
    // set hidden form field to value
   $('#myHiddenField').val(id);
}

I’ve used PHP in my example above, but obviously change this for whichever language you’re using on your server.

12

Thanks for your patience here Fretburner…I must be retarded, cause I can’t get this going!!

I have…

<a href="report.html .outter-ajax-container" data-featherlight="ajax" >
                    <span id="option-ri" class="inner">Report item</span></a>

and

 <script>
$.featherlight.defaults.afterContent = function(e) {
  var id = 99;
 $('#numdisplay').val(id);
}
</script>

Above is on the main page. Thought I’d just put a static variable for now until I get it displaying. The featherlight.afterContent function(e) I have placed before, in and after the link that calls featherlight.

The report form simply has:

ID = <div id="numdisplay"> </div>

with css of display:inline-block / color /

As it stands if i console id I get undefined (on main page)
if I remove $.featherlight.defaults.afterContent = function(e) from the script and console id I get the correct return of 99.

Obviously I’m doing something retarded here… I really need to read up and learn this! Should be relatively simpler for me as my degree is in c++, but that was over 10 years ago and haven’t touched it since =/

13

Ah, when you said form I thought you meant a HTML form, but you’re talking about a printable form? As you’re trying to add the ID to a DIV rather than a form element, you need to use:

$('#numdisplay').text(id);

to set the content of the DIV.

14

:smiley: Thank you very very much. All is fine now.

I’ve just set it to a div for now, so I know it’s functioning as intended. I’ll change the div to a form, so it gets posted along with other form content.

Thanks again…much much appreciated

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.