Launching a segment from a different page within a foundation reveal modal

With the goal of displaying a modal that contains content from a section on another page when a link is clicked, I encountered a specific issue. For instance:

<a href="/otherpage" data-reveal-id="myModal" data-reveal-ajax="true">

Click Me For A Modal

The challenge lies in wanting to display only a portion of the page - specifically a section from an accordion dropdown that should be expanded within the modal. For example:

<dl class="accordion accorborder" data-accordion="">
        <dd class="accordion-navigation">
            <a href="#p1">Math Foundations I Sem 1</a>
            <div id="p1" class="content">
                <div class="row">
                    <div class="small-6 columns">
                        <h6>code:</h6>HS-ES-38
                        <h6>Offerings:</h6> xxx
                    </div>
                    <div class="small-6 columns">
                        <h6>Course Materials:</h6>
                        <ul>
                            <li><a href="xxx">Syllabus</a></li>
                            <li><a href="xxx">Course Contract</a></li>
                            <li><a href="xxx">White Board</a></li>
                        </ul>
                    </div>
                </div>
                <p>blah</p>
                <dl class="tabs" data-tab="">
                    <dd class="active"><a href="#p1a">Study Sheets</a></dd>
                    <dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
                    <dd><a href="#p1c">Graded Assignments</a></dd>
                    <dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
                </dl>
                <div class="tabs-content">
                    <div class="content active" id="p1a">
                        <ul>
                            <li><a href="x"> example </a>
                        </ul>
                    </div>

To specify a particular section of the page, could using ID be a solution? Like so:

<a href="/otherpage#XID" data-reveal-id="myModal" data-reveal-ajax="true">

Is there a way to achieve this using this method? If yes, how?

javascriptajaxzurb-foundationzurb-reveal

Answer №1

Managed to make it work with Angular Foundation, found more information at this link

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

The functionality of Directive hinges on the use of a template

I am exploring a more web-component approach to using Angular. As part of this, I have developed an http-request directive with url and response attributes. The implementation is successful, but I find that my directive relies on a template unnecessarily. ...

javascriptangularjs

The onpopstate event listener is specifically targeting a single page range

