Creating an engaging Uikit modal in Joomla to captivate your audience

I need help optimizing my modal setup. Currently, I have a modal that displays articles using an iframe, but there is some lag when switching between articles. Here is the JavaScript function I am using:

function switchTitleMod1(title,id) {
    document.getElementById("titleMod1").innerHTML = title;
    document.getElementById("iframe").src = "index.php?option=com_content&view=article&id="+id+"&tmpl=component";
  }

Here is the modal code:

<div id="informacje" class="uk-modal">
  <div class="uk-modal-dialog" >
    <a onclick="resetTitleMod1();" class="uk-modal-close uk-close"></a>
    <div id="titleMod1" class="uk-modal-header uk-text-bold uk-text-large uk-text-center"><h2>Sign up for a course</h2></div>
    <iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id="34"&tmpl=component" hspace="0">
  </iframe>
    <div class="uk-modal-caption">Copyright by MRP-KODER</div>

To trigger the modal, I use this link:

<a onclick="switchTitleMod1('HACCP Training','42');" href="#informacje" data-uk-modal="{target:'#informacje',bgclose:false,center:true}" class="uk-button uk-button-medium uk-button-primary">                    <i class="uk-icon-info uk-icon-justify"></i>Information</a>

My question is: How can I create a more efficient modal using jQuery to manipulate the DOM? Visit the page here and click on "Information" to see the issue.

javascriptjqueryhtmlcssuikit

Answer №1

After some experimentation, I was able to find a solution on my own without using the DOM model. Surprisingly, it worked perfectly, allowing me to switch between different modals simply by changing the button ID.

var $jq = jQuery.noConflict();
        $jq(document).on('click', '#info', open_info_modal).on('click', '#zapytaj', open_ask_modal);
        function open_info_modal(e)
        {
            var articleId = $jq(e.target).data('id');
            var articleTitle = $jq(e.target).data('title');
            $jq('#modal').on({
                'uk.modal.show':function(){
                        $jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
                    $jq('span', $jq(this)).html('<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id='+articleId+'&tmpl=component" hspace="0">');
                },
                'uk.modal.hide':function(){

                }
            }).trigger('uk.modal.show');
        }
        function open_ask_modal(e)
        {
            var articleTitle = $jq(e.target).data('title');
            $jq('#modal').on({
                'uk.modal.show':function(){
                        $jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
                    $jq('span', $jq(this)).html('<iframe id="iframe2"style="width: 100%;height:600px" scrolling="auto" frameborder="0" src="index.php?option=com_chronoforms5&chronoform=zapytaj-szkolenie&tmpl=component&name1='+articleTitle+'" hspace="0">');
                },
                'uk.modal.hide':function(){

                }
            }).trigger('uk.modal.show');
        }

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

Guidelines for dynamically passing HTML attribute values into a CSS selector using a variable in Protractor

After successfully locating the button on the row using its value stored in the "title" HTML attribute, I am now faced with the task of passing a dynamic value to this attribute. To achieve this, I have declared it as a variable. However, I am unsure about ...

cssprotractor

Can you tell me the alternatives for getServerSideProps and getStaticProps in Next.js version 14?

I'm trying to wrap my head around the rendering behavior of SSR/SSG/ISR in Next.js version 14 with the updated app router. Previously, Next.js provided predefined functions like getServerSideProps for server-side fetching and processing (SSR), or getS ...

javascriptnext.js

Deciphering the '$' symbol in the Cheerio API

I'm feeling a bit confused about the significance of using the $ sign in the Node.js Cheerio API. Take for instance the snippet of code below: if(!error){ var $ = cheerio.load(html); var title, release, rating; var json = { title : "", ...

javascriptjquerynode.jscheerio

Transitioning to the Bootstrap library from the jQuery library with the use of several image modals

After coming across this specific question about implementing multiple image modals on a webpage, I noticed that it primarily focused on javascript and jQuery. However, my project involves utilizing the latest version of Bootstrap, so I'm curious if t ...

javascriptjquerybootstrap-5

Generate a sequence of years without relying on the range function

Is there a different approach to generating this array without relying on the range function? Below is an illustration of what I want, but without utilizing the range method. const years = myCustomArrayGeneration(1990, getYear(new Date()) + 1, 1); ...

javascriptarraysreactjs

Ways to conceal rows within an implicit grid

