AngularJS提交表单,表单编辑默认值

研究了下高大上的AngularJS决定试试它的表单编辑提交功能,据说比JQuery强的不是一星半点。
好奇呀,试试吧。。。。。搞了好久,尼玛。。。靠。。靠。。靠。。尼玛 。。靠。。靠。。。。好吧,谁让我手欠呢。

搜索到了很多关于AngularJS Form的案例
如:
http://www.lupaworld.com/article-240000-4.html
http://www.angularjs.cn/A08j
https://github.com/tiw/angularjs-tutorial
https://github.com/tiw/angularjs-tutorial/blob/master/ng-form.markdown
https://github.com/tiw/angularjs-tutorial/blob/master/ng-form2.markdown

模仿着我要搞了个AngularJS Form,但是问题来了。。。。
发现初始化时候ng-model 跟 input 标签里的 value 不默契,冲突。。
后来想再AngularJS controller 里预先赋值 $scope.formData = {‘name’:’张三’};
可以通过php程序把值赋到这个AngularJS controller里

<!-- AngularJS controller -->
<script>
    var formApp = angular.module('formApp', []);
    function formController($scope, $http) {
        $scope.formData = {'name':'张三','remark':'备注'};
        $scope.myForm = function() {
            $http({
                method  : 'POST',
                url     : '/role/edit',
                data    : $.param($scope.formData),  // pass in data as strings
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
            })
                .success(function(data) {
                    console.log(data);
                    if (!data.success) {
                    } else {
                    }
                });
        };
    }
</script>
<!--对应form里的input调整-->
<input type="text" name="name" ng-model="formData.name" class="form-control" placeholder="Role Name">

后来又搜啊搜 发现还有其他办法,这么个东东 ng-init=”formData.name=’张三'”

<input type="text" name="name" ng-model="formData.name" ng-init="formData.name='张三'" value="">

好了,终于世界又和平了。。。。完。。。。

highcharts图表插件,优秀js图表

最近使用百度得echarts开始感觉还不错,越用这越觉着不爽
于是研究一款新得图表插件 highcharts
貌似 facebook twitter yahoo visa 都用这个
很华丽,值得一试
http://www.highcharts.com/

F8FC1553-C313-46DD-976A-DFFD7B514D44

很好用的一段页面html跳转代码,百度跳转代码

使用时需向 $message, $jumUrl, $waitSecond里面赋值

<div class="error-container">
  <h3>{if $message}{$message}{else}{$error}{/if}</h3>
  <div class="error-details">页面即将<b id="wait">{$waitSecond}</b>秒后跳转,如果没有跳转请<a id="href" href="{$jumpUrl}">点击此处</a></div> <!-- /error-details -->
</div> <!-- /error-container -->

<script type="text/javascript">
	(function(){
	var wait = document.getElementById('wait'),href = document.getElementById('href').href;
	var interval = setInterval(function(){
		var time = --wait.innerHTML;
		if(time <= 0) {
			location.href = href;
			clearInterval(interval);
		};
	}, 1000);
	})();
</script>

百度的跳转代码

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf8">
		<title>百度贴吧</title>
	</head>
	<body>
		<div style="width:650px;margin:10px auto;border-bottom:1px solid #0000cc;">
			<div style="height:69px;text-align:left;">
				<a href="http://blog.xxtime.com">
				<img src="http://img.baidu.com/img/post-jg.gif" border=0 alt="到百度贴吧首页"></a>
			</div>
			<div style="height:20px;font-size:12px;color:#FFFFFF;font-weight:bold;background-color:#0000cc;padding:4px 0 0 4px;">提示信息</div>
			<p style="margin:20px 0 2px 20px;font-weight:bold;font-size:14px;text-align:left;">很抱歉,你访问的贴子不存在。</p>
			<p id="relocation_tip" style="margin:0 0 0 20px;font-size:12px;line-height: 30px;text-align:left;">系统将在<span id="time" style="color:red;">100</span>秒后,自动跳转到<a href="http://tieba.baidu.com/index.html" target="_self">贴吧首页</a></p>
		</div>
		<script>
			function closeWindow(){
				window.open('', '_self', '');window.close();
			}
			var i = 100;
			if(i!=0){
				window.close_id = setInterval(function() {
					if (i > 0) {
						document.getElementById('time').innerHTML = i;
						i = i - 1;
					}
					else {
						$.tb.location.setHref("http://blog.xxtime.com");
						clearInterval(window.close_id);
					}
				}, 1000);
			}
			else{
				document.getElementById('relocation_tip').innerHTML=" ";
			}
		</script>
		<script>window.modDiscardTemplate={};</script>
	</body></html>

js检测浏览器类型版本,判断浏览器类型,检查用户使用的浏览器

