Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As the elements added aren't shown it can be a little hard to pinpoint the exact problem, but adding elements via appending/inserting into document doesn't always work that well for all browsers and in worst case you will need to add those elements manually by code (<code>document.createElement()</code>, <code>appendChild()</code> etc.).</p> <p>In an attempt to create a work-around you can try to use <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers" rel="nofollow"><code>MutationObservers</code></a> to track changes for your article element which can hopefully help you trigger print when DOM is updated properly. The support is fairly good in new browsers (you may have to use prefix in some, f.ex. <code>WebKitMutationObserver</code>) and for older browsers you can provide a fallback - which of course then only get you so far.</p> <p>This will monitor a target element for changes and fire a callback.</p> <p>Generic example based on <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow">this article</a>:</p> <pre><code>var article = document.querySelector('#articleID'), doPrint = false, // must be available in global/parent scope o, useFallback = (typeof MutationObserver !== 'undefined'); if (!useFallback) { o = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // you can do additional filtering here // using the mutation object (.name, .type, ...) if (doPrint) { doPrint = false; window.print(); } }); }); var cfg = { attributes: true, childList: true, characterData: true }; o.observe(article, cfg); } </code></pre> <p>Now that the observer is running you can do this modification in your success callback:</p> <pre><code>var timer; // keep track of setTimeout so we can cancel it success: function(data) { ... ... $(article).each(function () { parent.append(article); }); // after last element is added, add a "dummy" element doPrint = true; if (useFallback) { // fallback to setTimeout or other solution } else { parent.append('&lt;br /&gt;'); } } </code></pre> <p>I made an <strong><a href="http://jsfiddle.net/AbdiasSoftware/GknDT/" rel="nofollow">online demo here</a></strong> which sets up the observer and adds some elements. Open console to see actions. The demo is probably too limited data-wise to simulate your situation but can be useful to see the process.</p> <p>The mechanism used here for triggering print dialog itself can be discussed if is the best - I just provide one for sake of example.</p> <p>But you can see the observer is triggered when something is added to <code>article</code>. This way you know the DOM has been updated and it should be available for printing. Only the last element added need to trigger the print, hence the <code>doPrint</code> flag.</p> <p>If you still have no success you will need to consider adding the elements manually the code way or perhaps predefine some elements that you inject when needed (as said, without knowing the full scenario here it has to be with the guess).</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload