Maximizing Efficiency: Utilizing a Single Panel across Multiple HTML Files with jQueryMobile

Can a panel defined in index.html be used on another page, such as results.html? Or do I have to define the panel on every page and duplicate the HTML code on each page?

Because I want the panel to be consistent across all pages.

This is the panel in my index.html:

<div data-role="page" id="home">
    <div data-role="panel" id="mypanel">
        <!-- panel content goes here -->
    </div>
    <!-- /panel -->
    <div data-role="header">
        <!-- beginning of header -->
        <div data-role="navbar" data-id="navbar">
            <!-- beginning of persistent navbar, this navbar will be shown in all
            pages -->
            <ul>
                <li> <a href="index.html" data-icon="search" class="ui-btn-active ui-state-persist">Search</a>

                </li>
                <li> <a href="#mypanel" data-icon="bars">More</a>

                </li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>
    <!-- /header -->
    <div data-role="content" id="content">
        <!-- content -->
    </div>
    <!-- /content -->

Answer №1

If you have two pages within the same domain, it is possible to easily incorporate a specific element from one page into another using JQuery.

However, one downside to this approach is that it may not be very beneficial for SEO since the links are dynamically loaded onto the page.

To achieve this, you will first need to include the JQuery library and then create a new div on your target page, such as:

<div class="new-sidebar"></div>

You can then use JQuery to load the contents of this div by utilizing the following code:

$('.new-sidebar').load('index.html #mypanel');

Edit based on comments:

$( "#navbar ul li" ).click(function() {
  $('.new-sidebar').load('index.html #mypanel');
});

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 causing my directive to not display my scope?

I am currently developing a directive that includes a custom controller, and I am testing the scope functionality. However, I am facing an issue where the ng-show directive is not functioning as expected when trying to test if the directive has a scope fro ...

Do additional MySql tables have an impact on the speed of searches within a MySql database?

I am in the process of considering a database redesign for my classifieds website. Currently, I have 7 different tables in the database, each corresponding to a "MAIN CATEGORY". For instance, there is a "VEHICLES" table that contains information on variou ...

Ways to show an input box even when there are no results found

I currently have a database with 5 books, but only 3 of them have prices listed. How can I modify my code to display an input box for all books, regardless of whether they have a price in the database? I am new to coding, so I would appreciate it if you co ...

Leveraging an external global variable file that is not incorporated into the bundle

I have a JavaScript file dedicated to internationalization. I am looking for a way to provide this file to clients for them to edit without requiring me to rebuild the entire project. Currently, I store this file in the static folder so it is included in ...

Submit a Bootstrap modal with AJAX and receive blank $_POST data

After setting up my modal form with pre-defined data, I encountered an issue when trying to submit it with ajax. The form.php script was receiving an empty $_POST array even though the submit button was being clicked. What could be causing this problem? & ...

Can one access the method definition within a Visual Studio Code setup for an AngularJS project?

I'm on a quest to locate the method definition within my AngularJS project, but alas, I am struggling to discover a quick and easy shortcut for this task. My attempts with Ctrl + Click only led me to the initial occurrence of the variable's decla ...

Learn how to verify changing form inputs with Vue watchers. The challenge of numbers

Currently, I am working on a sum application and encountering some challenges with input validations. I have implemented Watcher to handle the validations, and I am exploring the possibility of adding sound and color feedback for accurate validation. Repo ...

Passing the v-model property from a child component to a parent in VueJS

Consider a scenario where there is a Vue component structured like the following: Vue.component('child-comp',{ props:['name', 'val'], data: function(){ return { picked: '' } }, ...

What is the reason for the additional space and irregular alignment of my divs when utilizing the 960 grid system?

One issue I'm facing is that elements within divs are aligning randomly without responding to any alignment tags. Additionally, some divs are creating extra space above or below their elements. I am using the 960 grid system and have not made any chan ...

Can AJAX function properly when the server-side code is hosted on a separate domain?

After opening Firefox's scratchpad and inputting the following code... function ajaxRequest() { var xmlhttp; var domainName = location.host; var url = 'http://leke.dyndns.org/cgi/dn2ipa/resolve-dns.py?domainName='; url = url + domainName + ...

Sending data with the request body using Express and Passport

I've created a login application using Express and Passport, but I'm having trouble directing the user to their specific user profile page. The goal is for users to fill out an HTML form and then be redirected to their own profile page (which dif ...

Angular Placeholder Positioned at the Top

Hello, I am a beginner in Angular and need to create an input field that looks like this: Everything is going fine except for the Vorname placeholder at the top. How can I place it there? Currently, I am utilizing Angular Materials. <div class='g ...

Arrange a JSON array by searching texts initially, followed by sorting the remaining results in alphabetical order

I am looking to sort a JSON array in JavaScript based on a search text. The sorting should prioritize items that match the search text at the beginning of their value, followed by alphabetical sorting for the remaining results. Even if the search text is f ...

Tips for deleting the displayed URL during a web page print in PHP

Is there a way to remove the URL from a page when printing using PHP? I want to achieve this without requiring my clients to change their browser settings. Any assistance would be greatly appreciated! ...

Ways to trigger a function when the body is loaded

In this snippet, I am attempting to execute the oauth2_login() function when the body loads, which is intended to log in the user. Currently, I have hardcoded values from the database into the username and password fields. <!DOCTYPE html> <html&g ...

Error: The variable $traceurRuntime has not been defined in the AngularJS application

Currently, I am utilizing [gulp-traceur][1] to convert es6 to js within my angularjs application (version 1.x). However, when attempting to compile a for loop, an error occurs: ReferenceError: $traceurRuntime is not defined It appears that I may need to ...

Capture the mouse's coordinates using the mousedown and mousemove events

When the user clicks on the slider, my jQuery script tracks the mouse coordinates. However, even after releasing the mouse button, the function continues to run. $("slider").mousedown(function(){ $(this).mousemove(function(e){ console.log(e.cli ...

Is there a way to launch only a single popup window?

Recently, I came across this piece of Javascript code which is causing me some trouble: function call() { popup = window.open('http://www.google.co.in'); setTimeout(wait, 5000); } function caller() { setInterval(call, 1000); } func ...

TypeScript does not perform type checking on arrays created using the Array() constructor and filled with the fill method

Using TypeScript version 2.4.2, compiled with the --target ES6 option has interesting results. For example, when using this line of code: var coins: { coin: number}[] = [1,1,1] TypeScript throws an error: Error TS2322: Type 'number[]' is no ...

Having difficulty compiling Bootstrap css with grunt

After struggling for two days and finding numerous online tutorials, I still require assistance. My goal is to add a namespace to Bootstrap so that I can use it in Salesforce without conflicting with Salesforce's stylesheet. I plan on wrapping the boo ...