Php jQuery选项卡和显示数据库字符串
我试图从页面头部的db调用数据,然后使用foreach中的数组信息填充选项卡中的表。。目前我正在使用选项卡2进行测试,但我希望它最初显示在选项卡1中,除非用户移动。我不确定在何处或如何包含db查询和结果,以便正确填充。这是我到目前为止所拥有的Php jQuery选项卡和显示数据库字符串,php,jquery,joomla3.0,Php,Jquery,Joomla3.0,我试图从页面头部的db调用数据,然后使用foreach中的数组信息填充选项卡中的表。。目前我正在使用选项卡2进行测试,但我希望它最初显示在选项卡1中,除非用户移动。我不确定在何处或如何包含db查询和结果,以便正确填充。这是我到目前为止所拥有的 {source 0} <?php $user =& JFactory::getUser(); if (!$user->guest) $name = $user->username; $db =& JFactory:
{source 0}
<?php
$user =& JFactory::getUser();
if (!$user->guest)
$name = $user->username;
$db =& JFactory::getDbo();
$query = $db->getQuery(true);
$query = "
SELECT image_url, name_test, image_date
FROM #__image_data
WHERE user_name = '$name'";
$db->setQuery($query);
echo $name."'s Pets" . "<br/>";
$list = $db->loadObjectList();
foreach ($list as $item){
}
?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Simple manipulation</title>
<link rel="stylesheet" href="/Joomla3/jquery/themes/base/jquery.ui.all.css">
<script src="/Joomla3/jquery/jquery-1.8.3.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.position.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.core.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.widget.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.mouse.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.sortable.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.button.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.tabs.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.dialog.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="/Joomla3/jquery/demos/demos.css">
<style>
#dialog label, #dialog input { display:block; }
#dialog label { margin-top: 0.5em; }
#dialog input, #dialog textarea { width: 95%; }
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "select", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
</script>
<script>
$(function() {
var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();
// modal dialog init: custom buttons and a "close" callback reseting the form inside
var dialog = $( "#dialog" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).submit(function( event ) {
addTab();
dialog.dialog( "close" );
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = tabContent.val() || "Tab " + tabCounter;
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'></div>" );
tabs.tabs( "refresh" );
tabCounter++;
}
// addTab button: just opens the dialog
$( "#add_tab" )
.button()
.click(function() {
dialog.dialog( "open" );
});
// close icon: removing the tab on click
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
});
});
</script>
<script>
$(function() {
var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
</script>
</head>
<body>
<div id="main_container">
<div id="dialog" title="Tab data">
<form>
<fieldset class="ui-helper-reset">
<label for="tab_title">Title</label>
<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Main</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<!--<li><a href="#tabs-3">Tab 3</a></li> // Additional tabs added to the main-->
</ul>
<div id="tabs-1">
<p>Test information.</p>
</div>
<div id="tabs-2">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight"><img src="http://localhost/Joomla3/myimage.png"></li>
<li class="ui-state-highlight">
<?php"<tr><td>"."<img src='$item->image_url'>" . "<td>" . $item->name_test . "<td>" . $item->image_date ."</td></tr>"?></li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
{/source}
{source 0}
由于已经为db数据设置了foreach
循环,因此可以创建存储在如下变量中的所有html:
$tableHtml='<table id="foo">';
foreach ($list as $item){
$tableHtml.="<tr><td><img src='".$item->image_url."'><td>" . $item->name_test . "</td><td>" . $item->image_date ."</td></tr>";
}
$tableHtml='</table';
$tableHtml='';
foreach($项目列表){
$tableHtml.=“图像url.”>“$item->name\u test.”“$item->image\u date.”;
}
$tableHtml='不清楚是什么问题。可以将您的html字符串直接连接到您现在拥有的循环中…然后echo
将其连接到页面中所需的位置。页面中应具有doctype…jQuery不支持怪癖模式如何将查询返回的字符串输出到html中的此行..此行..
当我将这一行放在代码中时,它会停止工作。如果我将所有$tableHtml
更改为$tableData
,那么代码可以工作,但它就像foreach
循环一样,来自查询的数据都会被忽略。
<?php echo $tableHtml; ?>