I am attempting to call data from the db at the head of the page and then use the array information in a foreach to populate the tables in the tab.. currently i am testing with tab 2 but i will want this to originally show in tab 1 unless moved by the user. I am unsure where or how to include the db query and result so that it will populate correctly. Here is what i have so far.
{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>Main</li>
<li>Tab 2</li>
<!--<li>Tab 3</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}
Since you already have a foreach loop set up for your db data can create all the html stored in a variable like this:
$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';
Then in the part of page you want table :
<?php echo $tableHtml; ?>
Related
i need to get data from mysql DB and put it to a json array and use the json array for textbox auto complete. i can do this with separate php for load the data from db and use it in the ajax.. but i am trying to do this with one php file.. is this possible.. how to do this.
<script>
$(document).on('keyup','.jornal', function(){
var thisRow = $(this).data('value');
if(event.which != 13){
//itemSearchDisables(thisRow);
}
autoTypeNo2=1 ;
autoTypeNo1=0 ;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'AJAX_Requst/bill_itemDetail.php',
dataType: "json",
method: 'post',
data: {
ID: request.term
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
if(code[0] == 'Login Please'){
//window.location = '../login.php';
}
return {
label: code[autoTypeNo2] + ' | '+ code[3],
value: code[autoTypeNo1],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
//itemSearchEnables(thisRow);
$('#itemNo_'+id[1]).val(names[0]);
$('#itemName_'+id[1]).text(names[1]);
}
});
});
</script>
This is what i am done up to now to load data..and it is working fine
If my understanding is correct, create the json array in the same php file and pass that array to the javascript function.. It would be some thing like below
<script>
$(function() {
var availableTags = [<?php $jsonArray ?>];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
in that case try using this
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
</body>
</html>
I think it is possible from my point of view. This way you don't have to post ajax form in autocomplete function too.
First you retrieve the data from MySQL database as usual.
Next, you store those data in the javascript var.
Last, you can use the var for textbox autocomplete.
I have a problem using isotope with collapsable panels.
The problem is in the layout when there is a panel opened and you try to filter all data with isotope selecting a category from the filter list.
<div class="col-sm-12 <?php echo esc_attr($categorie_names); ?>">
<div class="h3ader">
<h5 data-parent="#accordion" style="color:white; padding-bottom: 5px;"> <?php the_title(); ?> </h5>
</div>
<div class="c0ntent">
<p><?php echo htmlspecialchars_decode(esc_attr($shortdesc));?></p>
<div class="text-center">
<?php echo esc_attr($theme_option['courses_detail']); ?>
</div>
</div>
And that's the javascript code:
$(window).load(function () {
var $container = $('#portfolio-div');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.filter ul li a').click(function () {
$('.filter .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
$(".h3ader").click(function () {
$h3ader = $(this);
$c0ntent = $h3ader.next();
$c0ntent.slideToggle(500, function () {
$(".col-sm-12").removeAttr("style")
});
});
Is it possible to have a jquery mouseover in a html tag?
for(x=1; isset($_COOKIE["link$x"]); $x++)
echo <div id="'.$x.'" onLoad="myfunction('.$x.')">
}
Like this example above but with "mouseenter" insted of "onLoad" ?
for(x=1; isset($_COOKIE["link$x"]); $x++)
echo <div id="'.$x.'" OnMouseEnter="myfunction('.$x.')">
}
and then in javascript
function myfunction(which){
document.getElementById(which).style.backgroundColor = red;
}
As you mention in your comment, that you have multiple divs that should be fired on mouseenter, in this case you have to use "class" instead of "id"
<div class="myDiv">container1</div>
<div class="myDiv">container2</div>
<div class="myDiv">container3</div>
and in your jQuery code:
$( ".myDiv" ).mouseenter(function() {
$( this ).text( "mouse enter" );
})
$( ".myDiv" ).mouseleave(function() {
$( this ).text( "mouse leave" );
});
HTML Tag
<div id="myDiv"></div>
and in your jQuery code:
$( "#myDiv" ).mouseenter(function() {
$( this ).text( "mouse enter" );
})
$( "#myDiv" ).mouseleave(function() {
$( this ).text( "mouse leave" );
});
I am having an issue with Dialogs in jquery, I have a query that plops up to 4 items of data into a div, in a loop. I want to have each row available for more information via a dialog box.
IN HEAD TAG:
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( ".dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 500
}
});
$( ".opener" ).click(function() {
$( ".dialog" ).dialog( "open" );
});
});
</script>
PHP:
foreach($veh as $v){
echo '<div class="block">';
$sql = "SELECT * FROM table";
$result = $dbh->query($sql);
$row = $result->fetchall(PDO::FETCH_ASSOC);
foreach($row as $r){
echo '<div class="effect6">'.strtoupper($r['col_name']).'</div>';
echo '<div id="dialog" title="'.$r['eas_no'].'">Text</div>';
echo '<button id="opener">Open</button>';
}
echo '</div>';
}
EDIT
Every Single Dialog box now opens...
Try changing your code to this:
<script>
$(function() {
$( ".dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 500
}
});
$( ".opener" ).bind("click", function() {
var selectorClass = ".dialogDiv" + $(this).attr("id");
$(selectorClass).dialog( "open" );
});
});
</script>
and
$tmp = 0;
foreach($row as $r) {
echo '<div class="effect6">'.strtoupper($r['col_name']).'</div>';
echo '<div class="dialogDiv'.$tmp.' dialog" title="'.$r['eas_no'].'">Text</div>';
echo '<button class="opener" id="'.$tmp.'">Open</button>';
$tmp++;
}
You are making multiple things with same id (dialog and opener). id are supposed to be unique on page
I need to output alert message if val = -1, but the problem is that this message appears at the bottom of the page and this does not depend on the value of val.
if ($val == -1)
echo '
<script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
';
else { //... }
<div id="dialog-message" title="Process failed.">
<p><span class="ui-icon ui-icon-circle-check"
style="float: left; margin: 0 7px 50px 0;"></span> Error message.</p>
</div>
To hide the div use css
#dialog-message{
display:none;
}
For a better alert there is a nice plugin for Alert, Confirm & Prompt use that plugin
http://labs.abeautifulsite.net/archived/jquery-alerts/demo/
It's download page is here
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
You can use position function to position the dialog:
Link
What's wrong with the good old fashioned alert() javascript function? It should do the job just fine in this situation.