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?

Answer 1

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.