Attempting to utilize a custom element, the message "You attempted to use polymer without loading it first" confirms that it has indeed been imported

I've been experimenting with a custom element for a paper-dialog popup that I want to incorporate. Surprisingly, when I create a test page within the same file where the custom element is defined, using all the identical imports as my main index, it works perfectly fine. However, if I import the custom element into any other page, it simply stops working. Even loading the successfully functioning test file onto another page inside a div triggers an error saying: 

Uncaught Error: You tried to use polymer without loading it first. To load polymer, <link rel="import" href="components/polymer/polymer.html">

It's worth noting that I have indeed imported the polymer.html in my custom element file. Interestingly, even if I copy and paste the exact code from the external successful test into my main index, it still shows this error message. I'm at a loss on why this discrepancy occurs despite thorough research. Does anyone out there know what might be causing this issue?

Below is the snippet of code for my custom element:

<polymer-element name="share-dialog" attributes="pageid, post">
<template>
    <paper-dialog backdrop autoCloseDisabled id="overlay" transition="paper-dialog-transition-bottom" heading="Share">
        Long-press, highlight and copy: <br>
        <center><paper-input id='share_box'type='text' name='share' value='xxxxx/index.php?page=news&id={{pageid}}&post={{post}}'></paper-input></center><br>
        <center>
            <paper-button core-overlay-toggle raised>Close</paper-button>
        </center>
    </paper-dialog>
</template>
<script>

Polymer('share-dialog', {
    toggle: function() {
        this.$.overlay.toggle();
    }
});

</script>
</polymer-element>

The URL mentioned in the input box above is substituted for an actual link, however, I've edited it for privacy reasons.

These are the imports I am using:

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.js">

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-icons/social-icons.html">
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-style/core-style.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-progress/paper-progress.html">
<link rel="import" href="bower_components/core-transition/core-transition.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog-base.html">
<link rel="import" href="bower_components/paper-elements/paper-elements.html">
<link rel="import" href="bower_components/core-overlay/core-overlay.html">

The error arises only when I try to initiate the 

<share-dialog></share dialog>

jqueryhtmlpolymer

Answer №1

Make sure to include only polymer.html instead of both polymer.js and polymer.html.

Answer №2

Seems a bit odd. I created a plunker based on your example and it actually worked -

http://plnkr.co/edit/Abc12DefgHijKlmnoPqr?p=preview

The only additional thing I had to add, which was not included in your code above, was in the index.html file

I also took out a reference to polymer.js that wasn't necessary for this scenario

index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="share-dialog.html">
</head>

<body>

  <share-dialog id="myDialog"></share-dialog>
  <button onclick="showDialog()">Show</button>

  <script>
    function showDialog() {
      document.getElementById("myDialog").toggle();
    }
  </script>

</body>

</html>

share-dialog.html

<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icons/social-icons.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-spinner/paper-spinner.html">
<link rel="import" href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="https://www.polymer-project.org/components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="https://www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="https://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="https://www.polymer-project.org/components/core-style/core-style.html">
<link rel="import" href="https://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-fab/paper-fab.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-tabs/paper-tabs.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-toast/paper-toast.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-progress/paper-progress.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-dialog/paper-dialog-base.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="https://www.polymer-project.org/components/core-overlay/core-overlay.html">

<polymer-element name="share-dialog" attributes="pageid, post">
  <template>
    <paper-dialog backdrop autoCloseDisabled id="overlay" transition="paper-dialog-transition-bottom" heading="Share">
      Long-press, highlight and copy:
      <br>
      <center>
        <paper-input id='share_box' type='text' name='share' value='xxxxx/index.php?page=news&id={{pageid}}&post={{post }} '></paper-input>
      </center>
      <br>
      <center>
        <paper-button core-overlay-toggle raised>Close</paper-button>
      </center>
    </paper-dialog>
  </template>
  <script>
    Polymer('share-dialog', {
      toggle: function() {
        this.$.overlay.toggle();
      }
    });
  </script>
</polymer-element>

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

Toggle class on element based on presence of class on another element

If I have 4 boxes and the user is required to choose one. I aim to assign an active class to the box that the user clicks on. However, if the user selects another box, I want to remove the class from the first clicked box and apply it to the newly clicked ...

javascripthtmlcss

How to centrally position an image within a div using Bootstrap

I am a fan of using bootstrap and I recently encountered an issue with applying max-width to an image. It seems that when I do this, the image does not center properly despite using text-center. The solution I found was simply removing the max-width to ...

htmlcssimagetwitter-bootstrapdisplay

Empty gap separating two side by side photos

Could someone assist me with removing the excessive white space between these two images? Each image is contained within its own respective div, with layer effects applied when hovered over. I've attempted changing the display to inline-block and sett ...

htmlcss

