conditional logic for css if a selection field (with meta_key) have specific value using ajax/jquery
I have a selection field with a meta_key (for example:'text_style') and 3 values (for example:'normal', 'bold', 'italic'), and an element after it (for example: a div with a text in it).
Now i need to update "changeable-class" for each values, when a user select them without reloading page (I can do it).
How do it using AJAX (or any other way that is simpler and faster in loading)?
Do I need to use meta_key to do it really?
Regard
php ajax wordpress conditional meta-key
asked Dec 29 '18 at 15:57
magic-boymagic-boy
15
add a comment |
I have a selection field with a meta_key (for example:'text_style') and 3 values (for example:'normal', 'bold', 'italic'), and an element after it (for example: a div with a text in it).
Now i need to update "changeable-class" for each values, when a user select them without reloading page (I can do it).
How do it using AJAX (or any other way that is simpler and faster in loading)?
Do I need to use meta_key to do it really?
Regard
php ajax wordpress conditional meta-key
asked Dec 29 '18 at 15:57
magic-boymagic-boy
15
you don't need AJAX for this, just a small piece of javascript, if you use jQuery it'll be easier for you. but you should share the code you tried at least ..
– moped
Dec 29 '18 at 21:40
@moped ,Thanks a lot! You're right! I do it :-)
– magic-boy
Dec 29 '18 at 21:50
add a comment |
I have a selection field with a meta_key (for example:'text_style') and 3 values (for example:'normal', 'bold', 'italic'), and an element after it (for example: a div with a text in it).
Now i need to update "changeable-class" for each values, when a user select them without reloading page (I can do it).
How do it using AJAX (or any other way that is simpler and faster in loading)?
Do I need to use meta_key to do it really?
Regard
php ajax wordpress conditional meta-key
asked Dec 29 '18 at 15:57
magic-boymagic-boy
15
I have a selection field with a meta_key (for example:'text_style') and 3 values (for example:'normal', 'bold', 'italic'), and an element after it (for example: a div with a text in it).
Now i need to update "changeable-class" for each values, when a user select them without reloading page (I can do it).
How do it using AJAX (or any other way that is simpler and faster in loading)?
Do I need to use meta_key to do it really?
Regard
php ajax wordpress conditional meta-key
php ajax wordpress conditional meta-key
asked Dec 29 '18 at 15:57
magic-boymagic-boy
15
asked Dec 29 '18 at 15:57
magic-boymagic-boy
15
edited Dec 29 '18 at 22:14
magic-boy
asked Dec 29 '18 at 15:57
magic-boymagic-boy
15
asked Dec 29 '18 at 15:57
magic-boymagic-boy
15
asked Dec 29 '18 at 15:57
magic-boymagic-boy
15
15
you don't need AJAX for this, just a small piece of javascript, if you use jQuery it'll be easier for you. but you should share the code you tried at least ..
– moped
Dec 29 '18 at 21:40
@moped ,Thanks a lot! You're right! I do it :-)
– magic-boy
Dec 29 '18 at 21:50
add a comment |
you don't need AJAX for this, just a small piece of javascript, if you use jQuery it'll be easier for you. but you should share the code you tried at least ..
– moped
Dec 29 '18 at 21:40
@moped ,Thanks a lot! You're right! I do it :-)
– magic-boy
Dec 29 '18 at 21:50
you don't need AJAX for this, just a small piece of javascript, if you use jQuery it'll be easier for you. but you should share the code you tried at least ..
– moped
Dec 29 '18 at 21:40
you don't need AJAX for this, just a small piece of javascript, if you use jQuery it'll be easier for you. but you should share the code you tried at least ..
– moped
Dec 29 '18 at 21:40
@moped ,Thanks a lot! You're right! I do it :-)
– magic-boy
Dec 29 '18 at 21:50
@moped ,Thanks a lot! You're right! I do it :-)
– magic-boy
Dec 29 '18 at 21:50
add a comment |
1 Answer
1
active
oldest
votes
This is my solution (thanks and regard to @moped):
//JavaScript
document.getElementById('StyleSelection').onchange = function(){
document.getElementById('myDiv').className = this.value;
};/* css */
.normal { font-style: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;} <!-- html -->
<form id="myform" action="#">
<select id="StyleSelection">
<option value="">Please select...</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select>
</form>
<div id="myDiv">This is myBox</div> If every body have a solution using meta_key, I really thank him...
Regard
answered Dec 29 '18 at 22:01
magic-boymagic-boy
15
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971054%2fconditional-logic-for-css-if-a-selection-field-with-meta-key-have-specific-val%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is my solution (thanks and regard to @moped):
//JavaScript
document.getElementById('StyleSelection').onchange = function(){
document.getElementById('myDiv').className = this.value;
};/* css */
.normal { font-style: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;} <!-- html -->
<form id="myform" action="#">
<select id="StyleSelection">
<option value="">Please select...</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select>
</form>
<div id="myDiv">This is myBox</div> If every body have a solution using meta_key, I really thank him...
Regard
answered Dec 29 '18 at 22:01
magic-boymagic-boy
15
add a comment |
This is my solution (thanks and regard to @moped):
//JavaScript
document.getElementById('StyleSelection').onchange = function(){
document.getElementById('myDiv').className = this.value;
};/* css */
.normal { font-style: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;} <!-- html -->
<form id="myform" action="#">
<select id="StyleSelection">
<option value="">Please select...</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select>
</form>
<div id="myDiv">This is myBox</div> If every body have a solution using meta_key, I really thank him...
Regard
answered Dec 29 '18 at 22:01
magic-boymagic-boy
15
add a comment |
This is my solution (thanks and regard to @moped):
//JavaScript
document.getElementById('StyleSelection').onchange = function(){
document.getElementById('myDiv').className = this.value;
};/* css */
.normal { font-style: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;} <!-- html -->
<form id="myform" action="#">
<select id="StyleSelection">
<option value="">Please select...</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select>
</form>
<div id="myDiv">This is myBox</div> If every body have a solution using meta_key, I really thank him...
Regard
answered Dec 29 '18 at 22:01
magic-boymagic-boy
15
This is my solution (thanks and regard to @moped):
//JavaScript
document.getElementById('StyleSelection').onchange = function(){
document.getElementById('myDiv').className = this.value;
};/* css */
.normal { font-style: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;} <!-- html -->
<form id="myform" action="#">
<select id="StyleSelection">
<option value="">Please select...</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select>
</form>
<div id="myDiv">This is myBox</div> If every body have a solution using meta_key, I really thank him...
Regard
//JavaScript
document.getElementById('StyleSelection').onchange = function(){
document.getElementById('myDiv').className = this.value;
};/* css */
.normal { font-style: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;} <!-- html -->
<form id="myform" action="#">
<select id="StyleSelection">
<option value="">Please select...</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select>
</form>
<div id="myDiv">This is myBox</div> //JavaScript
document.getElementById('StyleSelection').onchange = function(){
document.getElementById('myDiv').className = this.value;
};/* css */
.normal { font-style: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;} <!-- html -->
<form id="myform" action="#">
<select id="StyleSelection">
<option value="">Please select...</option>
<option value="normal">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select>
</form>
<div id="myDiv">This is myBox</div> answered Dec 29 '18 at 22:01
magic-boymagic-boy
15
edited Jan 6 at 14:31
answered Dec 29 '18 at 22:01
magic-boymagic-boy
15
answered Dec 29 '18 at 22:01
magic-boymagic-boy
15
answered Dec 29 '18 at 22:01
magic-boymagic-boy
15
15
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971054%2fconditional-logic-for-css-if-a-selection-field-with-meta-key-have-specific-val%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you don't need AJAX for this, just a small piece of javascript, if you use jQuery it'll be easier for you. but you should share the code you tried at least ..
– moped
Dec 29 '18 at 21:40
@moped ,Thanks a lot! You're right! I do it :-)
– magic-boy
Dec 29 '18 at 21:50