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>
Related
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 have been trying to figure out this problem I've been having all day. I will give you a simplified run down of what I have been trying to do. The user enters a number, and however much the number is, is the number of categories there are going to be on the following page. Within each category, there is an input text button, along with an "Add Textbox" button that adds additional input textboxes dynamically. However, the problem here is that each category has this same setup on the same page. For example, if the user enters the number "3", then the page will vertically load three categories looking something like the following:
Category #1
(Initial user input textbox for category #1)
("Add Textbox" button to allow user to fill out another option)
Category #2
(Initial user input textbox for category #2)
("Add Textbox" button to allow user to fill out another option)
Category #3
(Initial user input textbox for category #3)
("Add Textbox" button to allow user to fill out another option)
The struggle I have been encountering is that each category button will need to have its own function, to tell the button where to place the textbox. This coupled with the fact that the number of categories changes depending on the user's input, has made things difficult. I started with the following:
var categoryCount = <?php echo $categoryCount; ?>;
var click = {};
for (var num=1;num<=categoryCount;num++) {
var newClick = "click_" + num;
click[newClick] = function() {
// some contents when this button is clicked
};
}
This JS creates an object of functions, which in JS would be able to be accessed by doing something like the following:
click['click_' + someID]();
However, the problem is that I cannot do this using the "onclick" attribute in my HTML/PHP button. I cannot access this object of functions, and cannot call any of the individual functions, obviously. I think I am going to need to rethink all of this and start again. I just can't think of another way to get this to work. Please share your ideas with me! Your help would be greatly appreciated.
For something like this, I'd write a constructor I could use like this
var cat1 = new Category(document.body);
Luckily for you, I also wrote one as an example. See the DEMO HERE. I haven't styled it at all for the new lines etc, though.
var Category = (function () {
var categoryCount = 0;
function elem(tag) { // shortcut
return document.createElement(tag);
}
function text(str) { // shortcut
return document.createTextNode(str);
}
function Category(node) {
var self = this; // this should have been var'd, oops!!
this.categoryId = ++categoryCount;
// make add button
this.addButton = elem('button');
this.addButton.appendChild(text('Add Textbox'));
this.addButton.addEventListener('click', function () {
self.addTextbox();
});
// make wrapper
this.wrapper = elem('section');
this.wrapper.setAttribute('id', 'cat'+this.categoryId);
this.wrapper.appendChild(this.addButton);
// make textboxes
this.textboxes = [];
this.addTextbox();
// append to document
if (node) {
this.append(node);
}
}
Category.prototype.addTextbox = function () {
var e = elem('textarea');
e.setAttribute('name', 'cat-'+this.categoryId+'-textbox[]');
this.textboxes.push(e);
this.wrapper.insertBefore(e, this.addButton);
};
Category.prototype.append = function (node) {
return node.appendChild(this.wrapper);
};
return Category;
}());
I am working on a site right now and have discovered that the jquery/javascript that I have implemented for the Search applies the same effect to all search boxes on the page when I click in the input field. By default, it removes the "Search" text and clears it out so that you can type your search term. I only want it to perform this function on the search box that is clicked within, not all search boxes on the page. However, if you look at this example, you'll notice that when you click into the search field at the top of the page, it clears the text out of both. I think I could fix it with .parent() or something, but am a jQuery novice. Any help would be appreciated.
Also don't know quite why the border is showing up around my icon, but I'll fix that.
Here's the search function jQuery:
$(document).ready(function(){
$('.search-box').textdefault({'text':'Search'});
});
(function($){
$.fn.textdefault = function(settings){
var Elements = this;
var settings = $.extend({}, $.fn.textdefault.defaults, settings);
return Elements.each(function(){
if($(Elements).is("input")){ TextDefault( $(Elements) ); }
});
function TextDefault(Input){
if (Input.val().length==0) Input.val(settings.text);
Input.focus(function () {
if (Input.val()==settings.text) Input.val('');
});
Input.blur(function () {
if (Input.val().length==0) Input.val(settings.text);
});
}
};
$.fn.textdefault.defaults = {
text: 'Search'
};
})(jQuery);
Thanks!
Taylor
plugin example
here is the correction.
Elements contains all the elements that are 'passed' to this plugin.
var Elements = this;
By using $(Elements) instead of $(this) in the each function, you
used all inputs as one
return Elements.each(function() {
if ($(this).is("input")) {
TextDefault($(this));
}
});
This line of code should be called to initialize the plugin. So it should be put somewhere outside of the plugin, in a $(document).ready() {} code block for example, since you need the plugin initialized for the inputs on the load of the page.
$('.search-box').textdefault({
'text': 'Search'
});
Use a different selector. Instead of all inputs with a class of "search-box" try giving it a unique ID or class.
$("#search_default").textdefault({'text':'Search'});
or
$(".search-box.defaulttext").textdefault({'text':'Search'});
The HTML would then be
<input type="text" class="search-box defaulttext" ...
or
<input type="text" id="search_default" ...
This is the method that I use, which could also be helpful for you. It won't fire for both objects since it uses $(this) to control just the object being focused/blurred.
$(".search-box").live("focus", function(){
if ( $(this).val() == $(this).attr("rel") ){
$(this).val('');
}
}).live("blur", function(){
if ( $(this).val() == '' ) {
$(this).val( $(this).attr("rel") );
}
}).each( function(){
$(this).attr("rel", $(this).val() );
});
I would try to use a more "jQuery" way to do this. jsFiddle
$('input').focus(function(){
$(this).data('text', $(this).val()).val('');
});
$('input').blur(function(){
if( $(this).val() === "" ) $(this).val( $(this).data('text') );
});
I use this plugin for jQuery: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
I would like add or modify this for add function live(), because now doesn't working with use Ajax.
all code:
http://pastebin.com/up6KYKCN
start in 47 line:
$.fn.extend({
tooltip: function(settings) {
settings = $.extend({}, $.tooltip.defaults, settings);
createHelper(settings);
return this.each(function() {
$.data(this, "tooltip", settings);
this.tOpacity = helper.parent.css("opacity");
// copy tooltip into its own expando and remove the title
this.tooltipText = this.title;
$(this).removeAttr("title");
// also remove alt attribute to prevent default tooltip in IE
this.alt = "";
})
.mouseover(save)
.mouseout(hide)
.click(hide);
},
probably here must change mouseover(save) and add live(), but how?
I assume you mean it doesn't work with the ASP.NET Ajax Toolkit?
If so I used Sys.Application.add_load() to attach my tooltips instead of jQuery $(document).ready().
The difference between the two is add_load is also called for partial postbacks (e.g. UpdatePanels) so your tooltips are reattached correctly.
See Dave Ward: $(document).ready() and pageLoad() are not the same!
I have a problem with the jQuery's live() function.
I'm creating the shopping basket with PHP and make a json call to the php script to add specific item to the basket. Rather than re-binding the click to the button ( tag) I've decided to use live(), however it doesn't seem to like it.
Here's my call:
if ($('.add_to_basket').length > 0) {
$('.add_to_basket').live('click', function() {
var button = $(this);
var id = $(this).attr("rel");
$.getJSON("/basket/action/add/id/" + id, function(data) {
if (!data.error) {
$('.basket_no_of_items').text(data.no_of_items);
$('.basket_items_total').text(data.total);
button.text('Remove from the basket');
}
});
return false;
});
}
Any idea what I might be doing wrong?
I've checked with firebug and it seem to post the request to only /basket/action/add - without id bit.
The whole idea of using live() is to register a function on the occurrence of an event (eg. click) on a set of elements whether they exist or not at the time of creation of the function.
Adding ($('.add_to_basket').length > 0) will check whether this particular set of elements exist or not. This is counter productive as per my description above. So, either:
Remove ($('.add_to_basket').length > 0) and this should work for all .add_to_basket elements
Change $('.add_to_basket').live('click', function() {...}); to $('.add_to_basket').click(function() {...}); and wrap it around with a $(document).ready() to ensure that all DOM elements have loaded when the function is registered to the click.
Hope this makes sense.
Sumit
Try removing the "length" check, I bet it's interfering with the .live() function.
change $.getJSON("/basket/action/add/id/" + id, function(data) {})
to $.getJSON("/basket/action/add/id/" ,{ pid : id}, function(data) {})