重新初始化Ajax请求后processing.js草图 [英] reinitialize processing.js sketch after ajax request
问题描述
我想重烧的造型和processing.js，我挂在头上，使他们正确地通过一个Ajax请求带来了的时候显示的脚本。我看到在Ajax请求该code需要有，但我不知道该怎么告诉code简单地重新应用脚本。我已经看到了使用getScript加入脚本（）来做到这一点的人，但我可以告诉这个重新加载脚本，而不是简单地告诉它重复或重烧。是不是所有的脚本需要自己重新初始化？我发现语法荧光笔.highlight（）方法，但我还没有得到处理脚本加载。目前， Processing.loadSketchFromSources（$（'＃处理），['mysketch.pde']）; 不起作用。我使用的所有库的当前版本。惊讶我一直没能找到答案，因为很多人似乎有同样的问题。感谢您的帮助！
索引页：
$（文件）。就绪（函数（）{
//把所有的jQuery在这里。
//检查URL的散列值存在（为书签）
$ .history.init（页面加载）;
//突出选定的链接
$（'一[HREF ='+ document.location.hash +]）addClass（'选择'）。
//搜索链接与REL设置为阿贾克斯
$（'一[相对= AJAX]'）。住（点击，函数（）{
//取得完整的URL
VAR哈希= this.href;
//删除＃值
散列= hash.replace（/^.*#/，''）;
//为后退按钮
$ .history.load（散）;
//清除选定类和类类添加到选定的链接
$（'一[相对= AJAX]'）removeClass移除（'选择'）。
$（本）.addClass（'选择'）;
//隐藏的内容，并显示进度条
// $（'＃内容）隐藏（）。
$（'＃装载）显示（）。
//运行AJAX
GETPAGE（）;
//取消锚标记行为
返回false;
}）;
}）;
功能页面加载（散）{
//如果散列值存在，运行AJAX
如果（散）GETPAGE（）;
}
功能GETPAGE（）{
//生成PHP脚本参数
VAR数据=页面='+ EN codeURIComponent（document.location.hash）;
$阿贾克斯（{
网址：loader.php
键入：GET，
数据：数据，
缓存：假的，
成功：函数（HTML）{
//隐藏进度条
$（'＃装载）隐藏（）。
//添加从阿贾克斯检索到的内容，并把它放在＃内容股利
$（'＃内容）HTML（HTML）;
//显示机身采用淡入过渡
$（'＃内容）淡入（快）。
//重新样式？
//使用语法高亮。这个工程
SyntaxHighlighter.highlight（）;
// relaod处理草图，目前显示任何
Processing.loadSketchFromSources（$（'＃处理），['mysketch.pde']）;
}
}）;
}
这AJAX加载内容：
＆LT;！ - ajax'd内容 - ＆GT;
＆LT; ??＆GT;
＆LT; H2＆GT; code＆LT; / H＆GT;
＆LT; pre类=刷：PHP的＆GT;
$ LAST_MODIFIED = filemtime（header.php文件）;
回声（最后修改：）;
回声（日期（m.j.y H：IA，$ LAST_MODIFIED））;
＆LT; / pre＆GT;
＆LT;脚本类型=应用/处理＆GT;
＆LT; / SCRIPT＆GT;
＆LT;帆布数据处理，源=mysketch.pdeID =处理＆GT;
＆LT; /帆布＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
＆LT; ??＆GT;
那么，让我们来分析一下，当你有一个（外部或内部）的Javascript code通常会发生什么：它会自动执行仅code表示在全球范围内的有效性。 好的脚本将只添加一个命令，在全球范围内，这将在随后的函数/方法的地方执行初始化code。
所有你需要做的就是查看外部JavaScript文件，并找出哪些是从全局范围内执行。没有通用的答案。有些脚本使用一个对象，并调用它的init（）方法...但是，这完全是受开发者的想象力。
I would like to refire the styling and processing.js scripts that i linked to in the head so that they display correctly when brought in through an ajax-request. I see where in the ajax request this code needs to be, but i don't know how to tell the code to simply reapply the script. I've seen people using getScript() to do this, but from what i can tell this reloads the script, rather than simply telling it repeat or refire. Do all of the scripts need their own reinitialization? I found the syntax highlighters .highlight() method, but i am yet to get the processing script to load. currently, Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']); does not work. I am using current versions of all libraries. Surprised i haven't been able to find the answer yet, as a lot of people seem to have the same problem. Thanks for your help!
index page:
$(document).ready(function () {
// put all your jQuery here.
//Check if url hash value exists (for bookmark)
$.history.init(pageload);
//highlight the selected link
$('a[href=' + document.location.hash + ']').addClass('selected');
//Search for link with REL set to ajax
$('a[rel=ajax]').live("click",function(){
//grab the full url
var hash = this.href;
//remove the # value
hash = hash.replace(/^.*#/, '');
//for back button
$.history.load(hash);
//clear the selected class and add the class class to the selected link
$('a[rel=ajax]').removeClass('selected');
$(this).addClass('selected');
//hide the content and show the progress bar
//$('#content').hide();
$('#loading').show();
//run the ajax
getPage();
//cancel the anchor tag behaviour
return false;
});
});
function pageload(hash) {
//if hash value exists, run the ajax
if (hash) getPage();
}
function getPage() {
//generate the parameter for the php script
var data = 'page=' + encodeURIComponent(document.location.hash);
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//hide the progress bar
$('#loading').hide();
//add the content retrieved from ajax and put it in the #content div
$('#content').html(html);
//display the body with fadeIn transition
$('#content').fadeIn('fast');
//reapply styles?
//apply syntax highlighting. this works
SyntaxHighlighter.highlight();
//relaod processing sketch, currently displays nothing
Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']);
}
});
}
This the ajax-loaded content:
<!--ajax'd content-->
<??>
<h2>code</h2>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="application/processing">
</script>
<canvas data-processing-sources="mysketch.pde" id="processing">
</canvas>
</div>
</body>
</html>
<??>
So, let's analyze what usually happens when you include an (external or internal) Javascript code: It will automatically execute only the code that is available in the global scope. "Good" scripts will only add one command to the global scope which will then execute the initialization code somewhere in a function/method.
All you need to do is view the external Javascript file and find out what is being executed from the global scope. There is no general answer to that ... some scripts use an object and call its init() method ... but that is totally subject to the imagination of the developer.
这篇关于重新初始化Ajax请求后processing.js草图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