<script type="text/javascript">
    var userAgent=navigator.userAgent.toLowerCase(), s, o = {};
    var browser={
        version:(userAgent.match(/(?:firefox|opera|safari|chrome|msie)[/: ]([d.]+)/))[1],
        safari:/version.+safari/.test(userAgent),
        chrome:/chrome/.test(userAgent),
        firefox:/firefox/.test(userAgent),
        ie:/msie/.test(userAgent),
        opera: /opera/.test(userAgent )
    } /* 获得浏览器的名称及版本信息 */

    if (browser.ie && browser.version > 6){document.writeln('IE'+browser.version);} /* 判断是否为IE6以上 */
    if (browser.safari) {document.writeln('safari');} /* 判断是否为safari */
	if (browser.firefox) {document.writeln('Firefox');} /* 判断是否为firefox */
	if (browser.chrome) {document.writeln('Chrome');} /* 判断是否为chrome */
	if (browser.opera) {document.writeln('Opera');} /* 判断是否为opera */
	if (browser.ie) {document.writeln('IE');} /* 判断是否为IE */
</script>

参考http://www.ludou.org/2-way-to-detect-browser.html

fullcalendar实例应用,fullcalendar使用教程,fullcalendar事件更新,日历控件,fullcalendar移动

FullCalendar 是一个 优秀的jQuery 的日历插件,支持请求json数据,支持google 日历接口,是我经过几次不同jquery日历插件对比后筛选出来最优秀的一款。用它做了个有用的功能,当然在使用过程中碰到了很多问题,比如事件更新就是一个让人头疼的东西。

官方提供的几种fullcalendar事件更新办法并不是那么完善,比如在fullcalendar移动事件的时候,有的时候会成功,有的时候不会成功,后经我分析 是在移动过程中,由于高频度的移动,导致一个fullcalendar json没有完全请求返回完成,然后又进行一个新的fullcalendar移动操作。导致fullcalendar事件没有及时更新此时如果迅速移动就会使用原来事件记录的时间信息进行新的移动,所以会导致fullcalendar移动出现偶尔成功 偶尔失败的问题

20130909112255

本例用到的插件有 fullcalendar、WdatePicker、jquery-1.10.2.min.js、jquery-ui-1.10.3.custom.min.js

下面是部分html代码参考

<div id='calendar'></div>
<div style="DISPLAY: none" id="reservebox" title="reservebox">
    <form id="reserveformID" method="post">
        <div class="sysdesc">&nbsp;</div>
        <div class="rowElem"><label>服务器名:</label>
        <input type="text" name="servername" id="server" class=""></div>
        <div class="rowElem"><label>游戏:</label>
        <select id="game" name="game">
            <!--{html_options options=$dict_game[1] selected=$dict_game[0]}-->
        </select>
        <div class="rowElem"><label>合作商:</label>
        <select id="partner" name="partner">
            <!--{html_options options=$dict_platform[1] selected=$dict_platform[0]}-->
        </select>
        </div>
        <div class="timePicker"><label>开服时间:</label>
        <input type="text" maxlength="16" name="start" id="start" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" value=""></input>
    </form>
</div>

下面是javascript代码参考,主要资料都在这里

