Question 14879 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Dialog element from file – Jquery

I’ve been reading with interest about the dialog element in HTML:

  <dialog id="helpOnName">
    <p>
     The name is arbitrary. There is no validation, whatsoever.
    </p>
  </dialog>

So, that’s well for this simple text. However, with growing complexity, I’d rather have something like

  <dialog url="helpOnName.html"></dialog>

In other words: Rather than embedding the dialog contents into the opening page, I’d like it to be read from another file.

Is that possible? How? (Using JQuery would be fine.)

Tags:

2

Answers


  1. 0

    You may have different options to achieve the goal to have content loaded from an external resource.

    • Doing an ajax request that will return a response to embed
      dynamically in the dialog
    • Embedding the content inside an <iframe> tag
    • Referencing the content with an <object> tag

    This is the demo for the third and most original option of those.

    The content for the <dialog> is specified by an <object> element fed by an url having its content. As a fallback, I added the option that will override its content with a default template defined in the page itself.

    <object>: The External Object element

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

    :scope (worth of mention)

    *for selecting only starting from the direct children

    https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

    This is an answer better covering <iframe> <embed> <object>

    Difference between iframe, embed and object elements

    And I would add I forgot to mention <link>

    document.addEventListener('DOMContentLoaded', ()=>{
  const dialog = document.getElementById('primaryDialog');
  fillDialogContent(dialog);
})

function fillDialogContent(dialog){  
  const template = dialog.querySelector(':scope > .fallback');  
  const content = template.content.cloneNode(true);  
  const objectEl = dialog.querySelector('object');  
  objectEl.append(content); 
}
    <dialog id="primaryDialog" open>
    <object data="your-custom-dialog-content.html" type="text/html"></object>
    
    <template class="fallback">
      <div class="container">
        <p>This is the default dialog content</p>
        <p>An error occurred in the attempt to load the custom template</p>
      </div>
    </template>
    
</dialog>
    Login or Signup to reply.
  2. 0

    Here is another way of doing it with fetch():

    document.addEventListener('DOMContentLoaded', function(ev) {
  document.querySelectorAll("[data-url]").forEach(el=>
   fetch(el.dataset.url).then(r=>r.text()).then(html=>el.innerHTML=html)
  )
});
    <h3>First dialogue</h3>
<div data-url="https://baconipsum.com/api/?type=all-meat&paras=3&format=html">hello</div>
<h3>Second dialogue</h3>
<div data-url="https://baconipsum.com/api/?type=all-meat&paras=5&make-it-spicy=1&format=html">hello again</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search