I have a site in which i can change theme by clicking on a color like this:
<ul>
<li>
<span class='red'></span>
<span class='orange'></span>
<span class='green'></span>
</li>
</ul>
This part works just fine, but... When refreshing page it goes back to normal, so.
I want to save the color in my DB using jQuery Ajax, but not sure how to send the color onclick to my jQuery function?
$(function() {
$('.themechange').click(function() {
$.ajax({
type: "POST",
url: "http://mydomain.com/updatetheme.php",
data: "color=somecolor",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});
});
I don't know how to do this and are hoping for help :-)
Try something like this:
<ul>
<li>
<span class='red themechange' data-color='red'></span>
<span class='orange themechange' data-color='orange'></span>
<span class='green themechange' data-color='green '></span>
</li>
</ul>
Jquery:
$(function() {
$('.themechange').click(function() {
$.ajax({
type: "POST",
url: "http://mydomain.com/updatetheme.php",
data: "color=" + $(this).data('color'),
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});
});
get same class for your list elements:
<ul>
<li>
<span class='themechange' data-color='red'></span>
<span class='themechange' data-color='orange'></span>
<span class='themechange' data-color='green '></span>
</li>
</ul>
(function() {
$('.themechange').click(function() {
$.ajax({
type: "POST",
url: "http://mydomain.com/updatetheme.php",
data: "color=" + $(this).attr('data-color'),
success: function(msg){
alert( "Data Saved: " + msg );
}
});
See which class is adding when you are changing the theme. It may add to your page's body. If so then store that class into jQuery cookies or you can use php session/cookies [via ajax]. Then add php session/cookie variable to body. Like this <body class="<?php echo $_SESSION['themeName'] ?>">
You have to get color value and call ajax on click event
$(document).ready(function(){
$("li").click(function(){
alert('Here ajax happens with color: ' + $(this).attr("class"));
/*
$.ajax({
type: "POST",
url: "http://mydomain.com/updatetheme.php",
data: { color: $(this).attr("class") }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
*/
});
});