First of all im new to jquery i have tried googling my problem , spent hours to fix this and i couldn't find any , so here i am .
In the below code i have fetched some information ( Songs details ) from database and loaded them to div via ajax .. Up to this point everything works just fine .
script using to load content via AJAX
$(document).ready(function() {
$("#results" ).load( "ajax/profile_ajax.php"); //load initial records
//executes code below when user click on pagination links
$("#results").on( "click", ".pagination a", function (e){
e.preventDefault();
$(".loading-div").show(); //show loading element
var page = $(this).attr("data-page"); //get page number from link
$("#results").load("ajax/profile_ajax.php",{"page":page}, function(){ //get content from PHP page
$(".loading-div").hide(); //once done, hide loading element
});
});
});
<div class="loading-div"><img src="../pagination/ajax-loader.gif" ></div>
<div id="results"></div><!-- content will be loaded here -->
Script im using to play audio
$(function () {
var curAudio;
$(".playback").click(function (e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (curAudio && song != curAudio && !curAudio.paused) {
curAudio.pause();
$(curAudio).prev().html('<i class="fa fa-play"></i> Play');
}
if (song.paused) {
song.play();
curAudio = song;
$(this).html('<i class="fa fa-pause"></i> Stop');
} else {
song.pause();
curAudio = undefined;
$(this).html('<i class="fa fa-play"></i> Play');
}
curPlaying = $(this).parent()[0].id;
});
});
I have above code to played the fetched music . Now the problem is None of the Buttons are functional even though my code worked fine before i use AJAX .
My Fecthed HTML is like this
<div id="4">
Track Name :- <b>Heros</b>
<br />By :- <a target="_blank" href="../members/profile.php?id=1">USER NAME</a>
<br />
<button class="playback btn btn-primary btn-sm hdnbtn"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/1/Heros.mp3">
Your browser does not support HTML5 audio.
</audio>
<a class="btn btn-sm btn-success hdnbtn" href="../members/downloader.php?fld=1&name=Heros.mp3" name="dwn"><i class="fa fa-download"></i> Download MP3</a>
<button class="sharer btn btn-sm btn-danger hdnbtn" type="button"><span class="fa fa-share-alt"></span> Share</button>
<a target="_blank" href="#" class="hide btn btn-sm btn-social btn-facebook socialhdn"><i class="fa fa-facebook"></i> Share on Facebook</a>
<a target="_blank" href="#" class="hide btn btn-sm btn-social btn-twitter socialhdn"><i class="fa fa-twitter"></i> Tweet this </a>
<a target="_blank" href="#" class="hide btn btn-sm btn-social btn-google-plus socialhdn"><i class="fa fa-google-plus"></i> Share on goole</a>
<br />
<i class="fa fa-minus"> Show Less</i>
<input type="hidden" value="Heros.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMS9IZXJvcy5tcDM=" name="link">
What i really need is to play the fetched content using the 2nd script (audio) i posted . i have no idea how to fix this . Tried hours of googling and various suggested methods. None of them worked for me . Please Point out what went wrong . i really appreciate it !
use below code to play audio . you also check Event delegation to attach event to dynamically created element. Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(function () {
var curAudio;
$(document).on('click',".playback",function (e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (curAudio && song != curAudio && !curAudio.paused) {
curAudio.pause();
$(curAudio).prev().html('<i class="fa fa-play"></i> Play');
}
if (song.paused) {
song.play();
curAudio = song;
$(this).html('<i class="fa fa-pause"></i> Stop');
} else {
song.pause();
curAudio = undefined;
$(this).html('<i class="fa fa-play"></i> Play');
}
curPlaying = $(this).parent()[0].id;
});
});
Related
hello i am trying to make popup Yes/No in js but is not working, this is my code:
one version is this:
if($admin==1)
print('<td> <BUTTON class="btn btn-outline-info" onclick="AlertPopUp()" ><i class="fa fa-trash" style="color: #000000;"></i> </BUTTON>');
function AlertPopUp(){
let AlertPopUp = confirm("Are you sure you want to delete this client?");
if(AlertPopUp){
window.open('delete.php?id='+$value);
}else{
return;
}
}
This is working but if i press cancel still deletes the value so i tried making the window.open but the url gets the value from php $value so i dont know how to pass it.
The other method i tried is this:
if($admin==1)
print('<td> <BUTTON class="btn btn-outline-info" onclick="AlertPopUp()" ><i class="fa fa-trash" style="color: #000000;"></i> </BUTTON>');
but this isnt working at all no popup appearing and the text isnt correct with ' ' so i tried " " but still nothing.
Try this:
if($admin==1)
print('<td><BUTTON class="btn btn-outline-info" onclick="AlertPopUp('.$value.')" ><i class="fa fa-trash" style="color: #000000;"></i> </BUTTON>');
function AlertPopUp(value){
let AlertPopUp = confirm("Are you sure you want to delete this client?");
if(AlertPopUp){
window.location.href='delete.php?id=' + value;
}else{
return;
}
You pass the php value as parameter and then fetch it from the function.
As far as I understand you are working inside a PHP page, so it would be like this:
first of all remove the <a> </a> and leave only the button because otherwise the link found in href will be opened.
<? php $ admin = 1; if ($ admin == 1) print ('<BUTTON class = "btn btn-outline-info" onclick = "AlertPopUp ()"> <i class = "fa-trash" style = "color: # 000000;" > </i> </BUTTON> '); ?>
// then we harp the JS script
<script>
function AlertPopUp(){
let AlertPopUp = confirm("Are you sure you want to delete this client?");
if(AlertPopUp){
window.open('delete.php?id=<?= $value ?>');
}else{
return;
}
}
when user click for a second time click do not work, user need to reload the page again to it works
<script>
$(document).ready(function() {
$("#like_post").click(function(e) {
// $("#like_post").on("click", "#like_post", function (e) {
e.preventDefault();
var post_info = $("#post_info :input").serialize();
$.post("backend/ajax/like_post.php", post_info).done(function(data) {
$("#like_post").html(data);
$("#like").load(location.href+" #like>*","");
}).fail(function() {
//alert("Error submitting forms!");
})
})
})
</script>
this is the backend return from db
if user liked it will show
<div id="like_post><a href="" id="l"><input type="hidden" value="unlike" name="like_button" /><i style="color:red" class="fa fa-heart fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['you_liked_it'].'"></i>
</a></div>
else it will show
<div id="like_post"> <a href="" id="l"><input type="hidden" value="like" name="like_button" /><i class="fa fa-heart-o fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['like_it'].'"></i>
</a></div>
the same validation is on frontend where is will change the hidden input to like, or unlike , my backend check is fine and returning all ok when I check the html response, but the problem is that jquery do not work when user like and unlike without reload the page, it just get the first click and after that user need to reload the page to it works.
I had a similar issue before and it was something with event delegation.
Use the comment line in your code without "#like_post":
$("#like_post").on("click", function (e) {
});
I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.
You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.
Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>
I have an anchor to open a modal:
<a href="#delete-{{ $id }}" class="btn btn-danger btn-xs btn-delete btn-fla details" data-toggle="modal" data-target="#remove_property_modal">
<i class="fa fa-trash"></i>
</a>
The problem is that the url is not changing from http://example.com into http://example.com/#delete-4 .
Change url hash on show.bs.modal event of bootstrap modal (docs)
$(document).ready(function () {
$('.modal').on('show.bs.modal', function (e) {
if (typeof (e.relatedTarget) != "undefined") {
window.location.hash = $(e.relatedTarget).attr('href');
}
});
});
I have following html.I have implemented following jquery code but my delete button clicking two times.Basically one edit and one delete.When I click on edit only one click happens but when I click on delete , first delete button trigers then edit.How can I avoid this.please check my code.
$(".tools").live("click", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
$(".tools").find('span').live("click", function(e){
e.preventDefault();
alert('clicked on delete');
var n = $("a", this).attr('id');
alert(n);
});
<div class="tools">
<a href="#" class="btn acebtn btn-minier btn-info" id="edit_'."$count".'">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
<span class="dlt">
<a href="#" class="btn acebtn btn-minier btn-info dlt" id="delete_'."$count".'">
<i class="icon-only ace-icon fa fa-share"></i>
delete
</a>
</span>
</div>
Your click event on the span (delete button) is bubbling up and triggering the click event on the .tools element, which is your edit button.
You can prevent the event from bubbling up using event.stopPropagation():
$(".tools").find('span').live("click",function(e){
e.preventDefault();
e.stopPropagation();
alert('clicked on delete');
});
Side note: .live() is deprecated as of jQuery 1.7, in favor of .on().
put $(".tools").unbind('click') before $(".tools").live("click",function(e){...
here it is:
$(".tools").unbind('click');
$(".tools").live("click",function(e){ ....
//your script here