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.
Related
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
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>
So, I understand that mixing javascript into HTML is bad, even in head. But lets see this code (I want to remove items the from list)
.
.
.
<div>item1 delete me<br />
<div>item4 delete me<br />
<div>item5 delete me<br />
.
.
.
This list is generated by PHP. deleteThisItemById() is in an external .js file. Is this still considered bad?
If so, what would be a canonical solution? jQuery is acceptable, as is raw javascript.
$(function() {
$('a#my_id1').click(function() {
var myId = $(this).attr('id');
return deleteThisItemByID(myId);
});
});
<div>
item1
<a id="my_id1" href="#">delete me</a>
</div>
By the way, your HTML is invalid. You have improperly nested div tags.
Simple... give the item you want removed a class or id (only use an id if its only one item)
<div>item1 <a href="#" class='deleteMe'>delete me</a><br /></div>
<div>item4 <a href="#" class='deleteMe'>delete me</a><br /></div>
<div>item5 <a href="#" class='deleteMe'>delete me</a><br /></div>
Then target the elements with jQuery
$('.deleteMe').on('click', function(event) {
$(this).remove();
});
Note... if you wanted to remove the entire div, use this selector:
$('.deleteMe').closest('div').on('click', function(event) {
$(this).remove();
});
you could use addEventListener to do this.
Then no js-code will be in your html:
var elems = document.querySelectorAll("div.removable");
for(var i=0;i<elems.length;i++){
elems[i].querySelector("a").addEventListener("click",function(e){
var toRemove = this.parentNode;
var parent = toRemove.parentNode;
parent.removeChild(toRemove);
},false);
}
however, I iterate over the divs, so I added a class for this:
<div>
<div class="removable">item1 delete me</div><br />
<div class="removable">item2 delete me</div><br />
<div class="removable">item2 delete me</div><br />
</div>
Have a look at this fiddle
I like to stash id's and similar metadata in "data-" attributes on the dom elements that represent those objects.
In this case I will usually use a similar setup
<ul class="posts">
<li class="post" data-post="####">
<p>content...</p>
<ul class="actions">
<li>
<a class="delete">delete</a>
</li>
</ul>
</li>
</ul>
Then in an .js file included at the bottom of the page:
$('.posts').on('click', '.actions .delete',
function() {
// which post should be deleted?
var $post = $(this).closest('.post');
// remove the DOM element
$post.remove();
// some sort of ajax operation
$.ajax({
// url, dataType, etc
data: { post_id: $post.data('id') }
});
});
This one handler will apply to all ".action .delete" elements in the main list, meaning that if you want to add a loader or pagination that uses ajax to modify or add times to the list, the one event handler will still work wonderfully.
How to make jquery to post values from a particular span to php, and then get values to a particular div? I'd like to have something like this: click span with class "more", that posts value from this li to php, and then via jquery to get value to div with id "test".
Here I have such a code which php gives me. I can add unique "id" for elements if it needs.
<li>
<span class="word">one word</span>
<span class="numb">1</span>
<span class="more">more</span>
<div id="test"></div>
</li>
<li>
<span class="word">another word</span>
<span class="numb">13</span>
<span class="more">more</span>
<div id="test"></div>
</li>
The problem is using this jquery I post only the first span containing class ".word" but instead of it I'd like to post only that spans where the span is. And get the values not to the first div with id "test" again but in the div where the span was clicked. My jquery-code is:
$('.more').live("click",function() {
var ID = $('.word').test();
var DI = $('.numb').text();
$.ajax({
type:"POST",
data: "value="+ ID + "&numb="+ DI,
cache: false,
url: "more.php",
success: function(msg){
$('#test').html(msg).fadeIn('slow');
}
});
});
By adding var ID = $(this).attr("id"); instead of var ID = $('.word').test(); to jquery and to php <span id="<?php echo $word; ?>" class="more">more</span> I can post the unique value of word. But what about the other values? And the main problem is to post to the next div where the span-button "more" is.
var ID = $('.word').test();
replace it with
var ID = $('.word').text();
Also please use .on jQuery function instead of .live as .live is deprecated.
Complete jQuery Code
$(function()
{
$('.more').on("click",function()
{
var clickedDiv = $(this);
var ID = clickedDiv.parent().find('.word').text();
var DI = clickedDiv.parent().find('.numb').text();
$.ajax(
{
type:"POST",
data: "value="+ ID + "&numb="+ DI,
cache: false,
url: "more.php",
success: function(msg)
{
clickedDiv.find('div[custom_id="test"]').html(msg).fadeIn('slow');
}
});
});
});
One more thing do not repeat same ID for DOM.
ID MUST BE UNIQUE.
For that i used <div custom_id = "test"></div>
Updated HTML
<li>
<span class="word">one word</span>
<span class="numb">1</span>
<span class="more">more</span>
<div custom_id = "test"></div>
</li>
<li>
<span class="word">another word</span>
<span class="numb">13</span>
<span class="more">more</span>
<div custom_id = "test"></div>
</li>
this can work out even without the ajax request if you are not doing any thing on the php side .
Check this code :
in the html make the div with class instead of id .
<li>
<span class="word">one word</span>
<span class="numb">1</span>
<span class="more">more</span>
<div class="test"></div>
</li>
<li>
<span class="word">another word</span>
<span class="numb">13</span>
<span class="more">more</span>
<div class="test"></div>
</li>
then
$('.more').click(function (){
var ID = $('.word').text();
var DI = $('.numb').text();
var Data = "value="+ ID + "&numb="+ DI;
$(this).closest('.test').html(Data); // use anyone of them
or
$(this).sibling('.test').html(Data); // use anyone of them
});
this will work perfectly . This is the updated code
i am building a mpe player for my production website, using the jplayer. the problem i have is i give my visitors the full song to listen to and for that reason i have to attempt to secure my music so heres the problem. jplayer requires a string that is a file location to the track that is to be played. i would like to make a ajax call and return that location. i tried to return a varible after a ajax call to be placed in the string location,but the code runs threw before the call is finish....
heres my code:
html markup:
<div id="player"></div>
<!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->
<div id="jp_container" class="demo-container">
<p>
<div class="pro"></div>
<span class="play-state"></span> : <span class="track-name">nothing</span><br />
of <span class="jp-duration"></span>, which is
<span class="jp-current-time"></span><br />
</p>
<ul class="toolbar ui-widget-header ui-corner-all">
<li><button class="jp-Prev" href="#">Prev</button></li>
<li><button class="jp-play" href="#">Play</button></li>
<li><button class="jp-pause" href="#">Pause</button></li>
<li><button class="jp-stop" href="#">Stop</button></li>
<li><button class="jp-Next" href="#">Next</button></li>
<li><button class="jp-mute" href="#">Mute</button></li>
<li><button class="jp-unmute" href="#">Unmute</button></li>
<li><div class="jp-volume-bar"></div></li>
</ul>
<ul class="playlist">
<li><span>Select a track :</span></li>
<? Beats(); ?>
</ul>
</div>
Jquery markup:
$("#jp_container .track").on("click",function(event) {
var x = $(this).attr('id');
var mp3File = // maybe a function can go here
my_jPlayer.jPlayer("setMedia", {
mp3: //this is where the string is expected
});
my_jPlayer.jPlayer("play");
my_trackName.text($(this).text());
$(this).blur();
return false;
});
// here is were i get the location in a function i workout already
function url(x){
var mp3;
$.ajax({
type: "POST",
url: "hosts/beats/beat.php",
data: "<?=md5('url')?>="+x+"&ok=<?=md5(rand(1,20))?>",
dataType: "html",
success:function(data){ var mp3 = data; }
});
return mp3;
}
first "A" in AJAX is for ayshnchronous...you can't return mp3 from your function because the ajax hasn't completed when you try returning it.
You need to do the setMedia within success callback of ajax
$("#jp_container .track").on("click", function(event) {
var x = $(this).attr('id');
$.ajax({
type: "POST",
url: "hosts/beats/beat.php",
data: "<?=md5('url')?>=" + x + "&ok=<?=md5(rand(1,20))?>",
dataType: "html",
success: function(data) {
my_jPlayer.jPlayer("setMedia", {
mp3: data
});
my_jPlayer.jPlayer("play");
my_trackName.text($(this).text());
$(this).blur();
}
});
return false;
});