Can FancyBox be applied to a button in Ruby?

Can FancyBox be used on a button element?

 document.getElementById("btn-dispos").addEventListener("click", function(){
                $.ajax({
                    type: "get",
                    url: path_to_load_plages_dispo_fournisseurs,
                    data: {ids : ids},
                    success: function(data){
                        $('#btn-dispos').fancybox(
                            {type: 'ajax'},
                            fancyOptions
                        );
                    }
                });
            });

<button id="btn-dispos">Results</button>

I encountered the following error:

The requested content cannot be loaded. Please try again later.

Appreciate any help in advance!

Answer №1

Can FancyBox be used on a button? - Absolutely, it works regardless of the html element you choose to use.

However, it seems like your current code is a bit confusing. You are adding a custom click event handler to the #btn-dispos element, and then upon clicking the button, you are sending an ajax request and attaching another click event handler to the same element using $('#btn-dispos').fancybox(). This redundancy doesn't seem necessary. If your goal is to display the ajax response in FancyBox, simply use $.fancybox.open( your content )

Lastly, the error message you are receiving indicates that the content cannot be loaded. Double check your file path to ensure it is correct.

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

Is it possible to transfer a component's function as a property to a nested component in React?

I have a ListContact component and a ListSupplier component. ListSupplier is a child component of ListContact. The contact component contains a table with display results. The supplier component triggers a modal within the contact component, allowing a sel ...

Distinguishing between Javascript Array Objects and Array-Like Objects: An Elucidation

While attempting to convert an array-like object into a string using JSON.stringify, I discovered that the function was not working correctly when the array-like object was declared as an array object. For more clarity, please refer to the following --> ...

Collecting User Input Within an NgRepeat Directive Using AngularJS

I am working on an AngularJS application with an ngRepeat directive. Within this directive, there is a textbox that allows users to input numeric values. I want to capture this user input and perform actions based on it whenever the textbox changes. How ...

I am having trouble getting ngFor to properly render my accessible data. Whenever I attempt to use it, it ends up breaking my code. Can someone please

When using *ngFor to iterate through data, everything appears to be working fine until attempting to access nested data within an object inside another object. For example: { "tvshow": [ { "id": "value", "time": { "clock": "valu ...

How can you pick the element that is nearest to the top of a window?

My goal is to have a fixed list of page sections on the side that highlights the link of the section you're currently viewing as you scroll through the page. This is the code I've come up with: $(document).scroll(function(){ $allSections = $(&a ...

Is it possible to use cakephp and AJAX to determine if a table is empty?

Is there a way to determine if a table is empty using CakePHP and AJAX? In my index.ctp, I have included an image that, when clicked, will notify the user about the status of the table. If the table is empty, an alert box will pop up; otherwise, the user w ...

Create a datastring using a JSON object

When receiving data in JSON format from an AJAX call, the following code is used to parse it: var parsed=JSON.parse(data); An example output could look like this: {"confirm_type":"contract_action","job_id":12,"id":7} To generate a dynamic data string f ...

Explore the array by locating elements based on the initial two letters of each word in the array

In the given array, I am looking to find the first letters in multiple words within the same matrix. It should search through each word and return in an array if found. For example: const data= [ "the lions of teranga", "tiger ...

Having trouble rendering the React app; encountered an error: JSX contents are unterminated

I am currently facing an issue while trying to fetch data from an API in React using Axios. How can I ensure that useEffect functions properly? My objective is to create a page by fetching data from an API in React through Axios. I have designed a compon ...

Incorporating JavaScript into a Node.js project's Jade template

I'm attempting to integrate JavaScript into a jade template page. The code I have written is: script(src='/public/javascripts/scr1.js') and the JavaScript file is located in that directory. Within the script, I have written alert("doesnt wor ...

Utilizing Vue.js for Tabs in Laravel 5.8

I am encountering an issue in Laravel while attempting to set up a Vue instance for tabs. Currently, only Tab 1 and Tab 2 are displayed without any content, and the tabs themselves are not clickable links. Could this problem be related to how I am calling ...

Failed attempt to set a cookie on a different domain using ajax and php

Domain-Being-Browsed.com utilizes a javascript function that, when activated, initiates an ajax call to a php file on a separate domain: another-domain.com/set-cookie.php The set-cookie.php file includes the following code: header("Access-Control-All ...

Does a common function exist for a successful Ajax query?

One of my JavaScript functions is: function doWorkForJobCreate() { $.ajax({ url: '<%:ConfigurationManager.AppSettings["SiteRoot"]%>/Job/JobCreate', success: function (data, status, req) { if (!processFKErrorHeader(r ...

Getting the result from a JavaScript request, whether it's synchronous or asynchronous

This code snippet involves a function that starts with a synchronous comparison test == 0. If the comparison is true, it returns one piece of content; however, if it's not, an asynchronous request is made. The goal here is for the latter part to retur ...

How can I customize button colors in react-bootstrap components?

Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS? ...

Craft a specialized script for manipulating the DOM

I'm currently working on a project using Angular 2. I have implemented a menu that should be able to close when a button is clicked. Instead of using a component for the menu, I want to keep it lightweight by placing it outside of Angular. However, I ...

Setting the initial viewer position in Panolens: A step-by-step guide

I've been working on setting the initial viewer position for panolens.js for a while now. Here's how the set-up looks: const panoPhoto1 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-ti ...

Best practices for efficiently storing and retrieving data from a large list in PHP

Hello and thank you in advance for your assistance, I am currently faced with a challenge involving a list of one million names and their corresponding nicknames. Each name is paired with only one nickname, even if they happen to be the same. My usual ap ...

What is the best way to implement nested routing in React using the "exact" parameter for my specific use case?

Having some trouble accessing other components from the Router Home page. The current structure I'm using is causing the "404" page to not open. Additionally, when I add the exact path="/" parameter to the PrivateRoute, the Home component fails to ren ...

What makes an Angular project different from conventional JavaScript projects that prevents it from running in a browser like any other?

When attempting to run index.html from the dist folder in the browser, I encountered issues. This is different from an AngularJS application where simply importing the script file into index.html allows the application to work seamlessly. Why is it not po ...