Modified to run JavaScript

[s7ntech]

Permitted execution javascript code after loading 'hx:include' in the particular case where the content has the JavaScript code that is executed before 'hinclude' finish on its own, for example widget facebook

[mnot]

This doesn't really seem like a good idea -- besides the issues of using eval, the whole idea of hinclude is that it's not tied deeply to javascript.

[s7ntech]

I agree about using eval but if you have to use hinclude on factors such as the box of facebook, javascript that parses not function because the node is not found and loaded ... this is a limitation of hinclude

[mnot]

Hmm.

I'd prefer to have the option to run any scripts inside of the included content upon load.

I.e., if I include foo/bar.html, and it contains a script tag, that gets loaded upon inclusion.

Would that work for your use case? If not, could you talk more about what you want to do?

[s7ntech]

you're right, I have to allow the execution of all scripts..
the use case is the following:

<hx:include src="/other/document/here.html"></hx:include>

here.html content:
`

Title box

<fb:fan profile_id="profileid" stream="0" logobar="0" connections="6" width="214" height="270" css="css"></fb:fan>

text info

<script>FB.XFBML.parse();</script>

`

in this case the javascript is not executed but displayed on the screen

[mnot]

This still has the script page in the page doing the inclusion, rather than the included text. I was talking about the latter.

[mnot]

Like this:
http://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml

[s7ntech]

corrected issue, changed management content for better content integration, included variable for removal javascript and meta

[nurikabe]

+1

[dirkluijk]

I am also looking for a way to achieve this. I use hinclude in Symfony2 to load embedded controllers (which are widgets, in my case) containing javascripts.

So: +1

[ghost]

Same problem as Dirkluijk on Symfony2.

s7ntech's version is working but with only one hx:include call, when i have more than one i randomly get :

Uncaught TypeError: Object [object global] has no method 'hinclude_check_content' hinclude.js:68
hinclude.show_buffered_content

Is hinclude really designed to this ? I may move to another solution.

[s7ntech]

you can have a sample code of the page? and version of browser you are using? thanks

[ghost]

I have a render_hinclude (from Symfony2) inside a for loop :

            {{ render_hinclude(
                controller('MyBundle:Widget:display',
                { 'configuration': configuration.id }),
                {
                    'default': "loading..."
                }
            )}}

Which is creating the hx:include tag and content. The content is simple HTML with jQuery inside it (inside script tag). I'm generating random ids (since the content is almost the same, to avoid conflict with JS).

As i said, sometimes it's working well (when XHR calls are done with a little delay), when they're done at almost the same time i've got this error.

[dirkluijk]

The reason I want any JavaScript code included to be executed, is that it needs elements from the DOM to be loaded.

Example:

<ul class="products">
  <li><a href="/product/101">My product</a></li>
<ul>
<script type="text/javascripts">
$('ul.products a').click(function() {
    alert('clicked!');
});
</script>
<script type="text/javascripts" src="/another/script.js"></script>

Currently this won't work when included with hinclude.js. s7ntech' version executes the embedded JavaScript code, but not the referenced script.

Note that jQuery's 'load()' function evaluates included Javascript fine. Maybe it's worth looking at its implementation.

