Ask your WordPress questions! Pay money and get answers fast! (more info)

a selector in jquery WordPress

  • SOLVED

I need to add a "box" in the edition of page and post (probably in the header of the backoffice)
In this "box" i need 5 links (4 flags and the word "all")
-french (fr)
-english (en)
-chinese (zh)
-japonese (ja)
-all




In my page, I have several custom fields (magic fields plugin).
For a field "company", label and field are in a div.mf-field-company

For a field "fr_company", label and field are in a div.mf-field-fr_company
For a field "en_company", label and field are in a div.mf-field-en_company
For a field "zh_company", label and field are in a div.mf-field-zh_company
For a field "ja_company", label and field are in a div.mf-field-ja_company


<strong>what i want ?</strong>

<strong>1---</strong>
I want this box in the header of the backoffice.

<strong>2---</strong>
When i click on the french flag, div with a class containing mf-field-en, mf-field-zh or mf-field-ja are hidden.

When i click on the english flag, div with a class containing mf-field-fr, mf-field-zh or mf-field-ja are hidden.

When i click on the chinese flag, div with a class containing mf-field-fr, mf-field-en or mf-field-ja are hidden.

When i click on the japonese flag, div with a class containing mf-field-fr, mf-field-en or mf-field-zh are hidden.

When i click on the japonese flag, div with a class containing mf-field-fr, mf-field-en or mf-field-zh are hidden.

When i click on "all", div with a class containing mf-field-fr, mf-field-en, mf-field-ja or mf-field-zh are visible.

<strong>3---</strong>
the setting is saved. If i hide div with a class containing mf-field-en, mf-field-zh or mf-field-ja, and if i open another page, the setting is avalaible in this another page.



If you have questions, i am here.

Answers (4)

2012-07-27

Hai Bui answers:

I can do 2 and 3, but I don't understand where you want to put the box. Where is "the header of the backoffice", exactly?


Sébastien | French WordpressDesigner comments:

the box ( = the selector) is at the top of the backend, or like a metabox in the edition of each page and post. As you want.


Hai Bui comments:

Please try this: (I used cookies to save the language settings)


<?php
/* Define the language box */
add_action( 'add_meta_boxes', 'mflang_add_custom_box' );

/* Adds the language box to the main column on the Post and Page edit screens */
function mflang_add_custom_box() {
wp_enqueue_script("jquery-cookie");
add_meta_box(
'mflang_id',
'Languages',
'mflang_box',
'post',
'normal',
'high'
);
add_meta_box(
'myplugin_sectionid',
'Languages',
'mflang_box',
'page',
'normal',
'high'
);
}

/* Prints the language box content */
function mflang_box( $post ) {
?>
<div id="mf-lang-bar">
<a id="mf-field-fr" href="#">fr</a>
<a id="mf-field-en" href="#">en</a>
<a id="mf-field-zh" href="#">zh</a>
<a id="mf-field-ja" href="#">ja</a>
<a id="mf-field-all" href="#">all</a>
</div>
<script>
jQuery(document).ready(function($) {
allfields = $('div[class*="mf-field-en"],div[class*="mf-field-fr"],div[class*="mf-field-zh"],div[class*="mf-field-ja"]');
$("#mf-lang-bar a").click(function() {
if ($(this).attr("id") != 'mf-field-all') {
activefields = $('div[class*="' + $(this).attr('id') + '"]');
allfields.not(activefields).hide();
activefields.show();
}
else allfields.show();
setCookie("mf-lang",$(this).attr("id"),365);
return false;
});
savedLang = getCookie("mf-lang");
if (savedLang!="") {
alert(savedLang+"");
$("#"+savedLang).click();
}
});
function setCookie(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) {
return unescape(y);
}
}
}
</script>
<?php

}
?>


You still have to style the links (to make them flags), though. Let me know if there are any problems.


Sébastien | French WordpressDesigner comments:

hey ! that seems perfect ! that works !
i make some tests now


Sébastien | French WordpressDesigner comments:

just comment, please, tle line adding an alert
and add please a class "current" in the flag
:-)) thanks


Sébastien | French WordpressDesigner comments:

is it possible to have only english fields visible as default settings ?
i can increase the fee to 55$
is it ok for you ?


Hai Bui comments:

Sorry about the alert line, I forgot to delete it. Below is the update code following your instructions. If you can increase the prize to $55, that would be great.


<?php
/* Define the language box */
add_action( 'add_meta_boxes', 'mflang_add_custom_box' );

/* Adds the language box to the main column on the Post and Page edit screens */
function mflang_add_custom_box() {
wp_enqueue_script("jquery-cookie");
add_meta_box(
'mflang_id',
'Languages',
'mflang_box',
'post',
'normal',
'high'
);
add_meta_box(
'mflang_id',
'Languages',
'mflang_box',
'page',
'normal',
'high'
);
}

