I am editing someone else's code who used php (I'm not really comfortable with php) and I need to add in a swipe function so that it is optimized for tablet.
I have an init function like this:
// swipe through pages
$(function() {
$.on( 'swipeleft', swipeToNextPage );
$.on( 'swiperight', swipeToPreviousPage );
});
There is already a header navigation that goes linearly(sp?) through the site so I just want to target them in my swipe functions.
The nav go in this template:
<a class="icon-right-dir" href="<?php echo $link; ?>"></a>
Can I just fire the icon-right-dir in the swipeToNextPage function?
How would I do that?
// swipe left
function swipeToNextPage(){
// ..uhhhh
}
You can use jQuery trigger() which fires all the specified event handler of that element.
function swipeToNextPage(){
$('.icon-right-dir').trigger('click');
}
Related
My URL has query called "cct_action". This can either equal "add" or "edit".
My page contains several tabs. I'd like to specify which tab to be active based on the cct_action.
I'm able to define the cct_action using PHP GET Method then assign it to a var in js.
$editpage = $_GET['cct_action']; var editpage = '<?php echo $editpage; ?>';
The active tab has a class called .active added to it. I'm having issues figuring out how to do something like:
if (editpage == 'add') { ??? }
Everything I looked up online pertained to tabs of a browser so my efforts have been in vain.
Thanks for the direction #skip
To solve this I had to addClass and removeClass for the default active tab. Then for some reason the tabs wouldn't switch back and forth on click so I had to add a rule to add and remove class on click:
if (editpage === "add") {
$(document).ready(function(){
$(".cx-tab__button[data-content-id='#client_informaiton']").removeClass("active");
$(".cx-tab__button[data-content-id='#extra_tab']").addClass("active");
$("#client_informaiton").removeClass("show");
$("#extra_tab").addClass("show");
});
$(document).ready(function(){
$(".cx-tab__button[data-content-id='#extra_tab']").click(function(){
$(".cx-tab__button[data-content-id='#extra_tab']").addClass("active");
$("#extra_tab").addClass("show");
$(".cx-tab__button[data-content-id='#client_informaiton']").removeClass("active");
$("#client_informaiton").removeClass("show");
});
$(".cx-tab__button[data-content-id='#client_informaiton']").click(function(){
$(".cx-tab__button[data-content-id='#extra_tab']").removeClass("active");
$("#extra_tab").removeClass("show");
$(".cx-tab__button[data-content-id='#client_informaiton']").addClass("active");
$("#client_informaiton").addClass("show");
});
});
}
</script>
I am trying to add custom button on top of post type page like this image
Is there any filter or action I can use to add custom button there?
Thanks
I found a way to get it done but I am not very happy with this procedure. Please add your answer if you find better way. Mean while, this might be of help.
add_action('admin_head-edit.php','addCustomImportButton');
I only need this on edit page, so I am using admin_head-edit.php action, but you can use admin_head or some other (not very specific requirement)
/**
* Adds "Import" button on module list page
*/
public function addCustomImportButton()
{
global $current_screen;
// Not our post type, exit earlier
// You can remove this if condition if you don't have any specific post type to restrict to.
if ('module' != $current_screen->post_type) {
return;
}
?>
<script type="text/javascript">
jQuery(document).ready( function($)
{
jQuery(jQuery(".wrap h2")[0]).append("<a id='doc_popup' class='add-new-h2'>Import</a>");
});
</script>
<?php
}
Digging into WordPress core code i did not find any hook or any filter for that buttonm you can also see that code from line no 281 to line number 288 . But you can add your button here according to this filter.
add_filter('views_edit-post','my_filter');
add_filter('views_edit-page','my_filter');
function my_filter($views){
$views['import'] = 'Import';
return $views;
}
Hope it helps you.
If you are using the class WP_Lists_table (and you should) then this is the right way to do it:
add_action('manage_posts_extra_tablenav', 'add_extra_button');
function add_extra_button($where)
{
global $post_type_object;
if ($post_type_object->name === 'shop_order') {
// Do something
}
}
The accepted answer is sadly still the only one that works.
But as the admin heading changed since it was answered, the correct script should now be :
jQuery(jQuery(".wrap .page-title-action")[0]).after('Import');
Unfortunately there is no hook called after showing the "Add New" button.
The closest possible place to add anything without using javascript is below the title and "Add new" like this:
In my example I added a button to my custom post type "Event" using the hook "edit_form_top":
add_action('edit_form_top', 'add_custom_button');
function add_custom_button($id){
if ($post->post_type != 'event') return false;
echo('<button>Custom button</button>');
}
The answer of Touqeer Shafi got me in the right direction, I needed to add a button at the top of my table view for a custom post type (book), I only had to change the post part in the views_edit-post to make it work:
add_action('views_edit-book', function($id) {
echo('Another new book');
});
Now in 2022 with WP 5.9.1, I combined answers from Geza Gog and Tameroski, and it works great:
add_action('edit_form_top', 'my_import_button');
function my_import_button(){
?>
<script type="text/javascript">
jQuery(document).ready( function($)
{
jQuery(jQuery(".wrap .page-title-action")[0]).after('Import');
});
</script>
<?php
}
I really wonder how can I do this, I have 3 pages that has the same link going to 1 page, now what I want to do is to have 1 button that is intelligently enough to get which of the 3 pages was used to go to that page and used it as it's link going back to that previous page.
Please if anyone who knows how to do this, help me to get out to this chaos. post some code how to do it in codeigniter. Thank you in advance.
By using a simple javascript to achieve previous button like,
Previous
With the url helper loaded, set the current_url in a hidden field say 'refer_from'.
<input type="hidden" name="refer_from" value="<?php echo current_url(); ?>" />
Get this using Input Class and set this on the anchor link
Previous
NOTE: using window.history.go(-1) will fail and throw a js error, if the user some how lands
directly on the "1" last page. window.history will be empty in that case.
In my case jquery back methods means window.history etc,were not working so,I tried this hope this helps you guys.call this method on click. cheers
function redirection()
{
<?php $send=$_SERVER['HTTP_REFERER'];?>
var redirect_to="<?php echo $send;?>";
window.location = redirect_to;
}
In controller add:
$data['back'] = $_SERVER['HTTP_REFERER'];
In view add a button and link to $back.
//to get previous url $_SERVER['HTTP_REFERER'];
<?php $send = $_SERVER['HTTP_REFERER'];?>
var redirect_to="<?php echo $send;?>";
//to redirected to this link
location.assign(redirect_to);
//you can pass static link also to redirected to this link
location.assign('facebook.com');
I don't know the older version, I guess there was such funcionallity but know there is and you should avoid use the accepted answer it may break in many ways.
Know you can use method previous_url.
Just add it where you need and is all done
<div class="container">
<a href="<?= previous_url();?>" class="btn btn-info">
<i class="bi bi-arrow-return-left"></i>
</a>
</div>
Returns the full URL (including segments) of the page the user was previously on.
Due to security issues of blindly trusting the HTTP_REFERER system variable, CodeIgniter will store previously visited pages in the session if it’s available. This ensures that we always use a known and trusted source. If the session hasn’t been loaded, or is otherwise unavailable, then a sanitized version of HTTP_REFERER will be used.
EDIT
Improvements Issue fix
I noticed that the previous_url alone may suit for all scenarios, especially if we have a form which redirects back to the same page; that's because the previous page would be the one that the user was currently, hence will not come back in the desire place (and others solutions would have same issue anyway), a simple solution, and by all means improvable, is the following:
In /app/Controllers/BaseController.php
/// Use this as base redirect
public static $baseRedirect = '/index';
/** #public
* Will check the User position and avoid and URL which aren't desired
* - #example
* Current Page: /news
* Previus : /index
*
* if the user update a form in the current page, which is a POST or GET and the user is
* /news/update and then will go back to the current page now previous_url() will be /news and
* NOT /index , if the user presses back will go to /news again and not /index.
*
* #var array $skip An array with url slugs to check the previous url, if the previous url containts any then skip to fallback
* #var string $baseRedirect : base redirec if fallback is not provided
* #param string|null $fallback use a target url as the desired 'Go Back' URL
*/
public function getPreviousURL(?string $fallback=null)
{
// NOTE: We need the current_url also inside, to check that we don't go back in the same page ;)
$skip = [current_url(), "create", "udate", "delete", "post"];
$prev = previous_url();
foreach($skip as $s) {
if (str_contains($prev, $s)) {
return site_url($fallback ? $fallback : self::$baseRedirect);
}
}
return $prev;
}
Now , in any controller which extends BaseController
class MyController extends BaseController
// ... code
public function view($slug=null)
{
// code
$data = [
// data
'prev' => $this->getPreviousURL(), // this will be available in any Controller
];
echo view('templates/header', $data);
echo view('news/view', $data);
echo view('templates/footer', $data);
}
Additionally you can pass any fallback into the url ;)
$data = [
// data
'prev' => $this->getPreviousURL(fallback: '/home'), // this will be available in any Controller
];
In a view news/view.php
<?php $prev = $prev ??= site_url('/index'); ?>
<div class="container">
<a href="<?= $prev ?>" class="btn btn-info">
G Back <i class="bi bi-arrow-return-left"></i>
</a>
</div>
/*Back button in codeigniter project using jquery */
<button type="button" class="btn btn-primary btn-sm" id= "back">Back</button>
//JQuery of back button
<script type="text/javascript">
$(document).ready(function(){
$('#back').on('click', function(){
<?php $send = $_SERVER['HTTP_REFERER'];?>
var redirect_to="<?php echo $send;?>";
window.location.href = redirect_to;
});
});
</script>
I'm looking for a solution to loading the header/footer/navigation only on the initial page view.
The reasoning behind this is that my navigation panel uses Ajax to render the content of the destination link in the main content div instead of actually loading the page itself.
However, I need to be able to say something along the lines of if its the initial view, load the header, navigation, then the actual page, then the footer. But if its not the initial view and the page is loaded in the content div area so for example a navigation link or a form submit, it doesn't load the header, navigation and footer but only the actual page.
So for example I have these 4 views:
header_view
navigation_view
page_a_view
footer_view
And this controller:
controller_a
The navigation has a link which is 'Page A' and points to http://myurl.com/controller_a. If that link is clicked I only wanted controller_a to load the page_a_view view, because the navigation link will load the data of that page into the div.
However if I directly go to http://myurl.com/controller_a, it needs to render the the header/navigation/footer also.
The solution I thought I was on the right lines with was something like a base controller with a function load_page() which would be something like:
function load_page($page, $data) {
if($this->uri->segment($this->uri->total_segments()) == "initial_page_load") {
$this->load->view('header_view');
$this->load->view('navigation_view');
$this->load->view($page, $data);
$this->load->view('footer_view');
} else {
$this->load->view($page, $data);
}
}
So if I was to go to http://myurl.com/controller_a/initial_page_load it would load the header/navigation/footer but if I went to http://myurl.com/controller_a it wouldn't.
However this doesn't cover all possibilities.
Another way I thought of is checking if there is a referring URL, if there is, don't load the header/navigation/footer. But again, this doesn't cover things such as what if the link was referred by an external website?
Does anyone have any suggestions to how I can achieve what I need?
Let this be your view page for all views. For your other pages, you are going to change the content on div, 'page_content' dynamically via ajax.
**application/views/your_template_view.php**
<?php
$this->load->view('header_view');
$this->load->view('navigation_view');
?>
<a href="javascript:void(0)" id='home' class='my_links'>Home</a>
<a href="javascript:void(0)" id='about_us' class='my_links'>About us</a>
<!--
Make sure the id of the page is same as
the file name of view page for respective pages
-->
<div id='page_content'><?php echo $page_content; ?></div>
<?php
$this->load->view('footer_view');
?>
<script lang='javascript'>
$('.my_links').click(function(){
$.post(
'<?php echo site_url('test_controller/get_page_content') ?>',
{'page_content':$(this).attr('id')},
function(response){
if(response != '')
$('#page_content').text(response);
},'json'
);
});
</script>
Let this be your controller :
**application/controller/test_controller.php**
function your_page($param1 = '', $param2 ='') {
/*this one is for your initial page*/
if($param1)
// send mail
if($param2)
// send mail
$data['page_content'] = $this->load->view('initial_page_load');
$this->load->view('your_template_view', $data);
}
function get_page_content()
{
/*this one is for other pages, this provides page content
for the request made from ajax*/
$page_title = $this->input->post('page_title');
$page_content = $this->load->view($page_title);
echo json_encode($page_content);
}
Make a session variable to denote whether the header/footer is loaded, and if it is, just skip them
if (!$this->session->userdata('nav_loaded')) {
$this->load->view('header_view');
}
etc...
This will work for all your pages, no matter where are they called from, provided that all the post-initial calls are done by AJAX.
EDIT
If you want to mix ajax and non-ajax calls after that, the session varable won't work, of course. Perhaps you could put an ajax parameter in your urls and adjust the controllers according to that.
public function index($ajax = false) {
...
if (!ajax) {
$this->load->view('header_view');
}
etc...
}
So, all the AJAX call will have that additional parameter in the url set to true (almost anything except zero: index/1, index/ajax, etc.).
Although I'm still testing this it seems to be doing exactly what I expect so far! It's one of those ones which is simple but does the complete job so hopefully no problems pop up...
In MY_Controller.php
function load_page($page, $data) {
if(!$this->input->is_ajax_request()) {
$this->load->view('header_view');
$this->load->view('navigation_view');
}
$this->load->view($page, $data);
if(!$this->input->is_ajax_request()) {
$this->load->view('footer_view');
}
}
Managed to stumble across that function when looking in the Input class documentation
in the controller i have :
$paginator = Zend_Paginator::factory($mdlPost->getPosts($this->moduleData->accordion, 'name ASC'));
if(isset($params['cities'])) {
$paginator->setCurrentPageNumber(intval($params['cities']));
}
$paginator->setItemCountPerPage(4);
$this->view->posts = $paginator;
in the view's i have some thing like this :
if ($this->posts != null) {?>
<div id="cities_accord" class="news">
<?php echo $this->partialLoop('partials/post-min.phtml', $this->posts); ?>
</div>
<?php echo $this->paginationControl($this->posts,
'Sliding',
'public/pagination_cont.phtml');
}
the partial/post-min.phtml
<?php
$color = array(1=>'spring',2=>'summer',3=>'autumn',4=>'winter');
?>
<div id='<?php echo $color[$this->partialCounter] ?>' class="accordion_post">
<?php
$link = Digitalus_Uri::get(false, false, array('openCity' =>
$this->id));//$color[$this->partialCounter]));
?>
<h1 class="accordion_post_title"><?php echo $this->title ?></h1>
<p><?php echo $this->teaser ?> <i>read more</i></p>
</div>
the pagination_cont.phtml taken from this link zend ( http://framework.zend.com/manual/en/zend.paginator.usage.html )
will show links that will pass params to the controller to fetch the corresponding whole page which is working alright for now
but i want to change this so that i will be able ajaxify the returned ( i.e. only a single paginated value rather than reloading the whole page ) results how can i do that using jquery and what should i change ..
** EDIT: it would be nice to have a fail-save ,if possible, for browsers(users) that disabled javascript to see the same thing by reloading the page (i.e. keeping the current status for if(javascript_not_enabled ))**
This is what I've done in the past.
First, setup the AjaxContext action helper to enable the html context on your controller action.
Add a .ajax.phtml view that just contains the section of markup that may be replaced via AJAX as well as the pagination control links. You can probably just copy this out of your normal view. Replace that section in your normal view with something like
<div id="reloadable-content">
<?php echo $this->render('controller/action.ajax.phtml') ?>
</div>
This will ensure that your initial and any non-AJAX requests will still include the right content. The <div> id is purely for referencing the loadable block in JavaScript.
Also make sure you include your JS file (using headScript) in the normal view only.
Now, in your JS file, unobtrusively add the appropriate event binding to the paginator links. As you'll be replacing the pagination control section in order to reflect the correct current page and other links, it's probably best to do this using the jQuery live binding. I'm also assuming you'll wrap the pagination control with some kind of identifiable element (<div class="pagination-control"> for example)
$('.pagination-control').find('a').live('click', function(e) {
var link = $(this);
$('#reloadable-content').load(link.attr('href'), { format: 'html' });
return false;
});
Keep in mind that in using this method, you will lose the ability to navigate the paged requests using the normal back / forward browser buttons. You will also lose the ability to bookmark pages directly (though you could always provide a permanent link to the current page as part of the AJAX loaded content).
You can use something like the jQuery history plugin if you're really concerned but that will require more client-side work.
Another caveat is that the above will only work with pagination links. If you want to use a form with dropdown page selection, you need to add another event handler for the submission.
GOT IT and big Thanks to #Phil Brown :
in the controller int() change the response type to json
class NewsController extends Zend_Controller_Action
{
public function init()
{
$contextSwitch = $this->_helper->getHelper('contextSwitch');
$contextSwitch->addActionContext('list', 'JSON')
->initContext();
}
// ...
}
public listAtcion() {
// .............
$paginator = Zend_Paginator::factory($mdlPost->getPosts($this->moduleData->accordion, 'name ASC'));
if(isset($params['cities'])) {
$paginator->setCurrentPageNumber(intval($params['cities']));
}
$paginator->setItemCountPerPage(4);
$post = array();
foreach($paginator as $post ) {
$post[] = $post;
}
$this->view->post = $paginator;
#TODO //add a check here for non-ajax requests (#improvment)
$this->view->posts = $paginator;
}
in one of the views (most probably in the pagination_cont.phtml) on the pagination controller add the ajax links
<?= $this->ajaxLink (
$this->url('cities'=>$this->page_num),array('id'=>'div_id','complete'=>'js_method(json_data)','method'=>post) ,array('format'=>'JSON'));
and add a JavaScript function of js_method(json_data) to modify the div with id = 'div_id' with a json data
function js_method(json_data) {
var content = parse.JSON(json_data);
$('#div_id').html('');
//fill it with the reposnse content some thing like $('#div_id').append(content);
}