Is it possible to dynamically assign trigger and target divs to bPopup?

Question

Is it possible to dynamically assign trigger and target divs to bPopup?

On our ColdFusion page, we have a dynamic list of paired divs created using a loop over a query. For example, each pair consists of internshipHandleX and internshipHiddenX:

<div id="internshipHidden#internship.currentrow#" class="hidden pop-up">

We aim to connect these divs as modal windows along with their corresponding triggers. The following code snippet demonstrates our attempt:

for (var row = 1; row <= totalInternships; row ++){
    var thisHandle = "#internshipHandle" + row;
    var thisHidden = "#internshipHidden" + row;
    $(thisHandle).click(function(e){
        e.preventDefault();
        $(thisHidden).bPopup({modalColor:"black"});
    });
}

However, it appears that all the internshipHandle elements are being linked to the last internshipHidden element. What could be causing this issue? Is there a more efficient way to create modal windows from dynamically generated hidden divs within the existing framework without resorting to completely changing to Bootstrap?

Although DreamWeaver discourages placing functions inside loops, some experienced developers advise against heeding its warnings.

Edit: I attempted the same approach with jQueryUI dialog and encountered similar challenges. Any insights or explanations would be greatly appreciated. Thank you!

javascript jquery css coldfusion bpopup

Answer 1

Answer №1

Greetings from the world of Javascript! You've just stumbled upon a closure in its natural environment.

If you want the row variable to behave as expected, you'll need to pass it within its own scope. This can be achieved using a closure. If you're curious to learn more, delve deeper into this topic, but for now, here's a workaround for your issue:

var totalInternships = 2;

for (var row = 1; row <= totalInternships; row++){
    var bindInternship = function(rowIndex) {
    $("#internshipHandle" + rowIndex).click(function(e){
          e.preventDefault();
          alert('pop-up #' + rowIndex);
          //$("#internshipHidden" + rowIndex).bPopup({modalColor:"black"});
        });
    };
    bindInternship(row);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" id="internshipHandle1">pop-up 1</button>
<div id="internshipHidden1" class="hidden pop-up">

<button type="button" id="internshipHandle2">pop-up 2</button>
<div id="internshipHidden2" class="hidden pop-up">

Note: The line for bPopup is commented out. Uncomment it, remove the alert, and you're good to go.

Answer 2

Greetings from the world of Javascript! You've just stumbled upon a closure in its natural environment.

If you want the row variable to behave as expected, you'll need to pass it within its own scope. This can be achieved using a closure. If you're curious to learn more, delve deeper into this topic, but for now, here's a workaround for your issue:

var totalInternships = 2;

for (var row = 1; row <= totalInternships; row++){
    var bindInternship = function(rowIndex) {
    $("#internshipHandle" + rowIndex).click(function(e){
          e.preventDefault();
          alert('pop-up #' + rowIndex);
          //$("#internshipHidden" + rowIndex).bPopup({modalColor:"black"});
        });
    };
    bindInternship(row);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" id="internshipHandle1">pop-up 1</button>
<div id="internshipHidden1" class="hidden pop-up">

<button type="button" id="internshipHandle2">pop-up 2</button>
<div id="internshipHidden2" class="hidden pop-up">

Note: The line for bPopup is commented out. Uncomment it, remove the alert, and you're good to go.

Is it possible to dynamically assign trigger and target divs to bPopup?

Answer №1

Similar questions

Are NPM and Eslint supposed to be this confusing, or am I missing something?

Issue with the useState hook not correctly updating a value

"Exploring the density of the xAxis in Highcharts

Combining the value of $(this) to create an identifier name

Is there a way to create a customized select handle using CSS?

Generate dynamic routes in Next.js only when needed

Exploring the World of Infinite Scrolling with React.js and Material_ui

Distance Calculator for Geolocation WatchPosition

Selecting a range of two months in the datepicker

Getting the iframe onload event in an ASP.NET application

How can I optimize the performance of JS-heavy pages on mobile devices?

What is the best way to create an `isHook` function in my code?

Is there a way to change a parent's style for only one specific child?

The function to navigate, 'navTo', is not defined and so it cannot be read

Finding the current week using date information from an array of objects in JavaScript

Trouble arises with the jQuery keydown function

Steps to access arrays that are embedded in a file and are loaded asynchronously

The Google map only displays a quarter of the screen on the left side

Understanding the significance of the argument in the context of `express.json({ extended: false})`

Place a material-ui React component at the center of a footer section