/* Prints the language box content */
function mflang_box( $post ) {
?>
<div id="mf-lang-bar">
<a id="mf-field-fr" href="#">fr</a>
<a id="mf-field-en" href="#">en</a>
<a id="mf-field-zh" href="#">zh</a>
<a id="mf-field-ja" href="#">ja</a>
<a id="mf-field-all" href="#">all</a>
</div>
<script>
jQuery(document).ready(function($) {
allfields = $('div[class*="mf-field-en"],div[class*="mf-field-fr"],div[class*="mf-field-zh"],div[class*="mf-field-ja"]');
$("#mf-lang-bar a").click(function() {
$("#mf-lang-bar a").removeClass("current");
$(this).addClass("current");
if ($(this).attr("id") != 'mf-field-all') {
activefields = $('div[class*="' + $(this).attr('id') + '"]');
allfields.not(activefields).hide();
activefields.show();
}
else allfields.show();
setCookie("mf-lang",$(this).attr("id"),365);
return false;
});
savedLang = getCookie("mf-lang");
if (!savedLang) savedLang = "mf-field-en";
$("#"+savedLang).click();
});
function setCookie(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) {
return unescape(y);
}
}
}
</script>
<?php
}
?>


Sébastien | French WordpressDesigner comments:

that doesn't work, it seems.
I clear my cookies but the setting by default seems to be "all"


Sébastien | French WordpressDesigner comments:

i have this problem in FF not in chrome


Hai Bui comments:

Weird... it works for me in all browsers. Are you sure you cleared the cookies?


2012-07-27

Sabby Sam answers:

Hi,

This all above stuff can be done by viewing your code, so you probably need to hire some one to do this job,
if you give me your pm access then it would be easier to do.


Sébastien | French WordpressDesigner comments:

it's not a big job, it's just a function.

To try your function, yu need just to have 4 div in your BO :
div.mf-field-fr_company
div.mf-field-en_foo
div.mf-field-zh_example
div.mf-field-ja_whatelse

2012-07-27

Daniel Yoen answers:

1. I want this box in the header of the backoffice.

If you mean is Admin Backend, your code should be like this :


function jsfuntion()
{
wp_enqueue_script('javascript', get_template_directory_uri() . '/js/javascript.js');
}
add_action( 'admin_head', 'jsfuntion' );


2. Sample code

<script type="text/javascript">
$(document).ready(function(){

$('div.mf-field-fr_company').click(function(){
$("div.mf-field-en_company").hide();
$("div.mf-field-zh_company").hide();
$("div.mf-field-ja_company").hide();
});
});
</script>

3. I am not undestand :D


Sébastien | French WordpressDesigner comments:

Hi Daniel,
thanks for your message :-)

I explain the point 3 :
I want that the setting is saved for the current page and for the others page (like a cookie for example)
Is it clear ?

2012-07-28

Christianto answers:

Hi Sébastien,

<blockquote>I want this box in the header of the backoffice.</blockquote>
Did you mean add this box in backend? on post/page editor page?

<blockquote>3.the setting is saved. If i hide div with a class containing mf-field-en, mf-field-zh or mf-field-ja, and if i open another page, the setting is avalaible in this another page.</blockquote>

It looks like the setting is same from one page/post to another or different..?
I think you need to save it on custom fields if different or on wp_option if same,
you can do it by ajax so once user click the box, the hidden class value saved.

the javascript code look like this
jQuery(document).ready(function($){

// get the id of the post/page
var postID = $('#post_ID').val();

// add html language box
var htmlbox = '<div class="lang-bar"><div class="mf-field-fr_company-box">French</div><div class="mf-field-en_company-box">English</div><div class="mf-field-zh_company-box">Chinese</div><div class="mf-field-ja_company-box">Japanese</div><div class="all-lang-box">All Language</div></div>';
$('#wpwrap').append(htmlbox);

// add click event to the html language box
$('.lang-bar > div').click(function(){

// remove the "-box" since we use the element class plus -box to each box..
var selector_id = $(this).attr('class').replace(/-box$/,'');

// hide all element first
$('div.mf-field-fr_company, div.mf-field-en_company,div.mf-field-zh_company,div.mf-field-ja_company').hide();

// show selected element or if all element selected
if($(this).hasClass('all-lang-box')){
$('div.mf-field-fr_company, div.mf-field-en_company,div.mf-field-zh_company,div.mf-field-ja_company').show();
} else {
$('div.'+selector_id).show();
}

// saved selected element class to post_meta field..
var save_data = {
action: 'lang_field_element',
doing : 'save_value',
post_id : postID,
selector : selector_id
};
$.post(ajaxurl, save_data, function(data){
// saved callback if required..
});
});

// retrieve saved hidden element so we can hide/show it when page load..
var get_data = {
action: 'lang_field_element',
doing : 'get_value',
post_id : postID
};

$.post(ajaxurl, get_data, function(response) {

// show class based on saved meta value
if(response != 'all-lang') {
$('div.mf-field-fr_company, div.mf-field-en_company,div.mf-field-zh_company,div.mf-field-ja_company').hide();
$('.'+response).show();
}

});

});