<script type="text/javascript">
	function gotoDate(){
		date = document.getElementById("timePicker").value.split(" ")[0];
		date = date.split('-');
		$('#calendar').fullCalendar( 'gotoDate', date[0], parseInt(date[1])-1, parseInt(date[2]));
		//$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
	}

	$(document).ready(function() {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		var calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			buttonText: {today: '今天', month: '月', agendaWeek: '周', agendaDay: '日'},
			dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
			dayNamesShort:['日', '一', '二', '三','四', '五', '六'],
			monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
			monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
			selectable: true,
			selectHelper: true,
			editable: true,
			events: "json",
			//单日点击
			dayClick: function(date, allDay, jsEvent, view) {
				var time = $.fullCalendar.formatDate(date, "yyyy-MM-dd hh:mm");
				document.getElementById("start").value = time;
				var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
				$( "#reservebox" ).dialog({
					autoOpen: false,
					height: 300,
					width: 400,
					title: '任务 ' + selectdate,
					modal: true,
					position: "center",
					draggable: false,
					buttons: {
						"关闭": function() {
							$(this).dialog( "close" );
						},
						"确认": function() {
							var server_name = $("#server").val();
							var game = $("#game").val();
							var partner = $("#partner").val();
							var start = $("#start").val();
							if (server_name == '' || game < 1 || partner < 1 || start == '') {
								alert('有未填写项目');
								return FALSE;
							}
							$.ajax({
							   type: "POST",
							   url: "http://test.xxtime.com/newserver/add",
							   data: "server_name="+server_name+"&game="+game+"&partner="+partner+"&start="+start,
							   dataType: 'json',
							   contentType: "application/x-www-form-urlencoded; charset=utf-8",
							   success: function(msg){
							   		if (msg.error>0) {
										alert('失败 ' + msg.msg);
										return FALSE;
									}
									// TODO : 更新事件
									setTimeout('$("#calendar").fullCalendar("refetchEvents")', 2000);
							   }
							});
							$(this).dialog( "close" );
						}
					}
				});
				$("#reservebox").dialog( "open" );
				return false;
			},
			//事件点击
			eventClick: function(event, jsEvent, view) {
				if (event.url) {
					return 1;
				}
				$.ajax({
				   type: "POST",
				   url: "http://test.xxtime.com/newserver/detail/",
				   data: "id="+event.id,
				   dataType: 'json',
				   success: function(msg){
				   		$("#server_id").html(msg.server_id);
						$("#server_name").html(msg.server_name);
						$("#game_name").html(msg.cn_name);
						$("#partner_name").html(msg.plat_name);
						var d = new Date(msg.open_time*1000);
						open_time = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes();
  						$("#open_time").html(open_time);
				   }
				});
				$( "#dialog" ).dialog({
					autoOpen: false,
					height: 200,
					width: 400,
					title: '任务信息',
					modal: true,
					position: "center",
					draggable: false,
					buttons: {
						"编辑": function() {
							$(this).dialog( "close" );
							$( "#editbox" ).dialog({
								autoOpen: false,
								height: 300,
								width: 400,
								title: '编辑任务 ' + event.id,
								modal: true,
								position: "center",
								draggable: false,
								buttons: {
									"关闭": function() {
										$(this).dialog( "close" );
									},
									"确认": function() {
										var server_name = $("#editserver").val();
										var game = $("#editgame").val();
										var partner = $("#editpartner").val();
										var start = $("#editstart").val();
										$.ajax({
										   type: "POST",
										   url: "http://test.xxtime.com/newserver/edit",
										   data: "id="+event.id+"&server_name="+server_name+"&game="+game+"&partner="+partner+"&start="+start,
										   dataType: 'json',
										   contentType: "application/x-www-form-urlencoded; charset=utf-8",
										   success: function(msg){
												if (msg.error>0) alert('失败 ' + msg.msg);
										   }
										});
										//更新事件重新渲染
										event.title = server_name;
										event.game_id = game;
										event.partner_id = partner;
										event.start = $.fullCalendar.parseDate(start);
										$('#calendar').fullCalendar('updateEvent', event);
										setTimeout('$("#calendar").fullCalendar("refetchEvents")', 2000);//二次保险更新

										$(this).dialog( "close" );
									}
								}
							});
							$("#editserver").val(event.title);
							$("#editgame").val(event.game_id);
							$("#editpartner").val(event.partner_id);
							$("#editstart").val(event.day + ' ' + event.start.toString().split(" ")[4].substring(0,5));
							$("#editbox").dialog( "open" );
							return false;
						},
						"删除": function() {
							if (confirm('确认删除?')) {
								$.ajax({
								   type: "POST",
								   url: "http://test.xxtime.com/newserver/delete/",
								   data: "id="+event.id,
								   dataType: 'json',
								   success: function(msg){
								   		if (msg.error>0) alert('失败 ' + msg.msg);
								   }
								});
								$(this).dialog( "close" );
								$("#calendar").fullCalendar("removeEvents",event.id);
							}
						}
					}
				});
				$("#dialog").dialog( "open" );
				return false;
			},
			eventRender: function(event, element) {
				var start = $.fullCalendar.formatDate(event.start, "HH:mm");
				var end = $.fullCalendar.formatDate(event.end, "HH:mm");
				element.html("<div class='fc-event-inner'><span class='fc-event-title'>"+start+" "+event.title+"</span></div><div class='fc-event-bg'></div>");
			},
			//事件移动
			eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
				timeChanged = (dayDelta * 24 * 60 + minuteDelta) * 60;
				$.ajax({
				   type: "POST",
				   url: "http://test.xxtime.com/newserver/edit",
				   data: "id="+event.id+"&timeChanged="+timeChanged,
				   dataType: 'json',
				   success: function(msg){
				   		if (msg.error>0) alert('失败 ' + msg.msg);
				   }
				});
				// TODO : 更新事件
				setTimeout('$("#calendar").fullCalendar("refetchEvents")', 2000);
			},
			//事件缩放
			eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) {
			}
		});

	});
</script>

Jquery date picker z-index 问题,Timepicker,层叠样式z-index

20130826165016

Timepicker 官方 http://trentrichardson.com/examples/timepicker/
在使用 Jquery date Timepicker 时候 由于还使用了其他弹出层,导致层叠样式出现些问题。 总结下解决方法

方法一:css里加入这么一行

.ui-datepicker { z-index:9999 !important}

方法二:

