I want to create button to add tabs with body tabs
Please take look at the code where it says
$('#tabs1').tabs('add', 'lorem.txt', xxxxx' .....
as you can see 'lorem.txt' is from where the information is retrieved to show in the body tabs,
I want to put php code and forms inside tabs body and not use 'lorem.txt'
The problem is that it will not work if I put php code inside jquery.
My question is, is there any other way it can done to show forms using php code when person click button to add tabs?
I'm using div tag. Here is my code.
<script>
(function() {
$(function() {
var tab_counter = 0;
$('#tabs1').tabs({
closable: true,
cache:true,
add: function(e, ui){
$('#tabs1').tabs('select', '#' + ui.panel.id);
}
});
$('#tab_creator').click(function(){
tab_counter += 1;
$('#tabs1').tabs('add', 'lorem.txt', 'Tab ' + tab_counter);
return false;
});
$('#tabs2').tabs();
});
})(jQuery);
</script>
</head>
<body>
<h2 class="ui-widget ui-widget-header">closable Tabs</h2>
<input id="tab_creator" type="button" value="Add New Tab">
<div id="tabs1">
<ul>
<li>tabs one</li>
<li>tabs two</li>
<li>tabs three</li>
</ul>
<div id="tabs1-1">
<p> tabs one body</p>
</div>
<div id="tabs1-2">
<p>tabs two body</p>
</div>
<div id="tabs1-3">
<p>tabs three body</p>
</div>
</div>
<br>
<br>
If the JS code is placed directly at <head> (as your example):
$('#tabs1').tabs('add', '<?php echo $filename; ?>', 'Tab ' + tab_counter);
Otherwise, you need something like this:
$('#tabs1').tabs('add', $( '#tabs1' ).attr( 'data-filename' ), 'Tab ' + tab_counter);
... where you put the PHP code inside the data-filename attribute in #tabs1:
<div id="tabs1" data-filename="<?php echo $filename; ?>">
About data attribute: Google
Related
In my webpage I am using jquery tabs.
<script type="text/javascript">
$(document).ready(function()
{
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
disabled: [3,4],
activate: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
}
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('#stop-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('.select-tab').on('click', function() {
$('#horizontalTab').responsiveTabs('activate', $(this).val());
});
});
</script>
<div id="horizontalTab" style="margin-top:10px;">
<ul class="tabul">
<li class="tabli">
<?php echo lang('purchasedtickets');?>
</li>
<li class="tabli"><?php echo lang('gifted').' '.lang('tickets');?></li>
<li class="tabli"><?php echo lang('received').' '.lang('tickets');?></li>
</ul>
<div id="purchased"></div>
<div id="gifted"></div>
<div id="received"></div>
</div>
When I click on tab2 ie, #gifted tab, the corresponding result will be fetched from an ajax call and will be set to div with id gifted. In this sections I am using Codeigniter pagination. If I click on pagination link 2 of gifted section, the URL will come like http://domain.org/project/video/tickets/2#gifted where 2 in the URL is the page number.
After this, when I click on any other tab say tab1 ie, purchased tab, then the link of page will come like http://domain.org/project/teshot/video/tickets/2#purchased (instead of http://domain.org/project/teshot/video/tickets#purchased) which is appending the url of previous section.
I want to avoid this problem. How can I solve this?
Can ayone help me?
Thanks in advance.
Here is my html for my populated listview. I have the link grabbed from the php script aswell. Where would i put the page slide function on click event. It wont allow me to but html in the script
<div data-role="content">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#index1", function() {
$(function(){
var items="";
$.getJSON("check-events.php",function(data){
$.each(data,function(index,item)
{
items+="<li><a href="+item.col1+"?eventid="+item.id+">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
});
$("#contacts").append(items);
$("#contacts").listview("refresh");
});
});
});
</script>
<div data-role="fieldcontain">
<ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
List view
</li>
</ul>
</div>
Where would i add this piece this code. It keeps producing an error when i add it like this
items+="<li><a href="+item.col1+"?eventid="+item.id+" data-transition="slide">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
Any ideas
Working solution
php
$data = array();
while($rowa = mysql_fetch_array($a, MYSQL_ASSOC))
{
$row_array['id'] = $rowa['eventid'];
$row_array['col1'] = "index.html";
$row_array['col2'] = $rowa['eventname'];
$row_array['col3'] = date("D jS F Y",strtotime($rowa[enddate]));
$row_array['col4'] = "slide";
array_push($data,$row_array);
}
echo json_encode($data);
}
changed html
items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""+item.col4+"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";});
You need to escape your quotes when putting in the variables (\")
items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""slide"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
But, on a side note, you should be letting JQuery create your elements for you. See: https://stackoverflow.com/a/4158203/1178781
I put Jquery Tools's Overlay in my site to show a projects' info in several overlays. This works pretty ok, but I have been trying to 'automate' the code to read new projects and load them in overlays. What happen looks ok, but no matter which project I click, the overlays allways load the content of the first project...
I did a lot of googling around and copy-pasting to get this far, I am not (yet) much of a programmer, I hope the code doesn't scare you guys.. ;-)
Anyway, here's a link: http://www.wgwd.nl/test
If you click 'Projects' a normal div opens that loads all the projects it finds (two, for now). When you click one it opens that content in 3 overlays. As said, unfortunately it allways loads the same content independent of which project you click.
I have tried to assign the JScript a unique function name (generated with php from the project's filename) but that doesn't seem to work.
Any ideas? here's my code :
<?
//reads projectfolder and distills
//a basename out of the project description.txt
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
foreach ($textfiles as $textfile) { ?>
<div id="details"> <?
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
// the link that opens the overlays. Don't think the "id" tag is nescessary
echo '<a id="'.$base_name.'" href="#" onclick="'.$base_name.'()"><img src="'.$base_name.'/main.jpg"/></a>' ?>
<!-- defines overlay, hidden by default -->
<div id="dragwindow1" class="overlay ol1">
<a class="close"></a>
<?
include ('content/projects/'.$base_name.'/content.txt');
?>
</div>
</div>
<?
// the description of each project
include ($textfile);
?>
<script>
// within the foreach open all overlays with function name $base_name
var <?=$base_name?> = function () {
$("a[rel]").each(function() {
$(this).overlay().load();
});
}
</script>
<hr />
<? } //end foreach ?>
</div>
<!-- somehow, without defining these links, the whole 'open all overlay' thing doesn't work -->
<a rel="div.overlay:eq(0)" type="button" style="display: none">first</an>
<a rel="div.overlay:eq(1)" type="button" style="display: none">second</a>
<a rel="div.overlay:eq(2)" type="button" style="display: none">third</a>
<script type="text/javascript">
$(function projects() {
// positions for each overlay
var positions = [
[120, '15%'], //uppper left, #1
[70, '60%'], // lower left, #2
['60%', '40%'], // lower right, #3
];
// setup triggers
$("a[rel]").each(function(i) {
$(this).overlay({
// common configuration for each overlay
oneInstance: false,
// setup custom finish position
top: positions[i][0],
left: positions[i][1],
});
});
});
</script>
Thx in advance!
EDIT: I edited the code to omit all that's unrelated
The question remains: Javascript only returns the content of the first call in the foreach loop. Is there anyway to generate multiple instances of the javascript for each loop in the PHP?
SOLVED! With big, big, help of a friend, who redefined how multiple Overlays from Jquery Tools could work (and should have worked in the first place...)
Without getting too much into it, here's the code for future reference:
Basically the trick is:
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
The complete page is now something like this:
<script type="text/javascript">
$(function () {
// positions for each overlay
var positions = [
['60%', 540], // lower right, #3
[80, '65%'], // lower left, #2
[120, '12%'], //uppper right, #1
];
// setup triggers
$("div.overlay").each(function(i) {
$(this).overlay({
// some configuration for each overlay
// positioning the overlays
top: positions[i % 3][0],
left: positions[i % 3][1]
});
});
});
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
// close all overlays
function closeAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().close();
});
}
</script>
<div id="projectstarter">
<h2>Projects</h2>
<div class="maindetails">
<a class="close"></a> <!-- defines a close button for the overlay -->
<?
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
rsort($textfiles);
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
echo '<a href="#" onclick="openAll(\'div.'.$base_name.'\')">';
echo '<img src="./content/projects/'.$base_name.'/projectimage.jpg" class="thumb"/></a></div>';
include '$textfile'; //project description
} // end MAIN foreach ?>
</div>
</div>
<div id="projects">
<?
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']); ?>
<div id="dragwindow3" class="<?=$base_name?> overlay ol3">
<a class="close"></a>
<h2>Media</h2>
<div class="details">
// include media here
</div>
</div>
<div id="dragwindow2" class="<?=$base_name?> overlay ol2">
<a class="close"></a>
<h2>Credits</h2>
<div class="details">
// include credits here
</div>
</div>
<div id="dragwindow1" class="<?=$base_name?> overlay ol1 ">
<a class="close"></a>
<h2>Content</h2>
<div class="details">
// include content here
</div>
</div>
<? } ?>
<script>
$( "#projectstarter" ).overlay();
$( "#projectstarter" ).draggable().resizable({ghost: true});
$( ".ol1" ).draggable().resizable({ghost: true});
$( ".ol2" ).draggable().resizable({ghost: true});
$( ".ol3" ).draggable().resizable({ghost: true});
</script>
I use a simple jquery code for tabs, the idea of it: in each tab I have a form when i submit each form the code will give me values from mysql . The problem is when i submit a form in for example tab 3 it will redirect me to the first tab (default tab), before I show any result.
any suggestion to solve this problem.
thanks in advance,
My Code :
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
HTML code :
<div id="tabs">
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div id="tabs-1">
<p>tab 1 content</p>
</div>
<div id="tabs-2">
<p>tab 2 content</p>
</div>
<div id="tabs-3">
<p>tab 3 content</p>
</div>
</div>
If you use php, you could use for e.g. hidden html-field in form which contains number of the tab. When submitting form you could parse that variable and use it in jQuery-code. If you use php inside jQuery code could look like this:
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
You jest use this code
$( ".selector" ).tabs( "load", 2 );
after loading call this one so you can select 2 tab.
Try it!!
You can pass parameters to tabs() function (http://api.jqueryui.com/tabs/)
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({active: 2});
});
</script>
you said "forms" if you submit the form, the page will send data and refresh itself. Just use a button and when the button is clicked, send the ajax.
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here