How can I subtly pass form values to the popup?
I have a grid of posts on my page and each post has an edit button. Clicking the edit button opens a Magnific Popup using the ajax type, with an edit form for that line. I need to pass data for the current record so that I can pre-populate the form fields with the current data.
We were initially traversing the 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 call the enlarged popup:
$('.editRecord').magnificPopup({
type: 'ajax',
preloader: false
});
But we don't want to show the ID in the url. Is there a way to pass field values without exposing them to the URL?
source to share
By checking the documentation for full-featured popup plugins , you can find a section related to AJAX Type . According to this, you can add AJAX options using properties ajax
and settings
:
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 can use this option to send AJAX using a method POST
instead of a method GET
(default), thereby not displaying fields in the url.
Now, instead of adding parameters to the address, you could use them as attributes data-
and add them dynamically to the call using .data()
.
HTML:
<cfoutput>
<a class="editRecord" href="editRecord.cfm" data-recordid="RecID" data-field1="val1">
<img src="../images/edit_icon.png" />
</a>
</cfoutput>
And 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 this code locally ... and it failed. It's this
not as available inside a function magnificPopup()
. I got around this problem by first selecting the fields and then applying the Magnific Popup plugin using a function each()
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
}
}
}
});
});
It may not be the best solution, but it works in the tests I ran.
source to share