In the code snippet below, CSS Grid is used to adjust the number of columns for wider containers. When dealing with narrower containers (such as uncommenting width: 80vw or resizing the example), implicit rows are added (with only two being specified in th ...

htmlcsscss-grid

Is there a way to ensure that the await subscribe block finishes before moving on to the next line of code?

My goal is to utilize the Google Maps API for retrieving coordinates based on an address. In my understanding, using await with the subscribe line should ensure that the code block completes before moving on to the subsequent lines. async getCoordinates ...

javascriptangularasync-awaitangular-observable

Retrieve the row index in PHP after loading data onto a web page

I have been utilizing PHP to retrieve data from a MySQL database and showcase it within a DIV on a webpage. The information I am retrieving pertains to a list of tasks, and I would like users to have the ability to delete a task once it has been completed. ...

phphtmlmysqlrowid

An error occured when attempting to read the 'status' property of an undefined value in node.js, express.js, and mysql

I recently started working with node.js and encountered a challenge in fetching data from mysql and sending it to an API response. Below is my setup: db.js: var mysql = require('mysql2'); var util = require('util') const pool = mysql ...

javascriptmysqlnode.jsexpress

Discovering the way to retrieve background height following a window resize using jQuery

Is there a way to obtain the background height once the window has been resized? div { background-image: url(/images/somebackground.jpg); background-size: 100% 90%; background-repeat: no-repeat; width: 70%; background-size: contain; ...

javascriptjquerycssbackground

Generating a JSON object based on the selection of dynamic checkboxes

Hello everyone, I am new to jQuery so please be patient with me as I embark on this journey! My goal is to structure my data in the following format... { "qualifications": [ "1", "7" ], units: [ "7", "3", "1" ] } The HTML looks like ...

javascriptjqueryjsondynamic-forms

exploring the digital archives for a specific song file on the computer

Currently in the process of building a website, and I am looking to incorporate a search and filter feature for all music content so that users can play it on my player. Wondering if this is possible? Seeking some assistance and creative ideas to make thi ...

phpjavascriptjqueryajaxjquery-plugins

The functionality of the Hubot script is restricted to Slack conversations where I initiate a direct message with the

At this very moment, my automated Hubot assistant is functioning properly. When I send the following message via direct message to the robot in Slack: qbot !npm bower The response provided by the robot contains a link: https://www.npmjs.com/package/bowe ...

javascriptnode.jscoffeescripthubotslack

Error loading console due to JSON data on website

After creating a Json data file named question.json with the following content: "Endocrinology":[ { "title":"Endocrinology", "id": "001", "date":"08J", "question":"In adult men, anterior pituitary insufficiency does not caus ...

javascriptjqueryhtmljson

Is there a way to access the scrolling element on the current webpage?

When the route changes, I need to locate the element with scrolling functionality on the new page and scroll it to the top using window.scrollTo(0,0). How can I achieve this? Here is my current code snippet: if (process.client) { router.afterEach((to, ...

javascriptvue.jsscrollscrollto

Determine if a radio button is in an enabled or disabled state

<div id="statusOptions"> <label><input type="radio" name="status" value="T" checked> Temporary Waiver</label> <label><input type="radio" name="status" value="P"> Never Expires</label> <label><i ...

jqueryasp.netradio-buttonisenabled

Using NextJS: Customizing page names for cleaner URLs

Currently working on a project in NextJS, I've come across an interesting observation. The file name within my pages folder seems to directly correspond to the path displayed in the URL bar. My question is, can I possibly create a structure like this ...

javascriptnode.jsreactjsnext.js

Using AJAX to send both data input values and file attachments simultaneously to a PHP server

I am currently having an issue with sending form values to my PHP page using AJAX. My form includes text inputs and a file input for image uploads. Below are the AJAX codes I have been working on: function sendval() { var form = $('#user_update_for ...

javascriptphpjqueryajax

What characterizes a dynamic webpage?

Can someone help me figure out how to determine the number of dynamic pages on a website? I'm not sure if the presence of a form means the page is dynamic. Any insights would be greatly appreciated. Thank you in advance for your assistance. ...

htmldynamicstatic

Exploring the concept of utilizing named arguments within Express.js routing

I've searched extensively, but can't seem to find any information on this topic. My goal is to create requests like the following: url/list/message=hello?id=1234 Despite my efforts, I have not come across any resources on how to achieve this us ...

javascriptrestexpressurl-routing