UPDATE - the issue was resolved by incorporating
$('.popup-with-form').magnificPopup('open');The Initial Query:
I have a basic calculator located here:
Upon clicking the "Calculate" button, I want the results to be showcased on that page AND trigger an Ajax Popup (Magnific inline) revealing the results in a popup as well.
Inquiry: How can I ensure that pressing the "calculate" button accomplishes both of these tasks simultaneously:
1) Display the results on the page
2) Activate a popup displaying the calculator's results
Currently, in order to show the Popup, the user must click on the "Open Form" link.
If you open the popup WITHOUT clicking the "calculate" button, no results will be shown.
If you first click Calculate and then proceed to open the popup, the results will be visible both on the page and in the popup (refer to image).
The two triggers for opening the popup are:
<a class="popup-with-form" href="#test-form">
If I include class="popup-with-form" and href="#test-form" within the Calculate button, it launches the popup but without executing the calculation.
All codes related to the calculator (JS / PHP) can be viewed here.
This is the AJAX code responsible for opening the popup (I presume)
$(document).ready(function() {
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
// When element is focused, some mobile browsers may zoom in
// To prevent this, we disable it:
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});