Return do_shortcode('[h5p id="5"]'); via XMLHttpRequest

Submitted by velvetor on Thu, 11/18/2021 - 22:05
Forums: 
Content creation

Hey guys,

i want to return the response of do_shortcode('[h5p id="5"]'); via XMLHttpRequest.

The HTML DOM of H5P was successful created and was added to my DOM element but the iframe itself is still empty.

This is my XMLHttpRequest:

const q = new XMLHttpRequest();
q.open("POST", wp.ajax_url, true);
q.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
q.onreadystatechange = function() {
    if (q.readyState === 4) {
        document.getElementById("add-question").innerHTML = q.responseText;
    }
};
q.send("action=h5p_question&quest_id=5");

 

This is my functions.php

function h5p_question() {
    $id = $_POST['quest_id'];
    echo do_shortcode('[h5p id="'. $id .'"]');
    die();
}

add_action('wp_ajax_ h5p_question', 'h5p_question');
add_action('wp_ajax_nopriv_h5p_question', 'h5p_question');

 

How do i load the iframe and execute the necessary javascript to get the full H5P iframe?

I read this article to find a solution: https://github.com/h5p/h5p-wordpress-plugin/issues/8

So i updated my php function:

function h5p_question() {
    $quest_id = $_POST["quest_id"];
    $h5p =  do_shortcode( '[h5p id="'. $quest_id .'"]');
    $plugin = \H5P_Plugin::get_instance();
    $settings = $plugin->get_settings();
    $h5p .= $plugin->print_settings($settings);
    echo $h5p;   
    die();
}

 

This is the output on my website. The iframe is still empty. 

