featherlight.js - Execute code when modal is triggered

Situation with HTML

<div id="form-lightbox">
<div class="form">
    <div id="ajaxreplace">
        <script type="text/javascript"> 
            jQuery(function() { 
                jQuery.ajaxReplace({ 
                    //parameters
                });
            }); 
        </script>
    </div>
</div>
</div>
<a href="#form-lightbox">open lightbox</a>

Exploring a custom script that replaces the form from the backend.

The issue here is that featherlight.js duplicates the source and displays it in the lightbox, causing problems for handling forms.

To address this, I modified the script tag type to "text/x-template" to prevent direct execution. However, this prevented the form from being rendered in the lightbox.

Query: Is there a way to utilize featherlight to execute the script when loading the lightbox?

Answer №1

If you are looking to execute code after the lightbox has been opened, consider utilizing callbacks such as afterOpen.

To avoid content duplication, opt for the persist option.

Hope this helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Ajax call not displaying the jQuery dialog box

Could you please take a look at this jsFiddle link... The issue lies with a jQuery UI dialog box that uses an ajax request to fetch content. Unfortunately, all I see is a blank dialog and can't seem to pinpoint the problem. A snippet of the HTML cod ...

Determining the size of a custom-typed array in Typescript

Can anyone explain how to find the length of a custom typed array? For example: type TMyArray = IProduct[] interface IProduct { cost: number, name: string, weight: number } So, how can we determine the length in this case: const testArr: TMyArray ...

Transferring the values of JavaScript objects to HTML as strings

My goal is to generate HTML elements based on the values of specific JavaScript objects that are not global variables. However, when attempting to execute the code below, I encounter an error stating "params is not defined." What I actually aim to achieve ...

Revamping JavaScript Code for Better Performance

I've been working on a lot of code in the backend section of my website, mainly dealing with CRUD operations using AJAX calls. Do you have any suggestions on how I can refactor these functions into more generic ones or possibly create classes instead ...

Form modifications on wicket are no longer present after an ajax update

I am currently working on a rather large and intricate form that includes numerous form components. Within one of the drop down fields, I have implemented an AjaxFormComponentUpdatingBehavior to manage any changes in the dropdown selection. Based on these ...

Capture a screenshot of an embedded object and include it in an email using the mailto function

Is there a way to capture a screenshot of a flash object on a webpage and then send it via email using a mailto: form submission to a designated address? I have attempted to use different JavaScript techniques, but none seem to be successful. Appreciate a ...

Retrieving, storing, and implementing the classes of child elements directly from an array using jQuery

With the help of jQuery, you can retrieve child elements of the #parent element that have the class .west. In this case, we are not interested in fetching the content of these child elements but instead their class names. For example: <div id="parent" ...

How come it's not possible to modify the text of this button right when the function kicks off?

When I click a button, it triggers a JavaScript function. The first line of code within the function uses jQuery to change the HTML of the button. However, the button's text does not update in the browser until after the entire function has completed, ...

In iOS devices, the Ionic framework restricts the ability to open links in a new tab using the ng-href attribute

In my quest for mobile functionality, I'm aiming to implement a feature on devices where tapping will open 'codepen.io' (triggered by ng-click), and tap and hold will display a context menu with the option to 'Open In New Tab', red ...

It appears that using "object[prop]" as a name attribute does not function properly in HTML

After using console.log on the req.body I received this output: [Object: null prototype] { 'shoe[name]': 'Shoe Name', 'shoe[description]': '', 'shoe[pictures]': '', 'shoe[collections] ...

Learn how to establish a state using an array and effectively utilize the setState() method in React

For my latest project, which is API based, I am working with arrays that contain sub-arrays. How can I define a state with an array and utilize the setState() method to work with the entire array? ...

Initiate loading process upon page load, rather than triggering it upon a click event, utilizing ajax and PHP mechanisms

$(document).ready(function(){ $('button.load-html').click(function(){ $('#content-container').load('http://example.com/data.php?param=12345'); return false; }); }); Click here to trigger t ...

Node.js module mishap

In the package.json file I'm working with, these are the content of my dependencies: "devDependencies": { "chai": "^4.1.2", ... "truffle": "4.1.3" } A new NodeJS script called getWeb3Version.js was created: let web3 = require("web3" ...

In one application, there are two connections established with mongoose. The purpose of the second connection is to establish a dependency on the

Seeking advice: I am facing an issue where I need to establish two separate connections to the database. The first database contains login information, while the second holds all other relevant data. Can this be achieved through integration of Node.js, m ...

Building a hierarchical tree structure using arrays and objects with Lodash Js

I am attempting to create a tree-like structure using Lodash for arrays and objects. I have two arrays, one for categories and the other for products, both with a common key. The goal is to organize them into a tree structure using string indexing. let ca ...

Stop AJAX elements from loading if they do not have a parent container

Is there a way to prevent a page, such as "cart.php", that is typically loaded through ajax on another page like main.php from being accessed directly by the user? For instance, if cart.php is usually loaded into a local div on main.php using ajax, can we ...

Accessing HTML elements that are created dynamically in AngularJS

I am facing an issue where I cannot access a function within a newly created DOM element. Despite my best efforts, I can't seem to figure out what is causing this problem. $scope.createCustomHTMLContent = function(img, evtTime, cmname, evt, cust, ser ...

Unable to render Row using MySQL in conjunction with ReactJS

Recently, I started working on developing a table using ReactJS on the FrontEnd, NodeJS on the BackEnd, and MySQL for the database. I am trying to retrieve data based on a Select request using the primary key (Code) from the list. https://i.sstatic.net/tXP ...

How about displaying the Ajax response as an image?

I'm working on a script that pulls an image link, which seems to be functioning correctly. However, I am struggling with how to display the link as an image. Can someone please assist me with this? <script src="//ajax.googleapis.com/ajax/li ...

Is it possible to trigger an AJAX function automatically following the success of another AJAX function?

I am in the process of implementing a note system using procedural PHP and AJAX. This system should have the ability to display new notes without refreshing the page and load more notes dynamically without needing a full page refresh. Currently, each func ...