Stopping a file transfer in case of browser closure or upload cancellation

When working on uploading a file asynchronously using HTML5 in MVC3, a common issue arises when dealing with large files such as 1GB. If the upload process is cancelled or the browser is closed at 50% completion, a 500MB file still gets saved in the target ...

c#javascriptasp.net-mvc-3htmlfile-upload

Ensure your mobile site is optimized for full width display

Imagine a webpage with a fixed width of 1280px. Is there a way to instruct a smartphone to automatically scale this page to full width upon loading? Currently, I am using: <meta name="viewport" content="width=1280, initial-scale=1"> However, it d ...

htmlcssmobile

Is there a way to asynchronously load image src URLs in Vue.js?

Why is the image URL printing in console but not rendering to src attribute? Is there a way to achieve this using async and await in Vue.js? <div v-for="(data, key) in imgURL" :key="key"> <img :src= "fetchImage(data)" /> </div> The i ...

javascripthtmlwebpackvue.jsasync-await

Step-by-step guide: Creating a captivating triangular shape on the current tab

I am trying to implement a dynamic tab using Bootstrap where clicking on a tab will display a thicker black underline, like in this image: https://i.stack.imgur.com/h48GB.png To achieve the black line effect, I have added the following code: .nav-tabs.n ...

htmlcsstabshoverselected

What is the process for submitting a file at any given moment?

Utilizing the Blueimp file upload plugin provides us with several ways to submit file(s). 1) One option is to submit a file immediately after it is added to the queue: add: function (e, data) { data.submit(); } 2) Another method is to submit a fil ...

jqueryblueimpjquery-file-upload

What is the best method for transferring form data to a string and storing it in localStorage effectively?

Is this the most efficient method for extracting form data into a string and storing it in localStorage? I developed this method independently, but I'm not an experienced programmer. It seems to work for my needs, but I'm unsure if it's com ...

javascriptjquery

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

Retrieve the form array values using jQuery

I have been searching high and low for an answer to this question, but I just can't seem to find it. In my form, I have 3 select lists. The first list is already part of the form, while the second two are dynamically added. These select lists belong ...

phpjqueryarrays

The HTML Canvas seems to be malfunctioning for some unknown reason

As a beginner in programming, I am struggling to understand why the code below is not working. The first three lines of the script are necessary for another part of the webpage, but I don't see how that would affect the rest of the code: <!DOCTY ...

javascripthtml

Is there a way to use jQuery to retrieve the date and time from a timestamp within an input field?

Hey, I've encountered an issue with jQuery and the UI date picker. Currently, my NEW event form has 3 fields: Date, timeFrom, timeTo. In my SQL database, I have corresponding fields: Date(datetime), timeFrom(time), timeTo(time). When a user selects ...

javascriptjquerydatepickerjquery-ui-timepicker

Utilize the power of Javascript/AJAX or jQuery to submit multiple forms simultaneously

I am currently working on a project which involves having 3 forms on a single page. The reason behind this is that one of the forms is displayed in a modal dialog. My goal is to allow users to submit all 3 forms with a single button click, and I also wan ...

javascriptphpjqueryajaxforms

Lazy Load immediately loads images that are visible on the screen without needing a click

I am facing an issue with Lazy Load on my image-heavy website. I want the images to load only when a button is clicked, but currently, it only partially works. Images below the fold follow the desired behavior of loading on click, but those above the fold ...

javascriptjquerylazy-loadingjquery-lazyload

"Enhance your forms with Ajax for seamless uploading and convenient text

My current challenge involves submitting a form that features multiple file uploads using ajax along with text input. I'm facing an issue where if a user successfully uploads all the files using ajax but forgets to enter their name, the form resets an ...

phpjqueryajaxfileupload

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

I recently added a search bar with auto-complete functionality to my website. The search bar queries the database for elements that begin with the text entered by the user as they type. Although it works well, I noticed that every time the user inputs ano ...

javascriptjqueryhtmldjangokeyup

The div containers are unable to be positioned side by side

Hey there, I'm having trouble with my coding right now. (I'm not sure if you can see it, but the code is creating a div - frustrating). Here's an image of the code: No matter what code I try to use to align the content center, left, or righ ...

csshtml

The velocity of jQuery selectors

Which is more efficient: using only the ID as a selector or adding additional identifiers? For instance $('#element') vs $('#container #element') or getting even more detailed: $('body div#container div#element') ? ...

javascriptjqueryperformancejquery-selectors

Utilize WebGL to incorporate a mesh as a background image mask

Currently, I am faced with a challenge in WebGL that involves the following scenario: Picture a mesh positioned in front of the camera. This mesh does not have traditional shading, but its outline, or "silhouette," is utilized to display a background imag ...

htmlbackgroundwebglmaskmesh