<div id="addQuestion">
<script>H5PIntegration = {"baseUrl":"https:\/\/localhost\/dsin-difue\/web\/wp","url":"\/dsin-difue\/web\/app\/uploads\/h5p","postUserStatistics":true,"ajax":{"setFinished":"https:\/\/localhost\/dsin-difue\/web\/wp\/wp-admin\/admin-ajax.php?token=949874a3b3&action=h5p_setFinished","contentUserData":"https:\/\/localhost\/dsin-difue\/web\/wp\/wp-admin\/admin-ajax.php?token=c0a0368129&action=h5p_contents_user_data&content_id=:contentId&data_type=:dataType&sub_content_id=:subContentId"},"saveFreq":false,"siteUrl":"https:\/\/localhost\/dsin-difue\/web\/wp","l10n":{"H5P":{"fullscreen":"Vollbild","disableFullscreen":"Disable fullscreen","download":"Download","copyrights":"Rights of use","embed":"Embed","size":"Size","showAdvanced":"Show advanced","hideAdvanced":"Hide advanced","advancedHelp":"Include this script on your website if you want dynamic sizing of the embedded content:","copyrightInformation":"Rights of use","close":"Close","title":"Titel","author":"Autor","year":"Year","source":"Source","license":"License","thumbnail":"Thumbnail","noCopyrights":"No copyright information available for this content.","reuse":"Reuse","reuseContent":"Reuse Content","reuseDescription":"Reuse this content.","downloadDescription":"Download this content as a H5P file.","copyrightsDescription":"View copyright information for this content.","embedDescription":"View the embed code for this content.","h5pDescription":"Visit H5P.org to check out more cool content.","contentChanged":"This content has changed since you last used it.","startingOver":"You'll be starting over.","by":"by","showMore":"Show more","showLess":"Show less","subLevel":"Sublevel","confirmDialogHeader":"Confirm action","confirmDialogBody":"Please confirm that you wish to proceed. This action is not reversible.","cancelLabel":"Cancel","confirmLabel":"Confirm","licenseU":"Undisclosed","licenseCCBY":"Attribution","licenseCCBYSA":"Attribution-ShareAlike","licenseCCBYND":"Attribution-NoDerivs","licenseCCBYNC":"Attribution-NonCommercial","licenseCCBYNCSA":"Attribution-NonCommercial-ShareAlike","licenseCCBYNCND":"Attribution-NonCommercial-NoDerivs","licenseCC40":"4.0 International","licenseCC30":"3.0 Unported","licenseCC25":"2.5 Generic","licenseCC20":"2.0 Generic","licenseCC10":"1.0 Generic","licenseGPL":"General Public License","licenseV3":"Version 3","licenseV2":"Version 2","licenseV1":"Version 1","licensePD":"Public Domain","licenseCC010":"CC0 1.0 Universal (CC0 1.0) Public Domain Dedication","licensePDM":"Public Domain Mark","licenseC":"Copyright","contentType":"Content Type","licenseExtras":"License Extras","changes":"Changelog","contentCopied":"Content is copied to the clipboard","connectionLost":"Connection lost. Results will be stored and sent when you regain connection.","connectionReestablished":"Connection reestablished.","resubmitScores":"Attempting to submit stored results.","offlineDialogHeader":"Your connection to the server was lost","offlineDialogBody":"We were unable to send information about your completion of this task. Please check your internet connection.","offlineDialogRetryMessage":"Retrying in :num....","offlineDialogRetryButtonLabel":"Retry now","offlineSuccessfulSubmit":"Successfully submitted results."}},"hubIsEnabled":false,"reportingIsEnabled":false,"libraryConfig":null,"crossorigin":null,"crossoriginCacheBuster":null,"pluginCacheBuster":"?v=1.15.3","libraryUrl":"https:\/\/localhost\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js","user":{"name":"sam","mail":"[email protected]"},"core":{"styles":["\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/styles\/h5p.css?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/styles\/h5p-confirmation-dialog.css?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/styles\/h5p-core-button.css?ver=1.15.3"],"scripts":["\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/jquery.js?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/h5p.js?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/h5p-event-dispatcher.js?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/h5p-x-api-event.js?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/h5p-x-api.js?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/h5p-content-type.js?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/h5p-confirmation-dialog.js?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/h5p-action-bar.js?ver=1.15.3","\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/request-queue.js?ver=1.15.3"]},"loadedJs":[],"loadedCss":[],"contents":{"cid-34":{"library":"H5P.GMSingleChoiceCert 1.0","jsonContent":"{\"choice\":{\"question\":\"<p>Quest 1<\\\/p>\\n\",\"answers\":[\"<p>Answer A<\\\/p>\\n\",\"<p>Answer B<\\\/p>\\n\"]}}","fullScreen":"0","exportUrl":"\/dsin-difue\/web\/app\/uploads\/h5p\/exports\/quest-1-34.h5p","embedCode":"<iframe src=\"https:\/\/localhost\/dsin-difue\/web\/wp\/wp-admin\/admin-ajax.php?action=h5p_embed&id=34\" width=\":w\" height=\":h\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"Quest 1\"><\/iframe>","resizeCode":"<script src=\"https:\/\/localhost\/dsin-difue\/web\/app\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>","url":"https:\/\/localhost\/dsin-difue\/web\/wp\/wp-admin\/admin-ajax.php?action=h5p_embed&id=34","title":"Quest 1","displayOptions":{"frame":false,"export":false,"embed":false,"copyright":false,"icon":true,"copy":true},"metadata":{"title":"Quest 1","license":"U"},"contentUserData":[{"state":"{}"}],"scripts":["\/dsin-difue\/web\/app\/uploads\/h5p\/cachedassets\/016dcc2711dfd2aa832f7ee9c27c32bb9acc3239.js"],"styles":["\/dsin-difue\/web\/app\/uploads\/h5p\/cachedassets\/016dcc2711dfd2aa832f7ee9c27c32bb9acc3239.css","https:\/\/localhost\/dsin-difue\/web\/app\/themes\/DiFue\/build\/exam.css?ver=0.1"]}}};</script>
<div class="h5p-iframe-wrapper">
<iframe id="h5p-iframe-34" class="h5p-iframe" data-content-id="34" style="height:1px" src="about:blank" frameborder="0" scrolling="no" title="Quest 1">
</iframe>
</div>
</div>

 

Which script i have to preload to get the content of the iframe? I don't use jquery.

Thank a lot for help!