How can I pass form values invisibly into a popup?

Question

I have a grid of records on my page, and each record has an edit button. Clicking the edit button opens a Magnific Popup, using ajax type, with an edit form for that row. I need to pass in the data for the current record so that I can pre-populate the form fields with the current data.

We were originally passing in fields through the URL - so the popup anchor would look something like this (with ColdFusion):

<cfoutput><a class="editRecord" href="editRecord.cfm?recordID=#recordID#&field1=#field1#&field2=#field2#<img src="../images/edit_icon.png" /></a></cfoutput>

And the code to invoke magnific popup:

$('.editRecord').magnificPopup({
    type: 'ajax',
    preloader: false
});

But we don't want to expose the ID in the URL. Is there any way to pass in the field values without exposing them in the URL?

May be it will help you https://api.jquery.com/data/ – Obaid Ahmed May 27 '15 at 12:39 — Obaid Ahmed, May 27 '15 at 12:39

score 1 · Accepted Answer · answered May 27 '15 at 13:17

Checking the Magnific Popup plugin documentation, you can find a section specific for the AJAX type. According to it, you can add AJAX options by using the ajax and settings properties:

ajax: {
  settings: null, // Ajax settings object that will extend default one - http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
  // For example:
  // settings: {cache:false, async:false}

You could use that option to send the AJAX using the POST method instead of the GET method (default), that way not exposing the fields in the URL.

Now, instead of adding the parameters in the address, you could have them as data- attributes, and add them dynamically to the call using .data().

The HTML:

<cfoutput>
    <a class="editRecord" href="editRecord.cfm" data-recordid="RecID" data-field1="val1">
        <img src="../images/edit_icon.png" />
    </a>
</cfoutput>

And the JavaScript initialization:

$('.editRecord').magnificPopup({
    type: 'ajax',
    preloader: false,
    ajax: {
        settings: {
            method: "POST",
            data: {
                recordID: $(this).data("recordid"),
                field1: $(this).data("field1"),
                // similar with the rest of the fields
            }
        }
    }
});

I tested that code locally... and it failed miserably. It's like this is not available inside the magnificPopup() function. I went around that issue by selecting the fields first and then applying the Magnific Popup plugin using the each() function like this:

$(".editRecord").each(function() {
    $(this).magnificPopup({
        type: 'ajax',
        preloader: false,
        ajax: {
            settings: {
                method: "POST",
                data: {
                    recordID: $(this).data("recordid"),
                    field1: $(this).data("field1"),
                    // similar with the rest of the fields
                }
            }
        }
    });
});

Maybe not the best solution, but it works in the tests I ran.

Thanks! Was looking for something like this but couldn't seem to find it in the docs. Will try implementing it. But then how do I access those data attributes from within the form code? — froadie, May 27 '15 at 18:21
how do you access those data attributes from within the popup? — froadie, May 27 '15 at 20:28
What do you mean? On the page, you can read the parameters from the POST (for example, I loaded a PHP file with AJAX and just had to do `$_POST["recordID"]` to get the value of recordID on my PHP code) — Alvaro Montoro, May 27 '15 at 20:35
Ok, so in CF that probably means it would be in the FORM scope. I'll test it out. Thanks — froadie, May 27 '15 at 20:53
From the URL scope. It does get sent to the form scope, but I had to change `method: "POST"` to `type: "POST"`. Still trying to figure out how to access the calling element from the code to avoid the "each" hack, but it works. Thanks! — froadie, May 28 '15 at 11:11

How can I pass form values invisibly into a popup?

1 Answers1