$('#timepicker').datetimepicker({
	beforeShow: function() {
		setTimeout(function(){
			$('.ui-datepicker').css('z-index', 9);
		}, 0);
	}
});

方法三:

$('#timepicker').datetimepicker({
	beforeShow:function(input) {
		$(input).css({
			"position": "relative",
			"z-index": 999999
		});
	}
});

参考网址:
http://stackoverflow.com/questions/715677/trouble-with-jquery-dialog-and-datepicker-plugins
http://stackoverflow.com/questions/11533161/jquery-ui-datepicker-change-z-index
http://stackoverflow.com/questions/7033420/jquery-date-picker-z-index-issue

提交form表单的几种方法getElementById方式

开放过程中经常需要提交数据,我简单整理了下几种提交表单方式,提交form表单的几种方法
其中最经典的应属里面通过js进行触发提交。变换性强

<form id="formName" method="post" action="/Test/form">
	<input type="hidden" name="extension" id="extension" value="doc" />
    <input type="submit" value="提交" />
    <button onclick="this.form.submit();">提交</button>
</form>

<a href="javascript:void();" onclick="submit('ppt')">提交</a>
<script type="text/javascript">
function submit(type)
{
	form = document.getElementById('formName');
	form.extension.value = type;
	this.form.submit();
}
</script>

新浪微博api错误(error:redirect_uri_mismatch),您所访问的站点在新浪微博连接失败。

error:redirect_uri_mismatch

访问出错啦!您所访问的站点在新浪微博连接失败。请您联系网站管理员或者稍后再试。(error:redirect_uri_mismatch)

昨天我在调试新浪微博api接口的时候弹出这样的错误提示。从字面上看时跳转错误。改了下callback还是不行,诧异中ing。

由于新浪微博的api接口更新,以前只需在我的应用里设置callback地址。更新后要在sdk的配置文件里设置callback,也就是说有两处callback地址填写。我测试了几遍尝试找出这两个callback地址的关系,我的目的很简单。

一。是否两个都要必填

二。如果两个callback填写地址不一样,到底要以哪个为主。

测试过程中,我发现总是不按照规律出牌。开始测试的时候callback地址必须要写成http://www.xxtime.com/callback.php才行。但是我改错其中一只就又出现问题,然而两个callback地址都写成http://www.xxtime.com/login/callback竟然也不行,此时让我不禁的怀疑是不是网址末尾一定要带上callback字符串而且要放在根目录下。

经过一番的测试后证明我的设想是错误的。因为最后http://www.xxtime.com/login/callback竟然可以了。我突然意识到难道有延迟?本人比较懒不求甚解,所以仅仅测试到这里。

下图为调试成功调用出来的数据:

sina api 调试

得出结论:

一.这样的callback地址也可以 http://www.xxtime.com/login/callback。
二.callback文件不必非要放到根目录。
三.两个callback地址最好要填写一样,不然出错(这里说最好,没说一定是因为我没有彻底详细的测试,但是我想如果两个callback地址填写不一样可能会产生问题)

后来看到官方的回复是这样的:

针对Oauth2.0回调地址error:redirect_uri_mismatch错误解决办法

进入“创建应用”->“编辑属性”,如应用为站内应用进入“应用页面”填写“站内应用地址”;如其他应用进入“授权设置”填写回调地址,在相应程序中设置对应的回调地址,同时回调地址在绑定域名的范围内。更改完成后的数据不是实时生效的。

2011年12月19日 周一,新浪更新了 开发平台,后台界面,在我的应用中去掉了 配置callback地址选项

最开始callback地址只能登陆开发平台在我的应用中配置,后来不仅能在我的应用中配置,而且sdk配置中 也给出了callback地址配置,现在官方完全舍弃了callback在开发平台的后台配置,只接受sdk中的callback地址配置。

官方FAQ地址:
http://open.weibo.com/wiki/FAQ#.E6.8E.A5.E5.8F.A3.E4.BD.BF.E7.94.A8

##################################################################
##################################################################

最新说明:2012年3月9日
笔者发现还有一个问题导致出现 error:redirect_uri_mismatch 错误提示
出现这个提示的原因可能是您使用的php版本太低造成的,比如笔者使用xampp最新的1.7.7版中集成的PHP/5.3.8就不会出现问题,可是使用 较早的PHP/5.3.1版本就会有问题

如果偏要使用旧版本的php那么就要修改sina官方提供的sdk中的saetv2.ex.class.php这个文件
找到163行的:

return $this->authorizeURL() . "?" . http_build_query($params);

修改成:

return $this->authorizeURL() . "?" . http_build_query($params, '', '&');

找到326行的:

$url = $url . '?' . http_build_query($parameters);

修改为:

$url = $url . '?' . http_build_query($parameters, '', '&');

331行的:

$body = http_build_query($parameters);

修改为:

$body = http_build_query($parameters, '', '&');

经过这样的修改就可以了