When you click a cell on Dojo dgrid, a LightBoxNano popup will be launched

Is it possible to trigger a LightBoxNano image popup by clicking on a cell within a dgrid?

I'm curious how I can make this happen.

Any advice would be greatly appreciated!

Below is a snippet of code that may help:

    var columns = [
    {
        label: 'Picture',
        field: 'filename',
        formatter: function(filename){
            return '<div class="icon" style="background-image:url(/images/client/thumbnails/' + filename + ');"><a data-dojo-type="dojox.image.LightboxNano" class="iconlink" href="/images/client/' + filename + '">&nbsp;</a></div>';
        }
    },
    Editor({label: 'Type', field: 'filetype', widgetArgs: {store: filetypeStore, maxHeight: 150, style: "height: 20px;"}}, FilteringSelect),
    Editor({label: 'Subtype', field: 'filesubtype', widgetArgs: {store: filesubtypeStore, maxHeight: 150, style: "height: 20px;"}}, FilteringSelect)
];

Could there be something missing in the implementation?

Your insights are welcomed and appreciated!

javascriptajaxdojolightboxdgrid

Answer №1

Instead of using a Lightboxnano, I decided to go with a Dialog.

    When a user clicks on the icon link in the image list, the following action is triggered:
    - Prevent default action
    - Retrieve data from the clicked element's href attribute
    - Create a new Dialog instance with the title "Pic: [specific data]" and content containing an image tag referencing the retrieved data.

    The newly created dialog is then displayed.

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

What could be the reason for v-model not functioning properly within vue.extend?

I've configured a page structure similar to the following: <main id="app"> <div id="mount-place"></div> </main> <script type="text/x-template" id="my-template"> ...some code her ...

javascriptdjangovue.js

Combining and organizing Javascript files for efficient loading and reusable code functionality

I've been tasked with cleaning up a project that contains around 45-50 separate .js javascript files. I'm trying to figure out the most effective way to reduce their loading size. Should I combine all the files into one using npm or gulp? Or shou ...

javascriptnpmgulpbundle

Why am I receiving an error message stating "undefined is not a function" when trying

I am attempting to create a popover using the Angular UI pop over feature. I have loaded my HTML and compiled it, but when I run my program and click on the star icon (where I display the popover), I receive an error stating that 'undefined is not a f ...

javascriptjqueryangularjs

Is Ajax better suited for post or get requests?

My main use for Ajax has been as a POST method to handle tasks. However, I recently attempted to open a simple login page within a DIV (and successfully did so). The issue arose when I added the following PHP code: <?php if (isset($_POST)) { } else { ...

phpajax

How can images from a dynamic table be converted to base64 format in Vue.js and then sent in a JSON file?

Hello everyone, I'm facing an issue with a dynamic table where I need to add multiple rows, each containing a different image. I attempted to convert these images to base64 format and save them in a JSON file along with the table data. However, the pr ...

javascripthtmlvue.jshtml-tablevuetify.js

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

javascriptjqueryhtml

What could be the reason for my submit button failing to submit data to mySQL?

My PHP form, referred to as "php1," utilizes AJAX to populate input text boxes from a MySQL database using a secondary page called "php2." The issue I am facing is that the submit button on php2 does not work properly, unless I test php2 individually. When ...

phphtmlmysqlajaxforms

Discovering information from a URL through JSON

Can someone help me with loading and displaying this JSON data? I attempted the following code, but unfortunately, it did not work as expected. <script> $(document).ready(function(){ $.getJSON("http://eolis-sante.com/eolis/connexion.php? ...

javascriptjqueryjson

Insert an item into an array of objects at regular intervals of X objects

Here is an example of the array of objects I am working with: [ {_id: "59b6433532b60cfc0a253cec", description: "", imagepath: "https://xxx.1", likes: 0, downvotes: 0} {_id: "59b6433532b60cfc0a253ceb", description: "", imagepath: "https://xxx.2", ...

javascriptarrays

Dealing with the response data from $http request in AngularJS

Below is the client-side code written in AngularJS (which is functioning properly): $scope.ajaxLogin = function(){ var fn = document.getElementById("username").value; var pw = document.getElementById("password").value; $http({ url: "my ...

javascriptphpajaxangularjsionic-framework

"Troubleshoot: Issue with React's useState hook not correctly updating state within an

I'm running into an issue with updating state using the useState hook in a React functional component. The problem arises when I have an async function (getPalettesPosition) that fetches data based on the current state (paletteFilters). Despite confir ...

javascriptreactjsnext.js

Updating individual state item properties with React Redux

My reducer contains a list of characters, which is displayed in another component within my app. In addition, there is a separate container with an SVG illustration featuring various characters. Each character in the illustration has an id attribute that m ...

javascriptreactjsreduxreact-reduxstate

Troubleshooting Issue with Public File Serving in ExpressJS Deployment (NodeJS/Express)

The directory structure of my project is organized as follows: my_project server.js app.js | | - public | ----------| images | javascripts | stylesheets | -------------- imgs ---scripts.js ---styles.css | | - routes | | - views | ...

javascriptnode.jsexpressstatic-files

Using Telerik grid with Razor and VB.NET in Ajax binding mode

I'm currently working on implementing a Grid in MVC3 using Razor and VB.NET. While the regular grid functions correctly with sorting and pagination, I encounter an internal server error (500) when attempting to implement Ajax binding for next page loa ...

ajaxasp.net-mvcvb.netrazortelerik

What is the process for extracting a .swf file from the Rails Asset Pipeline without using any helper methods?

Currently, I am developing a Rails/React application without utilizing the react-rails gem. The project is organized into separate directories for front-end and back-end code. My current task involves creating a cross-browser solution for embedding webcam ...

javascriptruby-on-railsreactjsactionscript-3flash

Performing a Dojo Ajax call to a Node.js server

I have been attempting to send an ajax request to a Node server using the Dojo library in my client. However, I am facing issues with having the Node server extract the value from my Dojo request. My intention is to utilize this value on the Node server, p ...

node.jsajaxdojo

Display array elements without numerical indexes

Consider the code snippet below: for(i=0; i<3; i++){ a = {}; a['name' + i] = i; data.push(a); } This code will generate the following array: { 1:{name0:0}, 2:{name1:1}, 3:{name2:2} } How can I modify the code ...

javascriptarrays

JQueryMobile 1.3.2 encounters issues with popups following the installation of Chrome version 43.0.2357.65 m update

Is anyone else experiencing issues with the latest version of Chrome "43.0.2357.65 m" causing problems with JQueryMobile 1.3.2? When I try to click on a popup, it suddenly jumps to the top of the page and the scroll bar disappears. This was not an issue in ...

javascripthtmlgoogle-chromejquery-mobilejquery-mobile-popup

Having trouble with jQuery's getJSON function throwing an error?

I have been working on a project where I am using the getJSON function to fetch JSON data from an API that I am developing. However, I am facing an issue where the getJSON function always triggers the error handler. Below is the JavaScript code I am using: ...

javascriptjqueryjsoncakephp

When using h:commandButton and f:ajax without an action property, the h:dataTable will not be rendered

I have a form containing a dataTable and an edit section with input fields to modify the data in the table. I am looking for a way to refresh the dataTable after clicking on a commandButton: <f:ajax> <h:panelGroup id="timesheet_panel"> & ...

ajaxjsf