Is it Feasible to Incorporate HTML like <a href..in a JavaScript File?

Recently, I had a question about creating a custom mailto share button that would open a window for users to enter email addresses they want to send to. While seeking advice on this matter (How to Create a Mailto Share Button that Opens a Window in which Ones Can Enter Email Address to Send to), user Ron Royston gave me a helpful response suggesting: "You could create a dedicated page to collect email addresses and process them server-side. Keep the popup small like this:

<a href="/my-email-collector-page"
   onclick="window.open(this.href,'targetWindow',
                                   'toolbar=no,
                                    location=no,
                                     status=no,
                                     menubar=no,
                                     scrollbars=yes,
                                    resizable=yes,
                                    width=200px,
                                    height=120px');
 return false;">email</a>"

This method seemed promising, but when I integrated it into my JavaScript code (available at CodePen here: https://codepen.io/IDCoder/full/rpdBQJ/), along with other social media share buttons, it somehow disabled those buttons. I am curious as to why this happened – could it be due to using 

<a href="........"></a>
within a JavaScript environment? If so, how can I merge Ron's code with a click function like this:

$('.whatever classname').click(function() {

window.open();

});

In summary, starting with the line, 

window.open(this.href,'targetWindow',....
how do I incorporate the following code: into the above script?

window.open(this.href,'targetWindow',
                                       'toolbar=no,
                                        location=no,
                                        status=no,
                                         menubar=no,
                                      scrollbars=yes,
                                       resizable=yes,
                                        width=200px,
                                 height=120px');
      return false;
javascriptmailtowindow.open

Answer №1

If you want to include a data-* attribute in the <button> element that links to an HTML document you've created, here's how you can do it:

<button data-href="/path/to/html/document" id ="EM" type="button" class="Email share-page-on-Email">Email</button>


var emailWindowSettings = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=200px,height=120px';

$("#EM").on("click", function() {
  var emailWindow = window.open(this.dataset.href,'targetWindow', emailWindowSettings);
  return false;
})

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

Error 404: Page not found. Sorry, we couldn't locate the Node JS and Express resource

I have been trying to access the routes /api and /api/superheroes, but I keep encountering an error message whenever I try. Not Found 404 NotFoundError: Not Found at C:\Users\mikae\Desktop\Project\node-express-swig-mongo\a ...

javascriptnode.jsexpress

Can you point me in the direction of the code for the session.generate() function in Express JS?

Currently, I am delving into the intricacies of session storage and generation within Express JS and Node.js: Store.prototype.regenerate = function(req, fn){ var self = this; this.destroy(req.sessionID, function(err){ self.generate(req); fn(er ...

javascriptnode.jssessionexpress

Scrolling to an id element in Vue.js can be achieved by passing the ID in the URL using the "?" parameter. This

My challenge involves a URL http://localhost:8080/?london that needs to load directly to the element with an id of london in the HTML section <section id="london"> on the page. Using http://localhost:8080/#london is not an option, even though it woul ...

javascriptvue.jsanchor-scroll

ReactJS is unable to locate a valid DOM element within the target container

I recently embarked on my journey to learn ReactJS and I celebrated successfully writing my first code. However, when I encountered the same pattern with components, an error popped up stating _Invariant Violation: registerComponent(...): Target container ...

javascriptjqueryhtmlreactjsbabeljs

Preventing redirection post-AJAX call using jQuery

Currently, I am attempting to implement a basic form submission using AJAX to send data to submit.php for database storage. However, upon submission, the page redirects to submit.php instead of staying on the current page. How can I make it submit without ...

javascriptphpjqueryajaxforms

When a Vue.js datepicker is set as required, it can be submitted even if

When using the vuejs-datepicker, setting the html required attribute on input fields may not work as expected. This can lead to the form being submitted without an input value. <form> <datepicker placeholder="Select Date" required></datep ...

javascripthtmlvue.jsvuejs2vuejs-datepicker

Shorten Text - React Native

I currently have a React Native application with a FlatList component. The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach ...

javascriptcssreactjsreact-nativetruncate

Using JavaScript to implement word filtering in MongoDB

I'm currently in the process of creating a chatbot designed to filter questions, and I'm seeking guidance on how to refine the search in my MongoDb based on user input. At the moment, I have the following code: I aim to retrieve all the results ...

javascriptmongodb

Passing a string to a function in AngularJS through ng-click

How can I pass a string to a function using ng click? Here's an example: HTML <a class="btn"> ng-click="test(STRING_TO_PASS)"</a> Controller $scope.test = function(stringOne, stringTwo){ valueOne = test(STRING_TO_PASS); } Edit - ...

javascripthtmlangularjs

mysterious supplier factoryprovider <- factory <- angular js controller

I'm encountering an issue with injecting dependencies from a service to a controller. Despite adding it, I keep receiving the following error: Unknown provider: websiteFactoryProvider <- websiteFactory <- listCtrl My main goal is to display ...

javascriptangularjs

Fetch data from an API using JavaScript and load a JSON file

I'm currently facing an issue with this specific problem: I am attempting to retrieve the JSON file from using the following code: $("document").ready(function () { // Triggering function reLoad(); function reLoad() { $.getJSON( ...

javascriptjsonapiget

Change the page using JavaScript after submission

I am currently working on incorporating Firebase authentication into a Node.js Express-based application. However, I have encountered the following error: nexttick.js:45 Uncaught TypeError: Cannot read property 'redirect' of undefined This ...

javascriptnode.jsexpressfirebase-authentication

Struggling to populate dropdown with values from array of objects

My issue is related to displaying mock data in a dropdown using the SUIR dropdown component. mock.onGet("/slotIds").reply(200, { data: { slotIds: [{ id: 1 }, { id: 2 }, { id: 3 }] } }); I'm fetching and updating state with the data: const ...

javascriptreactjsecmascript-6

Exploring the power of combining observables in RxJS

Having difficulty combining observables in my implementation of a tags-input feature. this._allTags represent all available tags. I am working with 4 streams: this._suggestions = new this.rx.Subject; this._searchText = new this.rx.Subject; this._s ...

javascriptangularjsecmascript-6rxjsobservable

What steps do I need to take to ensure that my AJAX button press request functions properly within my Django setup?

Is there a way to utilize a JavaScript string variable in a Python function and then return it back to a JavaScript variable efficiently? Perhaps using Json/ajax can help with this? To start, there is an HTML element where a string is stored: <h2 id=&q ...

javascriptpythondjangoajaxbutton

The display of Bootstrap Cards may become distorted when incorporating J Query

I am attempting to design a dynamic HTML page that pulls data from a JSON response using an AJAX request. My goal is to display three columns in a row, but currently I am only seeing one column per row. I would greatly appreciate any guidance on what migh ...

javascripthtmljqueryjsonbootstrap-4

Mootools tweening color transition denied for child elements when color is explicitly defined in CSS

Check out this link for testing: http://jsfiddle.net/EnJSM/ You might observe that by removing "color: #6CB5FF;", the transition behaves differently - it only works for the second part of the line. I'm interested to see what solution you come up wit ...

javascripthtmlcssmootools

Utilizing Vue3's draggable component to seamlessly incorporate items

My current project involves the use of the vue draggable package, and below you will find the complete component: <template> <div> <button class="btn btn-secondary button" @click="add">Add</button> ...

javascriptvue.jsvuejs3draggablevuedraggable

How can I store all selected dropdown values in the URL parameters whenever a dropdown option is changed?

In mypage.php, I have set up three drop-down menus: <select name='vehicle'> <option value=''>Select</option> <option value='bus'>Bus</option> <option value='bike'>Bike</o ...

phpjavascripthtmldrop-down-menu

Incorporated React component from Rails-assets.org into a Rails application

I have been trying to incorporate a react component from rails-assets.org into my Rails application. Currently, I am using the react-rails gem to write react view in my application. Now, I want to use other react components such as react-router, react-sel ...

javascriptruby-on-railsreactjsrubygemsreact-rails