标签/Tag为[jQuery]的文章

简单的编辑器闭包

闲暇无聊,简单的把原来BBS的的编辑器进行了闭包处理。和原来的功能没有啥区别,仅仅视简单的 UBB支持和ajax 上传。 纯粹算是 字的 N 种写法。

记录下来,以免忘记,其中 editer 的 ID 为 document.FORM.inpost

代码如下:

[JS] 静态输出的评论也显示UA ,

就像本站的本地评论一样。 虽然,本地评论我修改了后台程序,一样存储了评论者 Useragent 。但是除非 JS 方式显示。 不然默认是不会显示的。

原因很简单。 本站解析 UA 是用的这个JS库,而非后台的 Perl 程序。 而本站的本地评论现在显示是动静结合的。 简单的说,每篇文章都是一个静态的HTML页面,定期更新评论在这个页面上。同时JS载入评论,进行判断是否写入静态页面并动态更新之。 显然静态页面解析不可能对 Useragent 字符串进行处理。 而路杨并不像完全对静态评论进行JS替换。。 复杂的的办法就是在后台用 Perl 再写一个解析 UA 的程序出来作为静态HTML的 UA 解析输出。但是 UA 的构造太杂乱了。。。。

今天想了想,其实很简单,还是前段解决吧。 一个 JQ each搞定。 代码如下:

code$("span[rel='ua']").each(function(){
if ( $(this).hasClass("done") ) return;
var $el = $(this).closest(".comment");
var _id= $el.attr("data-comment-id");
$(this).replaceWith(tt.show_ua_by_id(_id))
// $(this).html( tt.show_ua_by_id(_id) ).addClass("done").removeAttr("rel");
});

tt.show_ua_by_id() 代码片段如下:

codeshow_ua_by_id: function(idx){
var s = json_data.comments[idx];
if (!s) return '';
if (s.agent) return tt.show_ua(s.agent);
return '';
},

而静态网页在要显示 UA 的位置加入 <span rel="ua"></span> 就一切OK了。

上面的 JS 都是片段, 完整可以查看本站 评论JS:http://static.easunlee.cn/js/new_mt_comments.js

记录下来,给自己备忘。

--EOF--

[随笔]关于 JS 和 ajax 提交评论等等 ,

This is a sitelog of Easun.org.

因为 本地评论 JS 化,又重写了一遍 MTajax 提交过程。梳理了一下流程。

主要是删除了 MT 提交过程的 2次服务器认证,把第一次服务器认证(登录信息预提交验证) mtCommentSessionVerify 有限度地交给 JS + cookie

简单的说,就是设置全局变量 usernull,然后重新在 cookie 中读取 user 来判断登录信息是否正常? 然后其他的认证在 提交表格 时完成就好。 简单 JS 片段如下:

code var refresh_user = function(u) {
if (u) mtSetUser(u);
if (!u) { user = null; mtFireEvent('usersignin'); u = mtGetUser(); }
if ( u && u.is_authenticated ) { /* do nothing*/ }
else { $f.find(':input[name="sid"]').attr("value","") ; ShowCommentsOpenData(); }
};

然后发现 JQ $.ajax 的小问题:

我的 $.ajax 如下:

code$.ajax({
type: 'POST',
cache:false,
url: url,
context: el,
xhrFields: { withCredentials: true },
data: $f.serialize(),
success: successfuc,
beforeSend:beforefun,
error: errorfun,
complete:completefuc
});

本来是吧 refresh_user 写到 beforeSend 中的,但是执行的时候发现 refresh_user 中对 $f 的改变,并没有在 data: $f.serialize() 中 体现出来。 所以只好显式在 $.ajax 前调用此函数了。

笔记下来,为自己提醒。

另外,本来对 JS 全面进行 JQ 改写来着,但是实际对 form 元素操作中发现,同样对

code<form name="comments_form" id="comments-form">
<input type="hidden" name="preview" value="" />
...
</form>

中 的 name="preview"value 操作。 原来的代码是

codevar f = document['comments_form'];
if (f.preview.value == '') f.preview.value = '1';

JQ 呢? 貌似。。。。。

codevar $f = $("#comments-form");
var $preview= $f.find(':input[name="preview"]');
if ($preview.attr("value") == '') $preview.attr("value","1");

f$f 是为了方便操作预先定义好的。 貌似还是不用 JQ 操作的快一点。或者就现在这样混合用吧。。。。

另外,给 ajax 提交完成后刷新新评论搞了一段简单的 JQ 特效: 代码如下:

code var animate_item = function(id) {
var $el =$("#comments-content .comment#comment-"+id);
var _top = $el.offset().top - ( $(window).height() - $el.height() )/2;
$("html,body").animate({scrollTop:_top},1000);
$el.addClass("notice")
.animate({left:'30px',opacity:'0.2'},"slow")
.animate({left:'0px',right:'30px',opacity:'0.8'},"slow")
.animate({left:'0px',right:'0px',top:'30px',opacity:'0.2'},"slow")
.animate({left:'0px',right:'0px',top:'0px',bottom:'30px',opacity:'0.8'},"slow")
.animate({left:'0px',right:'0px',top:'0px',bottom:'0px',opacity:'1'},"slow");
var total= parseInt( $("#comments").attr("data-total"));
function c() { $el.removeClass("notice").addClass( (total%2) ? "odd":"even" ); }
$el.one('click',c).one('mouseover',c);
};

