Framework7 `<a href="">` is malfunctioning

I placed a simple <a> element on a webpage that utilizes the FrameWork7 framework. Here is how it looks:

<li><a href="https://www.google.com/"><img src="images/icons/black/users.png" alt="" title="" /><span>Go Google/span></a></li>

However, when I click on it, it does not redirect to the Google page. Upon checking the console, this error message appears:

XMLHttpRequest cannot load https://www.google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
framework7.js:12307 XHR failed loading: GET "https://www.google.com/".$.ajax @ framework7.js:12307app.get @ framework7.js:1652app.router.load @ framework7.js:2648load @ framework7.js:636handleClicks @ framework7.js:7573handleLiveEvent @ framework7.js:11488

I am still new to working with Framework7. The template used for development was purchased.

javascriptajaxhtml-framework-7

Answer №1

According to the information provided in the documentation:

If you wish to customize the behavior of a link or direct it to an external website, you can bypass the F7 link handler by adding the additional external class.

<a class="link external" href="http://google.com">Open Google</a>

To redirect a link outside of your Framework7 application, simply add the external class to the a href element for it to function correctly.

<li><a href="https://www.google.com/" class="external"><img src="images/icons/black/users.png" alt="" title="" /><span>Go Google</span></a></li>

Also, please make note that there is a typo in the closing span tag in your code snippet.

Answer №2

Make sure to close the span tag and include a target attribute:

<li><a href="https://www.google.com/" target="_blank"><img src="images/icons/black/users.png" alt="" title="" /><span>Visit Google</span></a></li>

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

I am facing issues with getting my slideshows to work on localhost using node

After careful positioning of my divs using position: relative; for the slideshow and position: absolute; for containers, I am facing an issue. Despite trying to fix it based on similar questions posted by others, the slideshow is not functioning properly. ...

javascripthtmlcssnode.jsexpress

The combination of Angular Material 15 and Tailwind CSS 3.2.4 in an Angular project is causing a mismatch

I've implemented Angular 15 with Angular Material 15, and recently integrated Tailwind CSS following the guidelines provided on this link. However, after adding Tailwind CSS, there seems to be a design discrepancy in the material components: https:/ ...

javascriptangularangular-materialtailwind-csstailwind-3

``What is the best way to identify an Ajax attribute?

let identifier = $(this).attr("id"); The term "id" represents the attribute as per w3schools definition - $(selector).attr(attribute) I have limited experience with ajax and am seeking clarification on where and how this attribute is specified ...

ajaxattributes

Elements positioned next to each other with no margin when spread across multiple lines

I have a color picker with a right margin of 6px. https://i.sstatic.net/OHqQK.png I need the white square (with the black check marker) to not have a right margin so it doesn't wrap to the next line and can use the full width. Instead of applyin ...

javascriptjqueryhtmlcssmargin

Trying to follow a guide, but struggling to identify the error in my JavaScript syntax

I'm attempting to follow an older tutorial to change all references of the word "cão" on a page to "gato". These instances are contained within spans, and I'm using the getElementsByTagName method in my script. However, when trying to cycle thro ...

javascriptsyntax-error

Tips on avoiding duplicate selection of checkboxes with Vue.js

Recently delving into vue.js, I encountered a challenge with multiple checkboxes sharing the same value. This resulted in checkboxes of the same value being checked simultaneously. How can this issue be resolved? var app = new Vue({ el: '#app&apo ...

javascriptvue.js

Vue: Storing selected list values in an array

I am working on a Vue application where I need to select two elements from a list component and place them inside an array. Currently, I have my list set up with selection functionality thanks to Vuetify. I have bound the selected items to an array using v ...

javascripttypescriptvue.jsvuetify.js

Generating a distinct identification for a row using JavaScript

Here is my JavaScript function for dynamically adding new rows to a table in HTML. I want each row to have a unique ID. This is the code I have so far: $(document).ready(function(){ var html = '<tr><td class="cb"><inpu ...

javascriptjquery

tips for transitioning between various json entities

Recently, I created a login page code using JavaScript that runs on a Node Express.js server. Users can input their username/email and password, and all the data gets stored in a JSON file structured like this: {"username":"admin"," ...

javascriptnode.jsexpress

The TypeScript function was anticipating one argument, however it received two instead

Can you help me fix the issue with my createUser() function? Why am I unable to pass parameters in Smoke.ts? Login.ts : interface User { url: string, email: string, } class Test{ async createUser(user: User) { await Page.setUrl(user.url); aw ...

javascripttypescripttypes

Error: Call stack size limit reached in Template Literal Type

I encountered an error that says: ERROR in RangeError: Maximum call stack size exceeded at getResolvedBaseConstraint (/project/node_modules/typescript/lib/typescript.js:53262:43) at getBaseConstraintOfType (/project/node_modules/typescript/lib/type ...

javascriptnode.jsangulartypescriptnpm

Expanding the filtering capabilities in AngularJS with additional selection options

I'm working with a repeater and implementing a filter to query the items, like this: ng-repeat="item in items | filter:query" Now, I want to incorporate a select option as an additional filter. Any ideas on how to integrate this with the existing fi ...

javascriptangularjs

Utilize Next JS pages api to generate dynamic routes based on unique ids

In the content of my website, there is a collection of objects named stories that are displayed as an array. Additionally, I have a section where each individual story is showcased in detail. I intend to enable users to click on any story link within the ...

javascriptasync-awaitgraphqlnext.jsnextjs-dynamic-routing

Terminate the JWT token and automatically log out the user in the event of a banning or modification

Greetings fellow developers, I've been working on enhancing my application's user system to include functionality for administrators to upgrade an account's level (granting admin privileges if it reaches level 10) or ban users from the site ...

javascriptnode.jsapiexpressjwt

Utilize Dinero.js to implement currency formatting for input fields in React applications

I am currently working on a form in React that requires certain input fields to be formatted as money currency. These inputs should be prefixed with the dollar sign ($), include commas for thousands separation, and have exactly two decimal points. During ...

javascriptreactjstypescriptforms

The value of a variable remains constant in an Angular controller

I am facing an issue with my HTML page that includes: <div ng-controller="MyCtrl"> <div ng-view>Some content</div> myVar: {{myVar}} </div> Along with an Angular controller: myModule.controller('MyCtrl', function($s ...

javascriptangularjs

Increase the date by one day in the minimum date field using the date picker

I've been struggling with adding one day to the minDate in my code. Despite trying multiple solutions from Stackoverflow, none of them have worked successfully. Here is the code I currently have: $('#cal_mulamhn').datepicker({ minDate ...

javascriptphpjquerycodeigniter

Enhancement from the original JavaScript class framework created by John Resig

Greetings everyone, Lately, I've been on the lookout for a straightforward JavaScript class framework that focuses solely on basic inheritance. After some research, I stumbled upon John Resig's sample framework shared on his blog, and it seems t ...

javascriptjavascript-framework

Angular service providing a subset of resource data

I am currently working with an Angular factory called DogePrice: .factory('DogePrice', ['$resource', function ($resource) { return $resource("https://chain.so/api/v2/get_info/DOGE"); }]) Usually, the API response looks like this: ...

javascriptangularjsangular-promiseangular-resourceangular-providers

A guide on efficiently organizing and refining an array of objects in Vue

I have been working on filtering and sorting an array of objects in Vue. While I have successfully implemented the filtering functionality, I am now looking to incorporate a sorting feature as well. To achieve this, I have set up a dropdown component throu ...

javascriptarrayssortingvue.jsvue-component