The wp_ajax function look like this..
add_action('wp_ajax_lang_field_element', 'lang_field_element_function');

function lang_field_element_function() {

$lang_class = 'all-lang';

if($_POST['doing'] == 'get_value'){

$lang_class = get_option( '_hidden_lang_box');

// use custom field if setting is different from one post to another
// $lang_class = get_post_meta($_POST['post_id'], '_hidden_lang_box', true);

} else if($_POST['doing'] == 'save_value'){

update_option( '_hidden_lang_box', $_POST['selector'] );

// use custom field if setting is different from one post to another
// update_post_meta($_POST['post_id'], '_hidden_lang_box', $_POST['selector'] );
}

echo $lang_class;

die();
}


you can style/positoned the language box (var <em>htmlbox</em>) by css like you want
.lang-bar{
position: absolute;
/* style goes here */
}
.lang-bar>div{
/* style goes here */
}


hope this help.. :D


Sébastien | French WordpressDesigner comments:

Hi Christianto,
thanks for this answer :-)

yes, this selector, this box, could be on post/page editor page.


"The setting is saved" -> it's like a cookie for example.
example : i have two posts : post1 and post2
i am in the editor of post1, i click on french flag ->japanese div, english div, chinese div are hidden.
if i open the editor of post 2, this fields are hidden too.

Could you post the complete code please ?
Thanks


Christianto comments:

Please download the zip, and put the css/js folder on your theme directory..
and put the code on lang_php.php on your functions.php

You can style/adding flag on the button by editing the css file if you want..
Let me know if you have a problem..


Christianto comments:

It looks like the attachment not appear.. :)
please download it on [[LINK href="https://www.dropbox.com/s/ih6jvwa36gbbeti/sebastien.zip"]]dropbox here[[/LINK]]


Sébastien | French WordpressDesigner comments:

Hi Christianto

i tested your code :-)

1-no box appears. Did you added the code to create the box ?
2-in your code it seems that you target div with a class with this name : mf-field-[LANG INITIALS]_company
but you must target all divs having a class with this structure
mf-field-[LANG INITIALS]_[NAME OF THE FIELD]


Christianto comments:

Yes, Of course
I add the box, please check the screenshot..
http://postimage.org/image/ib1nsyg4v

Could it be conflicted since I add it using jQuery? is it the site online, let me check it if it online..

For the class, sorry I thought only one field that has the class that are hidden..
Replace the js code on lang_script.js to

jQuery(document).ready(function($){

// get the id of the post/page
var postID = $('#post_ID').val();

// add html language box
var htmlbox = '<div id="lang-bar" class="clearfix"><div class="lang-bar"><div id="mf-field-fr-box">French</div><div id="mf-field-en-box">English</div><div id="mf-field-zh-box">Chinese</div><div id="mf-field-ja-box">Japanese</div><div id="all-lang-box">All Language</div></div></div>';
$('#wpcontent').prepend(htmlbox);

// add click event to the html language box
$('.lang-bar > div').click(function(){

// remove/add class active
$('.lang-bar>div').removeClass('active');
$(this).addClass('active');

// remove the "-box" since we use the element class plus -box to each box..
var selector_id = $(this).attr('id').replace(/-box$/,'');

// hide all element first
$('div[class*="mf-field-fr_"], div[class*="mf-field-en_"], div[class*="mf-field-zh_"], div[class*="mf-field-ja_"]').hide();
//console.log('hide');

// show selected element or if all element selected
if(selector_id == 'all-lang'){
$('div[class*="mf-field-fr_"], div[class*="mf-field-en_"], div[class*="mf-field-zh_"], div[class*="mf-field-ja_"]').show();
//console.log('all');
} else {
$('div.'+selector_id).show();
$('div[class*="'+selector_id+'_"]').show();
//console.log(selector_id);
}

// saved selected element class to post_meta field..
var save_data = {
action: 'lang_field_element',
doing : 'save_value',
post_id : postID,
selector : selector_id
};
$.post(ajaxurl, save_data, function(data){
// saved callback if required..
});

});

// retrieve saved hidden element so we can hide/show it when page load..
var get_data = {
action: 'lang_field_element',
doing : 'get_value',
post_id : postID
};

$.post(ajaxurl, get_data, function(response) {

// show class based on saved meta value
if(response != 'all-lang') {
$('div[class*="mf-field-fr_"], div[class*="mf-field-en_"], div[class*="mf-field-zh_"], div[class*="mf-field-ja_"]').hide();
$('div[class*="'+response+'_"]').show();
$('#'+response+'-box').addClass('active');
} else {
$('div[class*="mf-field-fr_"], div[class*="mf-field-en_"], div[class*="mf-field-zh_"], div[class*="mf-field-ja_"]').show();
$('#'+response+'-box').addClass('active');
}

});

});


Sébastien | French WordpressDesigner comments:

ok i see the buttons. But they seems not be clicable


Christianto comments:

Any error on console log?


Sébastien | French WordpressDesigner comments:

no i don't think
i test the code of Hai Bui now