I have implemented a function that pulls dynamic content from a database, triggered by specific link clicks: Utilizing jQuery <script> function loadContent(href){ $.getJSON("/route", {cid: href, format: 'json'}, function(results){ $("#c ...

jqueryajaxpushstatepopstate

jQuery.get() function is limited to specific types of webpages

I have successfully combined multiple weather APIs on my website, which can be found here. Recently, I started using the weather.gov API and it has been quite effective. However, there are certain data points that I need to extract which the weather.gov A ...

javascripthtmljqueryajaxget

AJAX - Implementing a delay in displaying AJAX results

My search function uses AJAX to retrieve data from the web-server, and I am trying to implement a fade-in animation for each search result. I want the results to load and fade in one by one with a slight delay between them. Currently, it seems like all th ...

javascriptjqueryhtmlcssajax

Unsuccessful attempt at testing RequireJS in a straightforward manner

As a beginner in RequireJS, I am currently experimenting to gain some experience. My goal is to make require load basic Angular first and then manually bring in Angular UI Bootstrap. However, I am encountering an issue where UI Bootstrap complains that ang ...

javascriptjqueryangularjsrequirejsangular-ui-bootstrap

What could be the reason behind Cesium viewer's failure to show a model after I upload it?

My application features a 3D map of a city with an "Add building" button. Upon clicking this button, a model of a building should be inserted into the map. However, all I see is a selection marker at the intended location without the actual building appea ...

javascriptjavaangularjsspring-bootcesiumjs

Header-driven redirection

I am using node js and express js. My goal is to ensure that if app.get does not have a token parameter, then an html file with js will be uploaded to pass the token. If the token is passed, then another html file should be displayed. However, I am unsure ...

javascriptnode.jsexpressnodes

Encountering a 304 status error in the HTTP GET response after deploying a React app on Netlify

After deploying my react application on Netlify, I used the npm run build command to create the local scripts and manually deployed them in production mode on Netlify. The build scripts were generated on my local machine and then uploaded to the Net ...

javascriptreactjsnpmnetlify

Don't let noise linger in the background unnoticed

Within my HTML table, there are 32 cells that each possess an onclick="music()" function. This function is currently functioning correctly, with one small exception. I desire for the functionality to be such that whenever I click on a different cell, the m ...

javascripthtml

Unable to retrieve HTML content through a Node.js server

I created a HTML webpage that includes .css, images and JavaScript files. However, when I start my node server using the command below: app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); The webp ...

javascripthtmlnode.js

"Enhance your website with the magic of jQuery magnific-popup

Is there a way to add an additional button to the jquery magnific-popup component that can close the dialog box? I am currently utilizing this component to insert descriptions for photos, so I need a submit button that will successfully add the descriptio ...

javascriptjqueryjquery-uijquery-dialog

Issue with Jquery's .html() function not functioning properly when trying to select HTML

I am currently working on a piece of code that looks like this: $price = $(element) > $('.main_paket_price').attr('name'); alert($price); Basically, I am trying to select an element inside element which has the class main_paket_pri ...

javascriptphpjqueryhtmlcss

When attempting to print a Rectangle on my webpage using JavaScript and taking user input, I encountered an error stating that 'str' is not defined

I'm trying to implement a feature where clicking on the "try it" button will prompt the user for the number of lines and then print that many lines in the form of a rectangle. However, when I run my code, nothing appears on the DOM and there is an err ...

javascripthtmlnode.jsreactjstypescript

What is the process for reaching application-level middleware from the router?

Within my project created using express application generator, I am facing a challenge accessing my application-level middleware from the router. This middleware is specifically designed to query the database using the user ID that is received from the ro ...

javascriptnode.jsexpressmiddleware

What is the preferred method for implementing a dynamic select control with Ajax

I'm having an issue with AJAX and MySQL in PHP. Can anyone offer assistance? Within my form, I have a select control: <form action="index.php" method="post" name="pretraga" class="border"> <p>Location:</p> <div ...

phpjavascriptmysqlajax

PhantomJS encountered a TypeError when trying to access a non-existent object during the evaluation of 'document.getElementById()'

Recently, I delved into the world of PhantomJS and its ability to extract data from websites through JavaScript. This process is commonly referred to as web scraping. My goal was to retrieve the text content of an element by its ID. However, I encountered ...

javascripthtmldomweb-scrapingphantomjs

Guide to extracting information from a Node.js http get call

I am currently working on a function to handle http get requests, but I keep running into issues where my data seems to disappear. Since I am relatively new to Node.js, I would greatly appreciate any assistance. function fetchData(){ var http = requir ...

javascriptnode.jshttpgetrequest

The TypeScript compiler is unable to locate the name 'window'

Within my Meteor/React project, I encounter the following line of code: let gameId = window.prompt("Please input the ID of the game you would like to load."); The TypeScript compiler presents an error during transpiling: Cannot find name 'window&apo ...

javascripttypescriptmeteor

Retrieve binary data of an image from an API and render it on an HTML page

I have been working on storing images in a MongoDB database and trying to display the response I receive from an Express API as an image on the client side. The image source URL looks like this: src="/image/data/5a44dde172aa021d107e7d33" When I try to wr ...

javascriptnode.jsexpressmongoose

Having trouble uploading Node.js and Mongoose to Heroku due to error codes H12 and H15? Need help troubleshooting and resolving this issue?

Attempting to deploy my Node, mongoose, express app on Heroku for the first time has been a challenge. The application is a simple blog with a login system. Despite extensive research and effort, I am struggling to successfully host it. Below is the error ...

javascriptnode.jsexpressherokumongoose