没有抓 gif ,简单完成效果如下:

jq_submit_png.png

--EOF--

[SiteLog]JQ AJAX 跨子域Post再总结 ,

为了配合 CDN 前台。 后台的域名改成了 mt.easun.org/cgi-bin。 之所以启用子域而不是独立域名,是因为同域不同子域间可以天然共享 cookie ,而MT的POST必须带有 cookie ,不然登录信息验证不过。

测试一下正常的POST,没有任何问题。cookie 由于 CookieDomain 为 .easun.org ,所以cookie信息正常传递给了 mt.easun.org 后台。

但是接下来用 JQ $.post 进行 AJAX POST 的时候,就出现跨域问题了。 如果是Get,很简单,可以参考我上篇( [JQ+Perl]JQ AJAX跨域请求HTML/JS页面内容总结 )解决之。 POST 就必须设置跨域请求了。

不想回归 iframe 。幸好服务器部分配置可以自己控制。在后台脚本目录建立 .htaccess,内容如下:

code<IfModule mod_headers.c>
Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Origin "http://easun.org"
</IfModule>

这下应该可以 $.post 了吧?

但是结果依然很悲哀,这次 POST 成功, 但是 JQ 并不传递 Cookie。导致身份认证出错。 Google之。发现跨域(包括子域), 如果要传递Cookie, JQ AJAX 还需要手动发送认证凭证,设置 withCredentials ,这样才会传递 Cookie.

根据这些信息。 重写 $.post$.ajax 模式,代码如下:

code$.ajax({
type: 'POST',
cache:false,
url: url,
data: $("#comments-form").serialize(),
success: function(data){
if (f.preview.value =='1' ) { EasunisPreReturn(data);}
else {EasunisPostReturn(JSON.parse(data));}
},
xhrFields: { withCredentials: true },
});
return false;

调试之,一切OK。

参考资料:

1.【前端笔记】使用ajax跨域withCredentials的作用

后记:

对于IE8,9 来说。JQ AJAX 跨子域Post 即使设置了上述也会失败。原因很奇葩,跨域提交需要使用 XDomainRequest 对象。

幸好有 JQ 插件 jQuery-ajaxTransport-XDomainRequest 可以解决。 在 $.ajax 前引入:

