I used Semantic UI tabs components in one of my Codeigniter project. Here's the setup.
main_view.php
<div class="ui pointing secondary menu">
<a class="active item" data-tab="tab1">Tab 1</a>
<a class="item" data-tab="tab2">Tab 2</a>
<a class="item" data-tab="tab3">Tab 3</a>
</div>
<div class="ui container">
<div class="ui bottom attached active tab" data-tab="tab1"></div>
<div class="ui bottom attached tab" data-tab="tab2"></div>
<div class="ui bottom attached tab" data-tab="tab3"></div>
</div>
<script type="text/javascript">
$(function() {
$('.ui.menu > .item').tab({
context: 'parent',
auto: true,
history: true,
parseScripts: false,
ignoreFirstLoad: false,
cache: false,
path: baseURL
});
});
</script>
tab1.php / tab2.php / tab3.php
<div class="container">
<?= $data; ?>
</div>
Main_View.php(Controller)
public function index_get(){
$this->load->view('setting');
}
public function tab1_get(){
$data = 'tab 1';
$this->load->view('tab1', $data);
}
public function tab2_get(){
$data = 'tab 2';
$this->load->view('tab2', $data);
}
public function tab3_get(){
$data = 'tab 3';
$this->load->view('tab3', $data);
}
routes.php
$route['main'] = 'main_view';
$route['main/tab1'] = 'main_view/tab1';
$route['main/tab2'] = 'main_view/tab2';
$route['main/tab3'] = 'main_view/tab3';
Everything works fine with URLs like this
http://localhost/main#/tab1
http://localhost/main#/tab2
http://localhost/main#/tab3
But it just show me the tab content(without the tab bar) when I try to remove the hash in the URL. I also tried using historyType: 'state' in the tab js config but still broken. How can I prevent or redirect users to access the child pages only?
Related
I have a custom PHP page in WordPress and need to display buttons connected to a map plugin's shortcode. Each button needs to change the map displayed on the page. The Ajax action is working, but only displays the map's ID, not the full shortcode.
I found a similar post here on StackOverflow doing something similar with Contact Form 7 shortcodes.
Javascript used:
<script type="text/javascript">
$(function () {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$('.button-map').click(function () {
$.ajax({
url: ajaxurl, //global variable provided by WP
type: 'GET',
data: {
'action': 'get_map_frame',
'map_id': $(this).data('id')
},
success: function (data) {
$('#map_area').html(data);
}
});
});
});
</script>
Ajax Call in functions.php:
add_action('wp_ajax_get_map_frame', 'get_map_frame');
add_action('wp_ajax_nopriv_get_map_frame', 'get_map_frame' );
function get_map_frame() {
if (isset($_GET['map_id'])) {
$map_id = (int) $_GET['map_id'];
echo do_shortcode('[cspm_main_map id="' . $map_id . '"]');
}
exit();
}
On-page code HTML:
<div class="w-col w-col-12">
<div class="column-29 w-col w-col-3">
<div><a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5425">Dining and Drinks</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5695">Entertainment and Transportation</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5697">Shopping</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5698">Pets and Parks</a>
</div>
</div>
<div id="map_area"></div>
</div>
What I'm trying to achieve is each button pulls up its individual map associated with the map ID. Currently when the button is clicked it only returns the actual map ID on the page, but not the rest of the shortcode to display the map intended.
http://aopmap.villagegreenmarketingservices.com/test123/
Need: Dynamic loading content via AJAX in the proper framework Yii. As it is implemented in https://duckduckgo.com/?q=yii Ie when scrolling down a page, the content at the end of the page is automatically added.
What I have:
View:
<!--MAIN CONTENT AREA-->
<div class="wrap">
<div class="container inner_content">
<div class="row advertisement_row">
<!-- portfolio_block -->
<div class="projects">
<?php
foreach ($models as $one)
{
?>
<div class="span3 element category01 advertisement" data-category="category01">
<div class="hover_img">
<img src="<?php echo Yii::app()->request->baseUrl; ?><?=$one->picture_1?>" alt="" />
</div>
<div class="item_description">
<?php $title = implode(array_slice(explode('<br>',wordwrap($one->title,60,'<br>',false)),0,1))."...";?>
<h6><?=CHtml::link($title, array('view', 'id'=>$one->id))?></h6>
<div class="descr"><?=implode(array_slice(explode('<br>',wordwrap($one->content,240,'<br>',false)),0,1))."..."?></div>
</div>
</div>
<?php
}
?>
<div class="clear"></div>
</div>
<!-- //portfolio_block -->
</div>
</div>
</div>
Prompt how to implement this service?
You can achieve this without using a Yii extension or jquery plugin, by probing for when the scroll position reaches the bottom of the screen.
This is how I did mine.
var page = 0;
function loadnewdata()
{
// do ajax stuff, update data.
var url = '$showlistingUrl'+'/page/'+page;
$.ajax({ url: url,
cache: false,
success: function(data){
var existing_content = $('#listing_container').html();
$('#listing_container').replaceWith('<div id="listing_container">'+existing_content+data+'</div>');
page++;
},
dataType: "html"
});
}
setInterval(
function ()
{
if(($(document).height() - $(window).height() - $(document).scrollTop()) < 500){
loadnewdata();
}
},
500
);
// Run the initial listing load.
loadnewdata();
The controller page in turn queries the 'page' GET parameter and uses this to fetch data from the database.
public function actionShowlisting()
{
$argPage = (int) Yii::app()->request->getQuery('page', 0);
// /////////////////////////////////////////////////////////////////////
// Get a listing of results
// /////////////////////////////////////////////////////////////////////
$dbCriteria = new CDbCriteria;
$dbCriteria->limit = (int) Yii::app()->params['PAGESIZEREC'];
$dbCriteria->offset = $argPage * $dbCriteria->limit;
$listResults = Mymodel::model()->findAll($dbCriteria);
$this->renderPartial('result_list', array('listResults' => $listResults));
}
You need a javascript/jquery plugin like infinite scroll see www.infinite-scroll.com
which help convert multipage result into single page ones, loaded dynamically as in twitter or duckduckgo.
You directly integrate such a plugin for your page or you can consider couple of integrations available for Yii in the extensions library
Infinite Scroll Pager (link)
Infinite Scroll (link)
Note that These extensions rely on presence of pagination variable for loading each subsequent page. So they will work best if you use CListView, CGridView or similar CPagination based rendering widget in your view.
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 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
I have the following script which appears multiple times on my page. I have a simple slide toggle attached to <div class="info"> and contolled by <a rel="viewinfo"> tag, but when I click on the anchor, all the divs with class info slide.
here is the HTML/PHP
<div class="couplistMeta">
<a class='view' rel="viewinfo" href="#">View Coupon</a>
<a class="print" href="#">Print</a>
</div>
<div class="info">
<p><?php echo $rec2[4]." -- Phone: ".$rec2['phone']; ?></p><p><?php echo $rec2['address']." -- ".$rec2['city'].", ".$rec2['state']." ".$rec2['zip']; ?></p>
</div>
Here is the Javascript
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$('div.info').slideToggle(400);
return false;
});
});
I tried using $(this).next('div.info').slideToggle(400); but this just broke the effect. So $('div.info') is too general, how can I be more specific with the JS?
Try this:
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$(this).parent().next('.info').slideToggle(400);
return false;
});
});
The issue being due to $('div.info') implicitly iterating over all div elements with the class info on the page.