Is there a plugin or another way...
Basically in the backend of wordpress I want the user to be able to select a file or page from a drop down list and then it displays the URL so they can copy and paste it into the content filed for easy linking?
Example:
they select a file
document.pdf
and in a box below it displays the URL
/wp-content/uploads/2013/10/document.pdf
so then they can copy and paste that URL into their content?
Been looking for a while to figure this out but no luck as of yet!
I'm also using Advanced Custom Fields if this can help?
Basically this is what I have so far.. I have two fields in the back end, a page_link select field & a text field. The page_link lists all linkable objects (pages, attachments, images..etc) and in the functions.php file I have this code..
function add_jquery_data() {
global $parent_file;?>
<script>
jQuery(document).ready(function () {
jQuery("#acf-field-select_content").change(function() {
var str = "";
jQuery("option:selected", this).each(function() {
str += jQuery(this).val();
});
jQuery("#acf-field-show_content_url").val(str);
})
.trigger("change");
});
</script>
<?php }
add_filter('admin_head', 'add_jquery_data');
What this is doing is grabbing the value of the option in the select field and placing it in the text field.. but wordpress only puts the object ID in the value! So all im getting is a number not a full URL.. Any ideas?
http://img545.imageshack.us/img545/1472/5zy2.png
Here's a screenshot for a better understanding
Related
I've got a WP portfolio site using isotope to filter and sort. It works well; however, one thing I want to do is just not working.
When I hover over an image on the portfolio page, I want it to highlight all other images that are in that category. I can do it by adding each category manually using jQuery. The person whose portfolio it will be will be adding a lot more categories and won't be able to go in and fiddle with the .js file every time he adds something.
I'm sure there's a way, I just don't know how to write code. I've got this and it works nicely, but I'd rather it be able to work dynamically and not have to define the category specifically.
$('.portfolio_categories-mood-images').bind('hover', function(e){
$('.portfolio_categories-mood-images').each(function(i){
$(this).toggleClass('highlight-all');
}, function() { $(this).removeClass('highlight-all'); }); });
I'm not sure if I'm making sense. I'm still fairly new with jQuery and Javascript, so thanks in advance for your patience.
REDO:
Based on your response regarding what your <div> code looks like per image, see if this revision works better. I have notated for clarity:
<script>
// Use a more general selection type that will grab portfolio images
$(".portfolio_item").hover(
function() {
// Get the data contained in category
var ThisData = $(this).data('category');
// Split it with spaces since there are multiple space-separated tags
var GetClass = ThisData.split(" ");
// Since you have same-name classes as the array value 0 (presumably)
// you can just use the category value 0 for class name
$("."+GetClass[0]).addClass('highlight-all');
},
function() {
// Just remove the class from all elements
$(".portfolio_item").removeClass('highlight-all');
});
</script>
I'm trying to get Wordpress' Admin Post Page to display some form of output when a specific category (say, 'Featured') is selected.
Something like this (original page):
When I select the 'Featured' category (selected 'Featured' category), I want something to display, like this:
Meaning the page checks if the specific category is checked, and if it is, Wordpress generates an option menu for the user to fill in.
How do I go about doing this? I'm looking at the Wordpress Codex but so far, no dice.
You'll have to print some jQuery only in that screen, and then it's matter of listening for live changes and making the show/hide actions.
The following is from this WPSE Answer. You have to adjust the elements IDs. Also, jQuery's live method is deprecated, change that as well.
add_action('admin_head', 'wpse_53486_script_enqueuer');
function wpse_53486_script_enqueuer() {
global $current_screen;
if ( 'post' == $current_screen->id )
{
echo <<<HTML
<script type="text/javascript">
jQuery(document).ready( function($) {
if ( $('#in-category-6').is(':checked') ) {
$("form#adv-settings label[for='myplugin_sectionid-hide']").show();
$('#myplugin_sectionid').show();
} else {
$('#myplugin_sectionid').hide();
$("form#adv-settings label[for='myplugin_sectionid-hide']").hide();
}
$('#in-category-6').live('change', function(){
if ( $(this).is(':checked') ) {
$('#myplugin_sectionid').show();
$("form#adv-settings label[for='myplugin_sectionid-hide']").show();
} else {
$('#myplugin_sectionid').hide();
$("form#adv-settings label[for='myplugin_sectionid-hide']").hide();
}
});
});
</script>
HTML;
}
}
Another method to print scripts in targeted admin pages.
If you want that you feature will works after the post is saved (so that it already marked id DB to witch category this post belong to), you should use in_category() function to detect whether this post is in the category that you want, and if so - to show your extra box.
But, as I understand you want that it will work also before the post is saved, so you should use jQuery - detect whether the checkbox with value x (where x is your category id) is checked, and then display your extra box by changing css display property from none to block.
Check out Advanced Custom Fields.
It is a wordpress plugin that allows you to add additional fields to posts, and it can do this by category. I have used it before to set background images on posts for use in a slider.
I've put a set of small images to function as links (around 50 more or less) on a page. In that same page I have a content place holder to display data from the database, and I have a table saved in phpmyadmin that has a set of fields filled with data.
What I want is when the user clicks on a certain image link, the data related to that image gets retrieved into the site. So I want the data to be retrieved to match the image clicked.
I know how to retrieve data from a database using the binding pannel in dreamweaver, and I know this has to do with filtering the data retrieved but I don't know how to do it.. How can I make this process work?
If it helps I'm also using Jquery CSS and javascript in this project.
The project looks like this:
http://i725.photobucket.com/albums/ww256/flower1991a/world_zps26b7083d.png
HTML code:
it doesnt show I took a screenshot of it:
http://i725.photobucket.com/albums/ww256/flower1991a/a_zpsa138aa52.png
jQuery code:
$(document).ready(function() {
// begin Ready
//...................................................
// When the form changes
$('#mapForm').change(function() {
var selectedContinent = $('#mapForm option:selected').val();
if (selectedContinent == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000);
$('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
}
});
//...................................................
// When a dot is clicked
$('a.dot').click(function(){
$('a.dot').removeClass('selected');
$(this).addClass('selected');
var city = '.city_detail#' + $(this).attr('city');
var htmlCode = $(city).html();
$('.detail_container').fadeOut(500, function(){
$('.detail_container .city_detail').html(htmlCode);
$('.detail_container').fadeIn(500);
});
});
// end Ready
});
You need to create a PHP script which takes a REQUEST variable parameter depending on the image that has been clicked, and which returns the data for that image.
You can then make a call to that PHP script via AJAX and populate whichever area of the page you want to with the data retrieved.
I have a CMS system that displays two CKEditors side by side so that the user can edit the main body and sidebar content. Both editors share the same toolbar.
I have added a plugin to allow users to add embedded data into the editor.
The only problem is I need the data to show on the currently selected editor, where the keyboard cursor is currently setting.
How do I use javascript or JQuery to get the CKEditor element that is currently selected before the button in pressed on the toolbar.
Right now I can only get it to work by directly selecting a specific editor instance.
CKEDITOR.instances.mtxDescription.insertHtml(data);
However I need to be able to have the data drop directly into whichever editor is selected
If you're creating a CKEditor plugin, then you already have a reference to the editor that it's active, check the basic tutorial about how to create a CKEditor plugin http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin
editor.addCommand( 'insertTimestamp',
{
exec : function( editor )
{
var timestamp = new Date();
editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
}
});
I'd put a class on the editor wrapper at some level where unique IDs exist, then something like:
var myEditor = $(this).closest('.my-class').attr('id');
I was able to solve this issue by adding a blur event to each editor and storing the last id of the last time the event was called.
var currentEditorInstance = 'mtxDescription';
for(name in CKEDITOR.instances) {
CKEDITOR.instances[name].on('blur', function () {
currentEditorInstance = this.name;
});
}
I have a form and I'm using the jQuery Table AddRow plugin to dynamically add rows to a table, the problem is I'm trying to when you select a Menu Item that the menu item goes into the text box to the left of it. It works on the first row but I can't figure out how to get it to work with rows that are added via the plugin.
You can see my code in action here: http://jsfiddle.net/VXNzd/
Here is the jQuery code:
// This moves the select box text to the input box
$('#mnu_names').change(function() {
var mnuProduct = $("#mnu_names").find(':selected').text();
var mnuCleanProduct = mnuProduct.split(' - ');
$('#topping_name').attr('value', mnuCleanProduct[0]);
});
// This code is needed to add and delete rows with the plugin
$(".toppings_add").btnAddRow({
It may be easier to see what I'm talking about by visiting the jsfiddle link up top. When it loads use the select box to and select something, It will put that info over into the text box without the price info. Add a new row and try it again. Won't work, can't figure out how to make it work.
The problem was as said by tomhallam your ID's are not unique. Also $.change() does not work on blocks added after you ran that. You should instead use $.on('change',...).
I updated your code and posted it on http://jsfiddle.net/PDPbn/5/.
The modified jquery-code goes as follows:
$(document).on('change','.mnu_names',function() {
var mnuProduct = $(this).find(':selected').text();
var mnuCleanProduct = mnuProduct.split(' - ');
$(this).parentsUntil('tbody').find('.topping_name').attr('value', mnuCleanProduct[0]);
});