I am trying to create a dynamic Bootstrap dropdown button when the page load using this function
function loadPage(){
var fType = $('<div class="btn-group" style="padding: 5px; width: 100%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%">Category<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li>Action</li><li>Action 2</li></ul>');
$("#col1").append(fType);
}
But when I try to add onclick event on one of the options it doesn't work! This is my javascript
$('#act1').click(function(e) {
e.preventDefault();
alert('alerted');
});
Thanks.
Since content is new to DOM, you must init the click listener AFTER you load the button.
function loadPage() {
var fType = $('<div class="btn-group" style="padding: 5px; width: 100%;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%">Category<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li>Action</li><li>Action 2</li></ul>');
$("#col1").append(fType).promise().done(function () {
$('#act1').click(function (e) {
e.preventDefault();
alert('alerted');
});
});
}
Related
I want to change current value from Dropdown...but getting problem with fetching value from dropdown. on show page current status are showing and dropdown option are there for update status.after click on button i want to show new status.
<script>
// Update record
$(document).ready(function(){
$('#nextStatusBtn').click(function(e){
e.preventDefault();
var status_id = $(this).attr("data-id");
console.log('status_id');
$.ajax({
url: "{{route('admin.leads.updateStatus',$leads->id)}}",
type: 'post',
data: {
_token: "{{csrf_token()}}",
status_id: status_id
}
});
});
});
</script>
public function updateStatus(Request $request, Lead_status $lead_status)
{
$status_id = $request->status_id;
$lead_id = $request->lead_id;
var_dump($status_id);
die;
$lead_status = new Lead_status;
$lead_status->user_id = Auth::user()->id;
$lead_status->lead_id = $lead_id;
$lead_status->status_id = $status_id;
if($lead_status->save()){
return json_encode(['code'=>0,'message'=>'Lead Status Changed Successfully!','data'=>$lead_status]);
} else {
return json_encode(['code'=>100,'message'=>'Error updating lead status','data'=>'']);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="btn-group mr-3" role="group">
<div class="dropdown d-inline">
<button class="btn btn-{{$leads->status[0]->colour}} dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{$leads->status[0]->status}}
</button>
<div class="dropdown-menu" x-placement="bottom-start">
#foreach($statuses as $s)
<a class="dropdown-item bg-{{$s->colour}}" data-id="{{$s->id}}">{{$s->status}}</a>
#endforeach
</div>
</div>
<button class="btn btn-{{$leads->status[0]->colour}} d-inline" id="nextStatusBtn" type="button">btn</i></button>
</div>
I created a "more" button at the bottom left of my site to display a menu.
When you click on the button, the + becomes x
https://www.s1biose.com/groupe/recettes-et-astuces
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><i class="fas fa-id-card fa-lg"></i> Créer mon profil</li>
</ul>
</div>
How to add a class .overlay-is-navbar-collapse to the body of the page, when the menu is open and delete the class when the menu is closed ?
The following code does not work. If I click outside, the menu closes but the class remains on body.
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
I have tried the following code, but it does not work :
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
Use .one to attach a listener to the body right when the body's class gets added:
$('#dropdown-menu-action').on('click', () => {
$('body').addClass('overlay-is-navbar-collapse');
$('body').one('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});
});
why don't you try this,
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
$('.dialog-off-canvas-main-canvas').on('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});
Try this,
$('dropdown-menu-action').click(function(){
if($(body).hasClass('overlay-is-navbar-collapse')){
$('body').removeClass('overlay-is-navbar-collapse');
}
else{
$('body').addClass('overlay-is-navbar-collapse');
}
});
I want to add playlist to jplayer using checkbox and when i click the checkbox the url has to get added to jplayer playlist,i am having url when i click the checkbox i am getting particular url but i am unable to add to myplaylist please any one help me, when i add it show me undefined
//This array object
var playList = new Array();
//this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
self.Selected= function (item) {
var url = Voiceurl();
playList.push(url);
console.log(playList);
//this function i am calling to add to playlist
JplayerWithPlaylist(playList)
}
function JplayerWithPlaylist(playList) {
console.log(playList);
var cssSelector = {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
};
var options = {
swfPath: "./js",
supplied: "oga"
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playList, options);
for (i = 0; i < playList.length; i++) {
myPlaylist.add(playList[i])
};
};
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<div class="my-row btn-group jp-controls">
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-backward jp-previous" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-play jp-play" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-pause jp-pause" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-forward jp-next" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-stop jp-stop" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-off jp-mute" tabindex="1" title="mute"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-down jp-unmute" tabindex="1" title="unmute"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-up jp-volume-max" tabindex="1" title="max volume"></button>
</div>
</div>
<div class="jp-playlist">
<ul class="list-unstyled">
<li></li>
</ul>
</div>
</div>
Please read http://jplayer.org/latest/demo-02-jPlayerPlaylist/.
Why are you creating a new Playlist on each add? This is very expensive and will just overwrite your other one.
Create the playlist on page load and add to the playlist on checkbox ticked.
It seems like you push a url onto playlist and then add each url to the playlist which is incorrect.
The add() method for jPlayerPlaylist takes an object and not a string as it's parameter:
E.g.
myPlaylist.add({
title:"Your Face",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
});
Also item is unused in your function.
Try this:
$(function() {
var jPlayerPlaylistConfig = {
cssSelector: {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
},
options: {
swfPath: "./js",
supplied: "oga"
},
playlist: []
};
var myPlaylist = new jPlayerPlaylist(jPlayerPlaylistConfig.cssSelector, jPlayerPlaylistConfig.playList, jPlayerPlaylistConfig.options);
//this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
self.Selected = function () {
var url = Voiceurl();
console.log(url); //Make sure URL actually exists
myPlaylist.add({
mp3: url,
});
}
});
Ask me if you need more help.
I´m trying to create an event that when pussing a button in the .ejs file the color of some datetable column changes. The thing is that I´m not able to get into that function... I guess the code is not correct. Any clue?
Result.ejs
<div class="btn-group pull-right">
<button id="cancelButton" class="btn btn-sm btn-round btn-danger" style="margin-right:5px"><i class="ace-icon fa fa-stop"></i>Cancelar</button>
</div>
list_view.js
List.Layout = Marionette.LayoutView.extend({
template: "#resultadomonitorizacion-list-layout",
events: {
"submit #btn-group pull-right #cancelButton": "cancelarMonitorizacion"
},
ui: {
datatable: "#datatable",
inputSearch: ".dataTables_filter input"
},
cancelarMonitorizacion: function (e) {
console.log("hello")
},
DONE!!! It was a marionette and jquery selectors problem
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
events: {
"click #cancelButton": "cancelarMonitorizacion"
},
I am trying to trigger an event after a buton group is closed (to catch mutiple changes inside that button group).
<div class="btn-group">
<span id="experiment-filter-group" class="btn-group pull-right open">
<button type="button" style="width:auto" class="dropdown-toggle btn btn-small" data-toggle="dropdown">Click Here <b class="caret"></b></button>
<ul class="dropdown-menu" style="max-height: 400px; overflow-y: auto; overflow-x: hidden;">
<li class="active"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="0"> X Option</label></li>
<li><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="1"> Y Option </label></li>
</ul>
</span>
</div>
<script>
$('.btn-group').on("closed", function(e){
console.log("closed");
});
</script>
this is not working..
There is no twitter bootstrap dropdown on close event, but you can do something like this:
$(document).ready(function () {
$('#btn-group').data('open', false);
$('#dropdown-button').click(function () {
if ($('#btn-group').data('open')) {
$('#btn-group').data('open', false);
onCloseEvent();
} else $('#btn-group').data('open', true);
});
$(document).click(function () {
if ($('#btn-group').data('open')) {
$('#btn-group').data('open', false);
onCloseEvent();
}
});
function onCloseEvent() {
alert("close");
}
});
http://jsfiddle.net/Barbarah/QYvJh/3/