When I already include the Javascript in the DOM (outside the <hx:include /> part, the DOM elements I need are not yet available.

[s7ntech]

the reported problem by TheNuks has been corrected

the cause was a conflict with external libraries, especially facebook_connect, which generated errors chain

has changed the reference to methods and added control over the type of the variable

[ghost]

Thank-you ! It's working fine now :) Will you implement external .js too someday?

[s7ntech]

if I understand it, the reported problem by dirkluijk has been corrected

[dirkluijk]

s7ntech, great, thanks! It works now. The only problem is that I now have scope issues.

Example:

<!-- some_template.html.twig -->
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript" src="myscript.js"></script>

In library.js:

var hs = function() { ... }

In myscript.js:

hs.foo = 'bar';
$('.gallery a').click(function() {
   return hs.expand();
});

(Just a simple example, real world use case is more complicated)

Results in: Uncaught ReferenceError: hs is not defined on line 1 in myscript.js.

For now I can put the library.js in the document (outside the <hx:include />), that works, but this would not be necessary.

This problem appears in Chrome/Firefox/Safari, on IE9 I got an JS error on hinclude.js:91 (parsed_document = new ActiveXObject('Microsoft.XMLDOM');).

[succinct]

Does this work now? I have HIncluded content containing <script/> tags, and they do not render out to the user as text, but neither do they execute. In my use case, I'm displaying a message to the user via HInclude, and that message contains a dynamically created div, which is intended to show them the badge they just earned:

<div class="alert alert-success">
    <script type="text/javascript">
        var badgeData = {
            department: '_none',
            description: 'Add your gender to your profile',
            name: 'Engendering Dialog',
            tag: 'profile_gender',
            pointValue: 25,
            level: 
        };
        var badgeOptions = {
            size: 'small'
        };
        renderUserBadge(badgeData, badgeOptions);
    </script>

    You've earned the "Engendering Dialog" badge: <em>Add your gender to your profile</em> (25 points)
</div>

EDIT: Turns out I'm getting an error when I use b96306f:

Uncaught TypeError: Cannot set property 'innerHTML' of undefined f643d83_hinclude_1.js:188
hinclude.move_html_to_hinclude f643d83_hinclude_1.js:188
hinclude.hinclude_check_content f643d83_hinclude_1.js:126
hinclude.set_content_async f643d83_hinclude_1.js:47
req.onreadystatechange

[s7ntech]

Good evening, to help solve the problem, it would be possible to have a practical example also of "renderUserBadge" and version of browser used? would also be useful to know where it is defined.

Thank you for the help

[kingcrunch]

👍

[tomiford]

+1

[EmmanuelVella]

Hi, big +1 for this feature. But I have an issue with the f5c585b version :

TypeError: include[0] is undefined
include[0].innerHTML = string;

It works well if I remove [0] everywhere.

[L0rD59]

👍

[wwotoole]

+1

[viliam-husar]

+1

[mnot]

On the road (in China) at the moment, but will review and merge in ASAP -- don't worry, won't take any other pulls until I get to this :)

Thanks much,

[L0rD59]

@s7ntech i have some troubles with the 35e486c version when i'm trying to parse and serialize a textarea :

parser = new DOMParser();
parsed_document = parser.parseFromString('<textarea></textarea>', 'text/xml');
serialize = (new XMLSerializer()).serializeToString(parsed_document);
console.log(serialize); // output : <textarea/>

parser = new DOMParser();
parsed_document = parser.parseFromString('<textarea> </textarea>', 'text/xml'); // with space between
serialize = (new XMLSerializer()).serializeToString(parsed_document);
console.log(serialize); // output : <textarea> </textarea>

the same with div element :

parser = new DOMParser();
parsed_document = parser.parseFromString('<div></div>', 'text/xml');
serialize = (new XMLSerializer()).serializeToString(parsed_document);
console.log(serialize); // output : <div/>

do you have an idea ?

[L0rD59]

@s7ntech you have a bug in :

serialize.replace(/<script([\s\S]*?)\/>/g, '<script$1></script>')

example :

serialize = '<script type="text/javascript">alert("foo");</script><input type="radio" />';
serialize.replace(/<script([\s\S]*?)\/>/g, '<script$1></script>')
// ouput : <script type="text/javascript">alert("foo");</script><input type="radio" ></script>

[s7ntech]

I thank you for reporting, I will try a generic expression that handles tags and that will not cause further problems with the rest of the source

[s7ntech]

the behavior is the same for each tag, it is a problem caused by DOMParser, to overcome this I thought about using a regular expression to make the correction, but as you can see I did not tenuno consider several case studies

[mrbubblesort]

👍

[goetas]

+1!

[dlevacher]

Thanks for the patch.
Though I had to make a check on script type (text/javascript) in hinclude_check_js_code & hinclude_remove_tag_script because I also include templates (<script type='text/template' >..</script>) that should not be executed (not valid javascript).

[damienalexandre]

This is still a much needed functionality for hinclude. @mnot here is a virtual beer to help you: 🍺.

In fact, #28 does the same and look much much simpler: explicit attribute and eval of the loaded HTML.

[trsteel88]

+1

[respinoza]

+1

[mnot]

Agreed that #28 is much less intrusive.

[mnot]

#28 was merged in #61.