I want to create a dropdown accordion with specific behaviors :
Each time a accordion is shown, an AJAX request is performed to get all items information;
When deploying the dropdown, the first accordion must be shown;
Each time the user click on an accordion item, clicked item must be close, and the next one should be open;
By clicking on an item in the final accordion, the dropdown should be closed.
I've created the dropdown first of all. Please click on the Tachometer:
https://codepen.io/anon/pen/LzmjJe
Here is the javascript :
$(window).ready(function () {
// Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('show.bs.dropdown', function (event) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
var accordion = $(this).find($(this).data('accordion'));
accordion.find('.panel-collapse.in').collapse('hide')
});
// Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('shown.bs.dropdown', function (event) {
//Afficher le collapse commune
$("#collapseCommune").collapse('show');
});
$('.dropdown-accordion').on('hide.bs.dropdown', function () {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
// Prevent dropdown to be closed when we click on an accordion link
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
event.preventDefault();
event.stopPropagation();
$($(this).data('parent')).find('.panel-collapse.in').collapse('hide')
$($(this).attr('href')).collapse('show');
})
$(".dropdown-accordion #collapseCommune").on("show.bs.collapse", function () { // Occurs when the collapse commune is shown
var element = $(this)
$(".dropdown-accordion #collapseCommune > .panel-body").empty();
$.ajax({
url: "somewhere",
method: 'GET',
datatype: "json",
timeout: 5000,
beforeSend: function () {
//LOADING
element.append("<div class='loader'></div>")
},
success: function (res) {
//ENQUEUE CHART
console.log(res);
element.find(".loader").remove();
res.forEach(function (element) {
addItemToAccordion($(".dropdown-accordion #collapseCommune > .panel-body"), element, "accordion-commune");
})
},
error: function (err) {
//SHOW ERROR
//element.find(".loader").remove();
}
});
})
})
But i'm stuck for the rest, mainly because creating a component might be better, but i don't know how to begin.
Please suggest a module which work similar to mentioned above.
Related
Why do I get into the loop as many times as I pressed the button "tail_alertlog_button"?
A modal window opens on the button "tail_alertlog_button", I close it and so several times. Then I in this modal window click Submit, and it loops (#modal_NumberLinesAlertLog) as many times as I opened the window with the button "tail_alertlog_button".
$('.tail_alertlog_button').click(function () {
console.log('click tail_alertlog button');
var issure_name = $(this).closest("tr")
.find(".issuer")
.text();
$('.modal-title').text(issure_name);
$("#modal_NumberLinesAlertLog").on('click', '#submit', function () {
console.log('click submit button');
var NumberLinesAlertLog = document.getElementsByName("NumberLinesAlertLog")[0].value;
$("#loading").show();
console.log('show loading from modal_NumberLinesAlertLog');
console.log(issure_name);
console.log(NumberLinesAlertLog);
console.log('before ajax');
$.ajax({
type: 'POST',
async: true,
url: '/tail_alertlog',
cache: false,
data: {
'dbname': issure_name,
'NumberLines': NumberLinesAlertLog
},
success: function (data) {
console.log('success', data);
$("#loading").fadeOut(100);
$('#info_text').text(data);
$('#info_text').val("");
},
error: function () {
console.log('error', arguments);
}
});
console.log('after ajax');
});
});
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).find('#info_text').text("");
console.log(this + 'clear modal');
});
(index):160 click tail_alertlog button
(index):209 [object HTMLDivElement]clear modal
(index):160 click tail_alertlog button
(index):173 click submit button
(index):179 show loading from modal_NumberLinesAlertLog
(index):180 vm_4testing
(index):181 1
(index):182 before ajax
(index):203 after ajax
(index):173 click submit button
(index):179 show loading from modal_NumberLinesAlertLog
(index):180 vm_4testing
(index):181 1
(index):182 before ajax
(index):203 after ajax
(index):173 click submit button
(index):179 show loading from modal_NumberLinesAlertLog
(index):180 vm_4testing
(index):181 1
(index):182 before ajax
(index):203 after ajax
(index):209 [object HTMLDivElement]clear modal
3(index):193 success
I presume the modal is never removed from the DOM.
You're adding another click handler
$("#modal_NumberLinesAlertLog").on('click', '#submit', function () { ... }
each time
$('.tail_alertlog_button').click(function () { ... }
triggers.
I'm having an issue with expanding/collapsing a menu. On the menu, I am trying to do two things: First is to expand/collapse all. That is working just fine. For reference, my code is below:
$("#expandAll dt a").click(function () {
$("dd").slideToggle();
});
I am simply asking it to apply the slidetoggle function to all dd tags.
I also want to expand a single item on the list while the rest stays collapsed. However, when I do that, it will expand the entire list EXCEPT for the one I want, the exact opposite behavior I'm looking for. The code for the individual piece is below:
function excol() {
$("#expand dt a").click(function () {
$(this).parent().siblings("dd").slideToggle();
});
}
My 'this' statement should read "Toggle up/down a single element with the tag dd that are siblings of this element's parent." The problem is, it toggles every single dd except for the one I want to toggle.
Below is the relevant jquery code:
//Upon successful ajax call
success: function (data) {
excol();
$("#expandAll dt a").click(function () {
$("dd").slideToggle();
});
},
});
}
function excol() {
$("#expand dt a").click(function () {
$(this).parent().siblings("dd").slideToggle();
});
}
Here is the html code:
<div id="expandAll">
<dl>
<dt>
<a style="font-size: 12px; color: black;" href="#">Expand/Collapse All</a>
</dt>
</dl>
<div id="expand">
<div id="mhsPrograms">
<div id="MHS">
</div>
</div>
<br />
</div>
</div>
I think I'm pretty close to the solution but there is a conflict someplace that I'm not seeing. Any help would be appreciated.
Got it! The issue was the placement of the expand all function. I didn't put all of the code on here since I didn't think it was relevant...I now see the error of my ways and will post it all. Anyway, what needed to happen was for me to put the expand/collapse all function into my document ready function. So my code looks like this:
$(document).ready(function () {
//Call process function
processListItems(Url, Listname);
excolAll();
//*************************
//processListItems function
//*************************
});
exolAll() was the problem function. I still don't quite fully understand the operations but it now works.
The full code is below for reference:
$(document).ready(function () {
//Call process function
processListItems(Url, Listname);
excolAll();
//*************************
//processListItems function
//*************************
});
function processListItems(url, listname, complete, failure) {
// Executing our items via an ajax request
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items? $orderby=SortOrder",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
//Upon successful ajax call
success: function (data) {
ewiArray(data);
excol();
//excolAll();
joinAll();
},
});
}
//complete(data);// Returns JSON collection of the results
//Function for expanding/collapsing menu
function excol() {
$("#expand dt a").click(function () {
$(this).parent().siblings("dd").slideToggle();
});
}
//Function for expanding/collapsing all
function excolAll() {
$("#expandAll dt a").click(function () {
$("dd").slideToggle();
});
}
//Function for joining EWI program to its associated description
function joinAll() {
$("button").click(function () {
var fired_button = $(this).val();
sessionStorage.setItem('ewiNum', fired_button);
window.location.href = "Application.aspx";
return false;
});
}
I have a page in my project that contains several categories and each category has a Flexslider with images. Each category is displayed once and clicking another, the former is hidden and clicked appears, similar scheme with Tabs.
I need that when I click on another category, it destroys the function of Flexslider initialised in the former category and is executed in this category.
Here's what I've done so far, without success:
Function that starts Flexslider:
vm.sliderCol = function () {
setTimeout(function () {
$('.sliderCol').flexslider({
animation: "slide",
controlNav: false
})
}, 1000)
}
Function that enter the category button:
vm.clicou = function(){
$('.sliderCol').flexslider("destroy")
setTimeout(function () {
vm.sliderCol()
}, 1000)
}
Until then I tried to destroy the Flexslider do not know if there is some method to stop performing the function and start it, can anyone help?
With ng-click on each category playing the role, I managed to destroy the slider and start it again with the following function:
vm.clicou = function(){
$('.sliderCol').flexslider("destroy");
$('.sliderCol').removeData("flexslider");
setTimeout(function () {
vm.sliderCol();
}, 100);
}
I've defined a jQueryUI menu with id leftmenu and on its list elements, I have defined a function on clicking one item, as follows:
$('#leftmenu>li').click(function () {
var clickedId = this.id;
$.ajax({
type: "POST",
cache: false,
url: "/Session/Index/",
success: function (result) {
if (result.length > 0)
{
performListItemAction(clickedId);
}
else
{
window.location.href = '/Home/Index/'
}
}
});
});
This works fine, but now I want to change it so that instead of the click on the menu item, I want to capture focus and selection on that item in a more general way, such as using the keyboard. Currently, I can navigate through the menu using the up and down keys on the keyboard, but the inner code does not get called. I know this is because it is only supposed to happen on click, but the same thing happpened when I tried activate and focus in place of the click as well.
How can I get it to perform the same behavior as click in a more general way that captures selection and enter of the menu item?
Thank you.
This should be done in the select event. This way it catches both click or select from focused keyboard actions.
Example: https://jsfiddle.net/Twisty/v671x6ns/
jQuery
$(function() {
$('#leftmenu').menu({
select: function(e, ui) {
var selectId = ui.item.attr("id");
$.ajax({
type: "POST",
cache: false,
url: "/Session/Index/",
success: function(result) {
if (result.length > 0) {
performListItemAction(selectId);
} else {
window.location.href = '/Home/Index/'
}
}
});
console.log(e.type + " event, ID: " + selectId);
}
});
});
So I have a jquery click function assigned to an on/off toggle. Very simple script:
$('.on-off').on('click', function(e) {
e.preventDefault();
var $this = $(this);
$this.find('.slider').toggleClass('active');
});
We have two versions of this toggle. One toggles instantly when clicked and then we submit the value when clicking next(aka submit).
Our other one calls a jquery ajax function that toggles on success and upon success if it is a specific message code that is defined on the backend.
jQuery.ajax({
url: url,
type: 'POST',
dataType: 'json',
cache: false,
data: {'requestType': requestType},
success: function(message) {
if(message.STATUS=='2000'){
if(currentButtonClicked=='dashboardChargingButton'){
if($('#dashboardChargingButton').html()==startCharge)
$('#dashboardChargingButton').html(stopCharge);
else
$('#dashboardChargingButton').html(startCharge);
}
if(currentButtonClicked=='invokeChargingButton'){
$( "#invokeChargingButton .slider" ).toggleClass( 'active');
}
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + " - " + xhr.statusText);
}
});
}
As you can see I have to toggle the class again using the same code but with direct targeting.
The on off toggles of this type have an onclick inside the actual html calling the function that handles this ajax.
My goal is to have my first set of code the one that targets the element and toggles the class to do all of this, but dynamically to where we don't have to call a function everytime.
Conceptually what I thought is:
$('.on-off').on('click', function(e) {
e.preventDefault();
var $this = $(this);
if (!$this.attr('onclick')) {
$this.find('.slider').toggleClass('active');
} else {
var clickFunction = $this.attr('onclick');
call the clickFunction
if (clickfunction = true) {
$this.find('.slider').toggleClass('active');
}
}
});
What this would do is grab the onclick, but not call it until I specify. And inside the ajax request instead of toggling I would just return true.
This might not be the best method. I am just trying to ecapsulate everything to limit the amount of code as well as make all the dom changes for those elements in one spot for any potential defects.
Here is a link to a basic fiddle of the on/off toggle.
Fiddle
I hope I explained everything in good enough detail.