Javascript 来自php的jQuery EasyUI手风琴内容
我又一次谦卑地来到你们面前,头撞在墙上留下了瘀伤 我一直在努力学习如何从php/MySQL查询填充jqueryeasyui。我相信我现在可以正确地将数据返回到网页,但我无法弄清楚如何解析和格式化这些数据以显示为网页上的内容。我试图实现的基本上是一个手风琴,以显示与个人的每次通信作为一个手风琴项目的接触历史。下面是PHP查询的输出示例Javascript 来自php的jQuery EasyUI手风琴内容,javascript,jquery,jquery-easyui,Javascript,Jquery,Jquery Easyui,我又一次谦卑地来到你们面前,头撞在墙上留下了瘀伤 我一直在努力学习如何从php/MySQL查询填充jqueryeasyui。我相信我现在可以正确地将数据返回到网页,但我无法弄清楚如何解析和格式化这些数据以显示为网页上的内容。我试图实现的基本上是一个手风琴,以显示与个人的每次通信作为一个手风琴项目的接触历史。下面是PHP查询的输出示例 {"rows":[{"phone":"5554072634","contact_dt":"2014-01-27 22:51:37","method":"Email"
{"rows":[{"phone":"5554072634","contact_dt":"2014-01-27 22:51:37","method":"Email","who":"Scott","note":""},{"phone":"5554072634","contact_dt":"2014-01-27 23:08:49","method":"Spoke","who":"Scott","note":"Called back and she is not interested."}]}
我试图将“contact_dt”作为每个手风琴选项卡的标题,然后格式化手风琴选项卡主体中的其余元素。目前,当我选择包含手风琴的Contact History选项卡时,我会得到一个繁忙的微调器,但这只会在主体中产生一个小方形框,并且不会改变标题。这是我肯定弄坏的代码。首先是HTML部分
<div id="history" title="Prospect Contact History" closable="true" style="padding:10px;">
<h2 class="atitle">Prospect Details</h2>
<div id="aa" class="easyui-accordion" style="width:500px;height:300px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 id="hist_title" style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
</div>
</div>
潜在客户详细信息
jQuery手风琴
Accordion是用于jQuery的easyui框架的一部分。
它使您可以更轻松地在网页上定义手风琴组件
现在来看jQuery片段。。。首先是JS基本上调用函数。这在页面末尾的正文中
<script type="text/javascript">
$('#tt').tabs({
onSelect:function(title){
if (title == 'Prospect Contact History'){
//$( "#hist_title" ).html( "Accordion function is working.");
accordionHistory();
}
}
});
</script>
$('#tt')。选项卡({
onSelect:功能(标题){
如果(标题=‘潜在客户联系历史’){
//$(“#hist_title”).html(“手风琴功能正在工作。”);
手风琴历史();
}
}
});
现在来看看大脑中定义的功能,我认为真正的混乱在哪里
function accordionHistory() {
$( "#hist_title" ).html( "Accordion function is working.");
var pp = $('#aa').accordion('getSelected'); // get the selected panel
if (pp){
pp.panel('refresh','contact_history.php?phone=' + phone); // call 'refresh' method to load new content
var temp = $('#aa').form('load',pp);
$.each( temp, function( i, val ) {
var txt1=$("<p>Time: ").html(val.contact_dt);
var txt2=$("</p><p>Method: ").html(val.method);
var txt3=$("</p><p>Who: ").html(val.who);
var txt4=$("</p><p>Note: ").html(val.note);
//$("#hist_title").html(val.contact_dt);
$("#hist_item").html(txt2,txt3,txt4);
});
}
}
函数手风琴历史(){
$(“#hist_title”).html(“手风琴功能正在工作。”);
var pp=$('#aa')。accordion('getSelected');//获取所选面板
如果(pp){
pp.panel('refresh','contact_history.php?phone='+phone);//调用'refresh'方法加载新内容
var temp=$('#aa')。形式('load',pp);
$。每个(温度、功能(i、val){
var txt1=$(“Time:”).html(val.contact_dt);
var txt2=$(“方法:”).html(val.Method);
var txt3=$(“Who:”).html(val.Who);
var txt4=$(“Note:”).html(val.Note);
//$(“#历史标题”).html(val.contact_dt);
$(“历史项目”).html(txt2、txt3、txt4);
});
}
}
我确信我在基本JS概念中表现出了严重的无知。正如我在一开始提到的,我真的把它作为一个学习练习,并构建一些有用的东西。任何帮助都将不胜感激。此外,任何可能帮助我克服一些概念缺陷的在线教程都是非常受欢迎的。提前谢谢。好吧。。。我终于解决了我的问题。这是我现在用来让它工作的函数
function accordionHistory() {
var pp = $('#aa').accordion('getSelected'); // get the selected panel
if (pp){
$.ajax({
post: "GET",
url: "get_history.php?phone=" + phone,
dataType: 'json',
success: function( details ) {
$.each(details.rows, function(index, element) {
$('#hist_title').replaceWith(
'Phone: '
+ element.phone
+ 'Contact time: '
+ this.contact_dt
+ '<br/>Method: '
+ this.method
+ '<br/>Who: '
+ this.who
+ '<br/>Note: '
+ this.note
);
});
}
});
}
}
函数手风琴历史(){
var pp=$('#aa')。accordion('getSelected');//获取所选面板
如果(pp){
$.ajax({
帖子:“得到”,
url:“get_history.php?phone=“+phone,
数据类型:“json”,
成功:功能(详细信息){
$.each(details.rows,函数(索引,元素){
$('hist#u title')。替换为(
“电话:”
+元素电话
+'联系时间:'
+这是我的联系方式
+“
方法:”
+这个方法
+“
谁:”
+这个,谁
+“
注意:
+这张钞票
);
});
}
});
}
}
我希望像我这样的其他人会觉得这很有用。解决方案是哪一部分?