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');
}
});
});
Related
I am trying to trigger a click on the following element, and then get the innertext of it.
<a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">Show result</a>
After "onClick" has been triggered, it should look like this:
<a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">1 : 2</a>
This is the code I've tried:
$winner = $this->data->find('.btn-sm', 0)->onclick->innertext;
I am trying to get the 1 : 2 from "innertext".
It is not working, and I don't know if it even does. But any help is appreciated.
You can try it using textContent() and jQuery on event handler:
<?php
//php code
?>
<script>
$('.btn-sm').on('click', function() {
var txt = $(this).textContent();
})
</script>
I created an ajax reference in javasctript and I expect the link to be realized, it has appealed to the ajax_[modulename].php file in the background, but the url address is ignored and the main address is inserted into the module. I do not know what is causing this. Please help.
I created the javascript code in the file .... tpl as below. Then I added the ajax_[modulename].php file which I placed in the main module directory
The expected effect is to display messages that confirm this part is working correctly.
Unfortunately, this is not done in the background and the reference that is returned is the main link of the module.
The site is reloaded and the link "index.php? Controller = AdminModules & token = 3213789e146f56adaa445b96bb79956f & configure = dpeasye & module_name = dpeasy & List" is executed.
File - display_list.tpl
<td class="text-right">
<div class="btn-group-action pull-right">
<a class="btn btn-outline-info" href=".../index.php?controller=AdminModules&token=3213789e146f56adaa445b96bb79956f&configure=dpeasye&module_name=dpeasye&id_field=47&ListDic=mg">
<i class="icon-layer"></i>
Display Sub
</a>
<a class="btn btn-outline-info" href=".../index.php?controller=AdminModules&token=3213789e146f56adaa445b96bb79956f&configure=dpeasye&module_name=dpeasye&id_field=47&UpdateDic=mg">
<i class="icon-edit"></i>
Edytuj
</a>
<a class="btn btn-outline-info" href=".../index.php?controller=AdminModules&token=3213789e146f56adaa445b96bb79956f&configure=dpeasye&module_name=dpeasye&id_field=47&DeleteDic=mg">
<i class="icon-trash"></i>
Delete
</a>
<a id="active-47" class="btn btn-success ajax-status" href=" " title="Enabled">
<i class="icon-check"></i>
Enabled
</a>
</div>
</td>
<td class="text-right">
<div class="btn-group-action pull-right">
<a class="btn btn-outline-info" href=".../index.php?controller=AdminModules&token=3213789e146f56adaa445b96bb79956f&configure=dpeasye&module_name=dpeasye&id_field=65&ListDic=tt">
<i class="icon-layer"></i>
Display Sub
</a>
<a class="btn btn-outline-info" href=".../index.php?controller=AdminModules&token=3213789e146f56adaa445b96bb79956f&configure=dpeasye&module_name=dpeasye&id_field=65&UpdateDic=tt">
<i class="icon-edit"></i>
Edytuj
</a>
<a class="btn btn-outline-info" href=".../index.php?controller=AdminModules&token=3213789e146f56adaa445b96bb79956f&configure=dpeasye&module_name=dpeasye&id_field=65&DeleteDic=tt">
<i class="icon-trash"></i>
Delete
</a>
<a id="active-65" class="btn btn-success ajax-status" href=" " title="Enabled">
<i class="icon-check"></i>
Enabled
</a>
</div>
</td>
File - display_list.tpl
<script type="text/javascript">
$('a.ajax-status').click(function() {
var MainUrl = "";
var abtn = $(this);
var aidall = $(this).attr('id');
var aid = $(this).attr('id').replace('active-', '');
var aclass = $(this).attr('class').split(' ');
var atitle = $(this).attr('title');
var atext = $(this).text();
atext = atext.replace('\n', '');
var iclass = $(this).children().attr('class');
var data = '&id_field=' + aid ;
$.ajax({
url: baseDir + 'modules/dpeasye/ajax_dpeasye.php?action=changeStatus',
type: 'POST',
data: data,
cache: false,
dataType: "JSON",
success: function(aid){
if (aclass.class[2] == 'btn-danger'){
abtn.fadeOut(700);
atext.replace('Enabled','Disabled');
aclass[2].replace('btn-success','btn-danger');
atitle.replace('Enabled','Disabled');
iclass.replace('icon-check','icon-remove');
abtn.fadeIn(700);
}
if (aclass.class[2] == 'btn-danger'){
abtn.fadeOut(700);
atext.replace('Disabled','Enabled');
aclass[2].replace('btn-danger','btn-success');
atitle.replace('Disabled','Enabled');
iclass.replace('icon-remove','icon-check');
abtn.fadeIn(700);
}
showSuccessMessage(update_success_msg);
},
failure:function(aid){
console.log('test ok');
}
});
});
</script>
File - ajax_dpeasye.php
include_once('../../config/config.inc.php');
include_once('../../init.php');
include_once('dpeasye.php');
if (isset($_GET['action'])) {
switch ($_GET['action']) {
case 'changeStatus':
$this->displayConfirmation($this->trans('Test passed'));
break;
case 'sort':
break;
}
} else {
die('no action passed');
}
Why does the main link appear if there is no link in the link: "<a id="active-65" class="btn btn-success ajax-status" href="" title="Enabled"> <i class = "icon -check "> </ i> Enabled </a>"?
What is the reason that the javascript code is not being executed?
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;
});
});
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
I'm making the twitter follow button , when you click on it it turns to following, when hover again it turns to unfollow , when click on unfollow , it becomes follow and here even if the mouse goes out nothing happens , my problem is something happens here .. (last step)
HTML:
<div class="col-xs-2 menu followBlock">
<button type="button" class="btn btn-primary btn-lg" data-follow="follow">
<span class="glyphicon glyphicon-plus"></span> Follow
</button>
</div>
JS:
$(".followBlock").on('click', "button[data-follow=follow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-ok'></span> Following").removeClass('btn-primary').addClass('btn-success');
$("button[data-follow=follow]").attr("data-follow", "unfollow");
$btn.hover(function(e) {
$(this).html("<span class='glyphicon glyphicon-minus'></span> Unfollow").removeClass('btn-success').addClass('btn-danger');
}, function(e) {
$(this).html("<span class='glyphicon glyphicon-ok'></span> Following").removeClass('btn-danger').addClass('btn-success');
})
});
$(".followBlock").on('click', "button[data-follow=unfollow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-plus'></span> Follow").removeClass('btn-danger').addClass('btn-primary');
});
The jsfiddle that explains my problem:
jsfiddle.net/TQ5nn/1/
Help please
try this
$(".followBlock").on('click', "button[data-follow=unfollow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-plus'></span> Follow").removeClass('btn-danger').addClass('btn-primary');
$btn.unbind('mouseenter mouseleave');
$btn.attr('data-follow', 'follow');
});
jsfiddle