[vB 3] How to load Javascript code in a template called with AJAX ?

[cclaerhout]

VBULLETIN 3

I made a product that modifies the Editor of the template postbit_quickedit.

• That Editor is vB_Editor_QE_x; where x is the number of times I press "Edit" button (on the showthread page) to open the quick_editor. That number will be increment until I reload the showthread page.
  
• That Editor used bbcodes with buttons. Some of this buttons have customised javascript.
  Exemple:
  • Button Template
    

    <td><div class="imagebutton" id="{$editorid}_insertsmallimagex" onmouseout="javascript:insertsmallimage_{$editorid}_out(this);" onmouseover="javascript:insertsmallimage_{$editorid}_over(this);" onclick="javascript:insertsmallimage_{$editorid}_dumpit();"><img src="$stylevar[imgdir_editor]/insertsmallimagex.gif" width="21" height="20" alt="$vbphrase[ab_picture_big_x]" /></div></td>

  • Javascript (in template)
    

    function insertsmallimage_{$editorid}_dumpit(){var a=insertsmallimage_{$editorid}_getinput();var b=insertsmallimage_{$editorid}_getinputbis();if(a!="null"&&b!="null"){if(a&&b){result="[bimgx="+a+"]"+b+"[/bimgx]"}else{if(!a){result="[bimgx=150]"+b+"[/bimgx]"}if(!b){result="[bimgx="+a+"]$vbphrase[ab_picture_link][/bimgx]"}}window.vB_Editor["{$editorid}"].insert_text(result)}}function insertsmallimage_{$editorid}_getinputbis(){return PHP.trim(new String(prompt("$vbphrase[ab_picture]","$vbphrase[ab_picture_link]")))}function insertsmallimage_{$editorid}_getinput(){return PHP.trim(new String(prompt("$vbphrase[ab_picture_width]","$vbphrase[ab_picture_pixels]")))}function insertsmallimage_{$editorid}_out(a){vB_Editor["{$editorid}"].set_control_style(a,"button","normal")}function insertsmallimage_{$editorid}_over(a){window.vB_Editor["{$editorid}"].set_control_style(a,"button","selected")}

• I fetch my two templates to postbit_quickedit.

Problem: The buttons using customised Javascript don't work.

Problem origin: The postbit_quickedit template is called with AJAX. So my Javascript can't be interpret.

My problem: After spending hours trying to understand how to make my hard coded Javascript code works with this template called via AJAX, I still don't get it. Is there an easy way to do it ?
P.S: I'm coding for hobby, it takes me hours to do what people here might do in 5 minutes.

The only solution I found, is to fetch my JS template to Showtread template, but it's only working for the first edit (vB_Editor_QE_1).

[kh99]

Javascript included in a document returned by an ajax call won't be executed, as you found out. However, you can eval() it. That is, if you can get the code into a javascript string, you can just call eval(string).

[cclaerhout]

Thanks for your answer. Just to be sure, the eval() is the Javascript function, not the PHP function. If it's the Javascript function,where should I put it ? Inside my Javascript code which is postbit_quickedit template ? Somewhere else in my postbit_quickedit template ? Or to the parent page, the Showthread template ?

[kh99]

Yes, I mean the javascript eval(). You say that your template called with ajax, so there has to be javascript code doing the ajax call and handling the return, right? So I guess you'd have to do the eval where the return from that ajax call is processed.

[cclaerhout]

It's postbit_quickedit vB template, the one who is displayed when the "edit" button is pressed.
I understand the logic what what you said, but I'm no sure to be able to find this ^^ I'm going to keep on searching. If vB has a hook for this, don't hesitate to tell me

Thanks again.

[kh99]

Yeah, sorry I had trouble understanding. I guess what you mean is that the template is getting sent whenever you hit edit (and you have nothing to do with that), but there's javascript in it that you'd like to execute.

Anyway, maybe someone else will have an idea.

[cclaerhout]

No I guess you were right. Many websites also explain the Javascript must be eval() or something equivalent.
Sources:

• http://www.daniweb.com/web-developme.../threads/53137
• http://webdeveloper.com/forum/showthread.php?t=177998
• http://www.posteet.com/view/1207
• http://forums.digitalpoint.com/showthread.php?t=79504

But I don't know how to do it, especially with vB.

I've attached a scheme of my problem.

[kh99]

I don't know if there's a clever way to do it, but if you want to run some javascript after the quick editor loads, you could modify clientscript/vbulletin_quick_edit.php. There's a function that gets called when the ajax call is complete:

vB_AJAX_QuickEditor.prototype.display_editor=function(C){

(it helps if you have a program that can reformat the .js file).

[cclaerhout]

I saw a product that uses "misc_start" hook to execute js:

PHP Code:

@ob_start(); ?>
function function_name(){...};
    <?php    
    header('Content-type: application/x-javascript');
    exit;

It might be a way to do this...

--------------- Added [DATE]1313790827[/DATE] at [TIME]1313790827[/TIME] ---------------

The "quickeditor_improver" product uses a trick to get access to that Javascript file:

It uses the hook "showthread_complete" to search inside the SHOWTHREAD "clientscript/vbulletin_quick_edit.js?v=" and replaces it with a new value via misc.php page.

			unset($search, $replace);
			$search = 'clientscript/vbulletin_quick_edit.js?v=';
			$replace = 'misc.php?do=PUT_NAME_HERE_quickedit&v=';
			$vbulletin->templatecache['SHOWTHREAD'] = str_replace($search, $replace, $vbulletin->templatecache['SHOWTHREAD']);
			unset($search, $replace);

Then it uses the hook misc_start

if ($_REQUEST['do'] == 'PUT_NAME_HERE')
{
	@ob_start(); ?>
Copy here the content of "vbulletin_quick_edit.js" file (without the header)
	<?php
	header('Content-type: application/x-javascript');
	exit;
}

Now my problem is to know what code I have to use to EVAL() my javascript.

--------------- Added [DATE]1313791148[/DATE] at [TIME]1313791148[/TIME] ---------------

By the way, I found a nice website that helps to reformat code online:
http://jsbeautifier.org/

--------------- Added [DATE]1313793365[/DATE] at [TIME]1313793365[/TIME] ---------------

I've tried to put this code inside the display_editor function but it kills the quickedit function to transfer me to advanced editor :

	var div = C.responseXML.getElementById("addon_js");
			div.innerHTML = innerHTML;
			var x = div.getElementsByTagName("script");
			for(var i=0;i<x.length;i++)
			{
	       	eval(x[i].text);}

P.S: addon_js is the id of the div containing my Javascript.

--------------- Added [DATE]1313795897[/DATE] at [TIME]1313795897[/TIME] ---------------

This function looks nice, i've tried to edit it, but fail to every time

If someone got an idea...