I am using a Font Awesome check-box on/off and the below script to toggle off and on when clicked.
This works fine if my links are #, but I recently changed my links to submit a form on a click of the check-box. This issue is once the page reloads, the checkbox goes back to the initial on state. I am not a Javascript pro and I am wondering if I can pass a variable to the script to set the state off/on?
<ul id="setting-cb">
<li class="wet-asphalt"><i class="fa fa-check-square-o wet-asphalt"></i> Checkbox 1</li>
</ul>
<script>
$('#setting-cb li a').click(function(){
$(this).next('ul').slideToggle('500');
$(this).find('i').toggleClass('fa-square-o fa-check-square-o')
});
</script>
As discussed, because you already added the value to a hidden input you can simply catch it again using this:
class="<?=($_POST['your_checkbox_name'] == 'x')?'class_name':''?>"
Try to perform an Ajax call.
Here's an example:
JS:
$("#setting-cb li a").click(function(e) {
e.preventDefault();
$(this).next('ul').slideToggle('500');
$(this).find('i').toggleClass('fa-square-o')
$.ajax({
url: '/destination.php',
type: 'POST',
data: {
//your data Here
},
success: function(response) {
//Do something here...
}
});
});
HTML:
<ul id="setting-cb">
<li class="wet-asphalt"><i class="fa fa-check-square-o wet-asphalt fa-square-o"></i> Checkbox 1</li>
</ul>
Fiddle
Related
My HTMl file has code:
<li id="b1" onclick="myfunc(this)" class="thumbsup fa fa-thumbs-up" ></li>
Above code makes a like button whose color changes on click.
Now I want to get its color on form submission so that on php side I can add number of likes in DB accordingly. That is if user clicked this button then it's color changes to grey . So in jquery i want to see if it is grey and then in php increment value in DB accordingly. Not sure how i can retrieve color of li element in jquery.
Please note that user can click button multiple times. like first time on clicking , button turns grey and when clicked again. it turns to its default color and so on...
As #mplungjan states on the comment you don't need a color to get if it is clicked. You can write an onlick function to send an ajax request to your php file, do the query for the like there and on return you can write a very simple code to color and disable click of the button again.
Like this;
myfunc(e){
$.ajax({
type:'POST',
url:'yourphpfile.php',
data:{whatever:youwanttosend},
success:function(data){
$('#b1').css('background-color':'green');
});
}
You do not want the color of the li, you want its state. Toggle the class:
$(function() {
$(".thumbsup").on("click", function() {
$(this).toggleClass('liked'); // every time we click we set or remove
$(this).next().removeClass('disliked'); // remove from the thumbsdown
})
$(".thumbsdown").on("click", function() {
$(this).toggleClass('disliked'); // every time we click we set or remve
$(this).prev().removeClass('liked'); // remove from thumbsup
})
$("#save").on("click", function() {
var liked = $(".liked").length,
disliked = $(".disliked").length;
console.log(liked,disliked);
// ajax here - sending liked:0,disliked:0 if nothing clicked
$.post("savelike.php",{ "liked":liked,"disliked":disliked},function() {
console.log("saved");
});
})
})
.liked { background-color:green }
.disliked { background-color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a1" class="thumbsup fa fa-thumbs-up">👍</li>
<li id="a2" class="thumbsdown fa fa-thumbs-down">👎</li>
</ul>
<button id="save" type="button">Save</button>
Original more complex example with more than one like/dislike set
$(function() {
$(".thumbsup").on("click", function() {
$(this).toggleClass('liked'); // every time we click we set or remove
$(this).next().removeClass('disliked'); // remove from the thumbsdown
})
$(".thumbsdown").on("click", function() {
$(this).toggleClass('disliked'); // every time we click we set or remve
$(this).prev().removeClass('liked'); // remove from thumbsup
})
$("#count").on("click", function() {
console.log($(".liked").length,"liked",
$(".disliked").length,"disliked"); // how many
// which ones - using http://api.jquery.com/map/
let likes = $('.thumbsup.liked').map(function(){ // array map
return this.id; // each ID that is liked
}).get();
let dislikes = $('.thumbsdown.disliked').map(function(){
return this.id
}).get();
// here are the arrays - use .join(",") to get a list
console.log(likes.length>0?likes:"No likes",
dislikes.length>0?dislikes:"No dislikes")
})
})
.liked { background-color:green }
.disliked { background-color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a1" class="thumbsup fa fa-thumbs-up">👍</li>
<li id="a2" class="thumbsdown fa fa-thumbs-down">👎</li>
<li id="b1" class="thumbsup fa fa-thumbs-up">👍</li>
<li id="b2" class="thumbsdown fa fa-thumbs-down">👎</li>
</ul>
<button id="count" type="button">Count</button>
You can use find function of jQuery.
Suppose you have multiple li under div element than you can try the following code to get all li elements which color is grey.
$( "div.classname" ).find( "li.thumbsup" ).css( "background-color", "grey " ).
In my webpage I am using jquery tabs.
<script type="text/javascript">
$(document).ready(function()
{
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
disabled: [3,4],
activate: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
}
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('#stop-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('.select-tab').on('click', function() {
$('#horizontalTab').responsiveTabs('activate', $(this).val());
});
});
</script>
<div id="horizontalTab" style="margin-top:10px;">
<ul class="tabul">
<li class="tabli">
<?php echo lang('purchasedtickets');?>
</li>
<li class="tabli"><?php echo lang('gifted').' '.lang('tickets');?></li>
<li class="tabli"><?php echo lang('received').' '.lang('tickets');?></li>
</ul>
<div id="purchased"></div>
<div id="gifted"></div>
<div id="received"></div>
</div>
When I click on tab2 ie, #gifted tab, the corresponding result will be fetched from an ajax call and will be set to div with id gifted. In this sections I am using Codeigniter pagination. If I click on pagination link 2 of gifted section, the URL will come like http://domain.org/project/video/tickets/2#gifted where 2 in the URL is the page number.
After this, when I click on any other tab say tab1 ie, purchased tab, then the link of page will come like http://domain.org/project/teshot/video/tickets/2#purchased (instead of http://domain.org/project/teshot/video/tickets#purchased) which is appending the url of previous section.
I want to avoid this problem. How can I solve this?
Can ayone help me?
Thanks in advance.
Got a problem with my WordPress menu. After I insert the jquery my links (in the menu and in sidebars won't work. What to do? Thank you!
My code:
HTML
<ul class="menu">
<li class="menu-item">
Link text
<ul class="sub-menu">
<li><a>Text</a></li>
<li><a>Text</a></li>
<li><a>Text</a></li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function(){
$('li.menu-item').each(function() {
var $dropdown = $(this);
$($dropdown).click(".menu-item a", function(e) {
e.preventDefault();
$ul = $("ul.sub-menu", $dropdown);
$('ul.sub-menu').toggle();
$("ul.sub-menu").not($ul).hide();
return false;
});
});
$('html').click(function(){
$("ul.sub-menu").hide();
});
});
There might be a problem with the event propagation. If a link within a sub-menu is clicked the click event propagates to the surrounding menu-item and triggers your JS code.
Please try to add this code to prevent the propagation effect:
$( "ul.sub-menu a" ).click(function( event ) {
event.stopPropagation();
});
please fix the issue by replacing below script
<li class="menu-item> to <li class="menu-item">
I currently have a php script which is loaded by Javascript when a button is clicked.
It creates all the html content which looks like this once loaded
<ul>
<li>
<a href='foo.php?var=abc123'>
</li>
<li>
<a href='foo.php?var=def123'>
</li>
</ul>
So when a link is clicked, it uses GET to send PHP variable to same script, and it brings up another list of results.
What I want to do, is when you click a link instead of going to a new page with results, it loads them below this part to result in something like this (like a treeview():
<ul>
<li>
abc123
</li>
<ul>
<li>
jkl123
</li>
<li>
ghi123
</li>
</ul>
<li>
def123
</li>
</ul>
I can get it to work if I use static variables, but i need to find a way to take the variable from the created html on click, put it into the javascript function, so it can execute the PHP script.
Thanks.
It sounds like you're going to want to use AJAX:
$.ajax({
type: 'GET',
url: "yoururlhere.com",
data: {
someparam: "somevalue",
param2: "anothervalue"
},
dataType: "json",
success: function (JSONdata, textStatus, jqXHR) {
// do work here on success
}
});
You can attach it to a click handler like this:
$("someID").on("click",function(){
event.preventDefault();
var href = $(this).attr("href");
$.ajax({
type: 'GET',
url: href ,
data: "param=value¶m2=anothervalue",
success: function (JSONdata, textStatus, jqXHR) {
// do work here on success
}
});
});
Update:
Some example HTML to go along with the above code:
<a id="someID" href="yoururl.php">Click me</a>
i have a problem with this jquery, in the success function call, its mean to remove the `support' button, and fade in the msg, this is my jquery code:
$('.stats').delegate('.against', 'click', function(e) {
//stop event
e.preventDefault();
// cache a reference to the previous <li> element
// since it is used more than once
var $prevLi = $(this).closest('li').prev('li');
//get the id
var the_id = $prevLi.attr('id').split('_').pop();
//the main ajax request
$.ajax({
context:this,
type: "POST",
data: "action=against&id=" + the_id,
url: "ajax/sa.php",
success: function (msg) {
$prevLi.find("h2.score_down").html(msg).fadeIn();
$(this).closest('li').next().next().find('button').remove(); $(this).remove();
}
});
});
the html:
<ul class="stats">
<li id="topic_20" class="score">
<h2 class="score_up" style="color:green;">10</h2>
<span style="text-align:center;">Supporters</span>
</li>
<li>
<button type="submit" value="Actions" class="support" title="support">
<i></i>
<span>Support</span>
</button>
</li>
<li id="down_20"class="score"><h2 class="score_down">20</h2><span style="text-align:center;">Against</span>
</li>
<li>
<button type="submit" value="Actions" class="against" title="against">
<i></i><span>Against</span></button>
</li>
</ul>
<h3 class="success"></h3>
this jquery is meant to remove the support button, when clicked and the new score is meant to fade in! :)) thanks
The button is in the <li> 2 previous to the .against containing one, so your .next() calls should be .prev(), like this:
$(this).closest('li').prev().prev().find('button').remove();
Why not use $("button[type=submit]")? Or just $("button")? If you use the double prev() you're going to have to adjust your code when your markup changes. If you do that often enough, that makes making changes a nightmare later.