code<!--[if lte IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
<![endif]-->

同时,为了兼容出错信息,当$.ajax 失败的时候,设定正常方式POST。虽然这样界面乱了,但是保证功能正常。

codeerror: function(){ f.submit(); }

--EOF--

[JQ+Perl]JQ AJAX跨域请求HTML/JS页面内容总结 ,

路杨有2个域名,[easun.org](http://easun.org) [easunlee.org](http://easunlee.org) 统统指向同一个地址。
而小站的 [blog 主页](http://easun.org/blog) 的分页获取是通过 [jQuery](http://jquery.com/) 的AJAX完成的。 见抓图。 index_15_6_5.png ###核心代码为自写。如下: function ajax_get (url, mode,callback) { var sdiv = $("#search-results"); if (!sdiv) return true; $.ajax({ url:url, data: {'format':'js'}, success: function(data){ if ( data.error == null ){ if (mode == 'append') sdiv.append(data.result.content); else sdiv.html(data.result.content); if (data.result.next_url) { next_url = data.result.next_url; } else { $('#show-more').hide(); } return false; }else { location.href = url;return true;} }, error:function(req, status, obj){ location.href = url; return true;}, beforeSend: function(xh){ /*do sth before send*/ }, complete: function(xh){ /*do sth for complete*/ } , }); } 其中url 为本站后台地址,大致为: `http://easun.org/{path-to-mt}/mt-search.cgi?IncludeBlogs=2&archive_type=Index&template_id={main_index_tmp_id}&page={num}` 加上`format=js`参数则为JSON结构, 返回的数据大致为 {"error":null,"result":{"next_url":"下一页的地址","content":"本页展示数据"}} 如果出错,则在本页面打开没有 `format=js` 参数的完整 HTML 版本。 ## 但是,这个脚本还是有问题的。 如果以域名 访问,则毫无问题, 一旦用 则基本上不能完成。 不用说后期路杨打算给后台设置不同的子域名。 原因很简单: **ajax 不能跨域**。(当然某些BT 的 ie 版本正常跨域,汗。) ###有没有办法解决这个问题呢? 研究了一番,发现使用 [jQuery](http://jquery.com/) 的 JSONP 方式即可完成。 即让后台返回的数据为 mycallback( {"error":null,"result":{"next_url":"下一页的地址","content":"本页展示数据"}} ); ###当然需要修改核心代码,让 $.ajax 工作在 JSONP 下: function ajax_get (url, mode,callback) { var sdiv = $("#search-results"); if (!sdiv) return true; $.ajax({ url:url, data: {'format':'js'}, dataType: "jsonp", /*定义dataType*/ jsonpCallback:"mycallback", /*定义jsop 回调函数*/ success: function(data){ if ( data.error == null ){ if (mode == 'append') sdiv.append(data.result.content); else sdiv.html(data.result.content); if (data.result.next_url) { next_url = data.result.next_url; } else { $('#show-more').hide(); } return false; }else { location.href = url;return true;} }, error:function(req, status, obj){ location.href = url; return true;}, beforeSend: function(xh){ /*do sth before send*/ }, complete: function(xh){ /*do sth for complete*/ } , }); } 不用担心返回的 JSONP 数据在 `success: function(data)` 中无法解析,只要定义了 `dataType: "jsonp",jsonpCallback:"mycallback",` 则 `success: function(data)`中的 data 自动为 JSONP 中包含的 JSON数据。 而不是 JSONP 数据串。 现在的问题,是后台的 mt-search.cgi 不具备输出 JSONP 格式的能力, `format=js` 只能输出 JSON 格式,这个时候如果不想修改 mt 代码。则只能通过自己写的脚本(Perl)来中转了。

[MT Hack]修改模板来完成MT的AJAX提交评论 ,

曾经,本站在MT3时代,曾经写过以AJAX提交评论预览 的帖子。

那个也是通过修改模板+自写js实现,没有对MT的源代码进行任何修改,绿色无污染,不影响升级。

后来,通过自己摸索,也实现了 ajax 方式提交评论。但是一直都没有写出教程,今天有点时间。特意写出分享之。

具体效果见本站评论提交(预览和发表)。

言归正传,要实现 ajax 方式首先要定义一系列 js 函数。 由于 本站已经迁移到了 JQuery 平台,所以在改写 mt.js 需要先加入 JQ 支持,即加入:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

[SiteLog]网站改版和移动访问优化

This is a SiteLog for Easun.org。

这也是3年以来第一次改版。 目标很单纯, 抛弃 XHTML ,改投 HTML5

耗时一周,代码基本上都是自己在改。 网站结构全部重构,但是尽量通过 CSS 让大家感觉不出来界面有大的调整 :)

主要改动如下:

  1. 结构重写,CSS也全部推翻重写。 用 HTML5 的 header section nav article aside footer 等新标签替换掉了原模板中大量的 div 标签。让他显的有意思,并大量删除了自带模板中多重嵌套的div。这样一来大大的减少了网页的容积 :P 评论框仿照 扶凯 大侠的网站,进行了仿写。 不过貌似在手机上lable标签有点变形~~
  2. 移动优化,也就是改写了CSS,利用CSS3的特性,让页面布局可以根据不同的浏览器分辨率进行自动切换,用我的 Mate7 看了一下,结果还是差强人意:)
  3. JS改写, 因为LightBox升级,jQuery 库彻底引入,自己的 ajax 提交评论以及一些自定义的JS都统统用 jQuery 库重写了。让代码更简洁。
  4. QQ登录的引入, 给整个网站加入了最热门的 QQ互联 功能,也就是用QQ帐号登录评论功能。 代码以 plugin 方式运行, 也算自己的原创 MT 插件,等稍后整理出来,于同好共享之。另外,评论登录界面也做了修改,融合了 MT 4 的列表显示来代替MT 5 的select选择。更好看意见,大家可以点击 http://easun.org/cgi-bin/mt/cp?__mode=login&blog_id=2 来看看结果。

基本上的改动就是这样了。 一些东西,比如 ajax 提交评论、后台的的防止 SPAM 的SimpleComment 0.12 等自己折腾的东西,等有时间会写成博文,方便大家也方便自己:)

--EOF--

[SiteLog]一则js错误寻找和 jQuery ,

本站的图片显示一直使用 LightBox
最近升级,才发现 LightBox悄悄迁移到了 jQuery 平台。
笑ing, jQuery 貌似越来越份额多了。

想到既然是要导入 jQuery ,干脆把自己的一些 js 也用 jQuery 重写一下,尤其是 ajax 方式提交评论的代码。
于是,打开 mt.js ,看见了大量的

var f = document['comments_form'];

于是就想当然了。把原来的代码改成
$.post("http://easun.org/path/to/mt-cms.cgi",
$.param($("#comments_form").serializeArray())
).success(function(data) {
if (f.preview.value =='1' ) { EasunisPreReturn(data);}
else {EasunisPostReturn(JSON.parse(data));}
}) ;

结果运行不能正常获取返回值,百思不的其解。
最后,打开 模板的 form 部分。发现 代码如下
<form ... name="comments_form" id="comments-form" ... >

我倒~, id 根本就不对。难怪出错。
回到 mt.js 改成
$("#comments-form")

运行,一切OK。

笔记之,给自己再次修改提个醒。

--EOF--