X-Editable AJAX call not working after disabling / enabling - javascript

I recently stumbled across a problem with enabling / disabling X-Editable forms which I have (after days of trying) not been able to solve yet. Any help would be greatly appreciated.
I've created a fiddle containing the core of my problem:
http://jsfiddle.net/xBB5x/11749/
I have multiple labels which are editable;
The input should be submitted to a server using ajax;
Up to here everything works perfect. But then there is also a button who is basically just disabling and enabling (right after disabling) the x-editable functionality.
If you click this button before you edit the labels - the AJAX call isn't made.
Things you might find suspicious:
The selector: In my (simplified) example, the selector isn't actually needed. It's there because parts of our application are dynamically (re)loaded.
Why am i trying to do this? I have multiple labels which should all be editable - but only one at I time. So if the focus changes, I disable all of them and enable the one who just got the focus. Well, at least I try to do that...
Thanks for any help!
Here's the HTML:
<button type="button" id='thebutton'>Don't click Me!</button>
<div style="margin: 150px" id='navi'>
<h4>
<a href="#" class='title'>awesome 1</a>
</h4>
<h4>
<a href="#" class='title'>awesome 2</a>
</h4>
<h4>
<a href="#" class='title'>awesome 3</a>
</h4>
</div>
<div id='output'>
...
</div>
And here's the JS:
$('#navi').editable({
selector:'.title',
url: function(params) {
$.ajax({
url: '/echo/js/?js=SUBMITTED!',
complete: function(response) {
$('#output').html(response.responseText);
},
error: function() {
$('#output').html('Bummer: there was an error!');
},
});
},
send: 'always'
});
jQuery('body').on('click', '#thebutton', function () {
$('.title').editable('toggleDisabled');
$('.title').editable('toggleDisabled');
})
Edited - Some additional information:
We have a navigation (which is basically a "folder structure") which is created by the user. This means the user should be able to add additional navigation items and rename them if he wants. The user is only allowed to rename the active item. The content of each item gets dynamically loaded in the main panel.
The Navigation
So when the user selects an item, the following script is run (which disables x-editable functionality on all links and reactivites it on the new active one:
if (!$(this).hasClass("active")) {
// Load content to the main panel
DisplayOpRiskLeaf($(this).attr('id'));
// Change active navigation element
$('.oprisk-link').removeClass("active");
$(this).addClass("active");
$('.oprisk-leaves-panel').removeClass("active");
$(this).parents('.oprisk-leaves-panel').addClass("active");
// Change x-editable...
// disable all ($(this) is also getting disabled here)
$('.portfolio-title').editable('option', 'disabled', true);
// enable the active elemnt
$(this).editable('option', 'disabled', false);
}

Related

openCart() function for Shopify Buy Button JS does not work

I like to set up a Shopify shop via a simple HTML/CSS/JS/PHP website structure, where I include the highly customizable Shopify Buy Button JS library.
I followed the tutorial, and everything is set up correctly, as I can fetch and display all my products, which I have set up via the Shopify dashboard.
The default styles and iFrames of the Shopify UI elements (cart, drawer, buy-button, etc.) do not match the style and UX of my website, therefore I want to customize them via css. I deactivated the iFrames of most elements via the directive "iframe: false", and this works properly.
I also want to create a customized toggle button, that opens the cart (instead of the classic toggle button form Shopify, that is fixed to the middle of the right side of the screen).
The weird thing is, I'm not able to open the cart via ui.openCart(), as mentioned in the docs. I'm able to open the cart via ui.openCart() when I do it with a setTimout (3s), but I'm not able to do so via a jQuery click event. What am I doing wrong?
My code so far:
<script src="//sdks.shopifycdn.com/buy-button/1.0.0/buybutton.js"></script>
<script>
var client = ShopifyBuy.buildClient({
domain: 'domain.myshopify.com',
storefrontAccessToken: '2b3xxxxxxxxjh5', // previously apiKey, now deprecated
});
ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
id: 23xxxxxx56,
node: document.getElementById('my-product'),
options: {
"product": {
"iframe": false
},
toggle: {
"iframe": false
}
}
});
// -- this does not work --
$('#shoppingCartDropdownInvoker').click(function(){
ui.openCart();
});
// -- this does work --
setTimeout(function(){
ui.openCart();
}, 3000);
</script>
The code for #shoppingCartDropdownInvoker is:
<a id="shoppingCartDropdownInvoker" class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button">
<span class="fas fa-shopping-cart btn-icon__inner"></span>
</a>
You need to stop the event from bubbling up the chain.
Add event.stopPropagation as shown
$('#shoppingCartDropdownInvoker').click(function(event){
event.stopPropagation();
ui.openCart();
});

Bootstrap dropdown change icon class on page reload

I'm using the Bootstrap framework dropdown as a sort of select. See image bellow:
When the user clicks on each of the dropdown links, a js function is fired to set a cookie defining the user's city/region. -> This is working!
The same function adds a class to the icon of the clicked link within the dropdown to indicate the selected item/city (see the "green dot icon" in the image above). -> This works as soon as the link is clicked!
BUT
The function fails to keep the icon new css class after the page reloads, and I have no active item at all, only two grey dots. -> Fail!
Here's the html:
<a href="#" id="city_1'" class="define-city-1" data-city="city1" role="menuitem">
<i class="icon large-point grey-300" aria-hidden="true"></i>
Betim
</a>
function reload_city() {
setTimeout(function() {
// redirect to the current url + the query string built with the cookie value
window.location = window.location.pathname + '?city=' + jQuery.cookie('city');
}, 1000);
}
jQuery("#city_1").click(function(e){
e.preventDefault();
jQuery.cookie('city', jQuery(this).attr('data-city'));
if(jQuery(this).attr('data-city') == jQuery.cookie('city')){
jQuery(this).children('i').removeClass('grey-300');
jQuery(this).children('i').addClass('green-600');
}
reload_city();
e.stopPropagation();
});
I was wondering what causes this behavior on reload, and I'd really appreciate any inputs regarding this issue. Thanks in advance!

How to access hidden buttons and click them

I am trying to make a web page easier to use. At the moment, there is a drop down menu with a 'Delete' button. When I inspect, it looks like this:
<a title="" class="ajax-command" command="deletePost" href="#">Delete</a>
Is there any way I can execute this somehow? I am trying to create a new button that executes this command without the need of the dropdown. It is part of a set of buttons under this dropdown menu:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="item">
I have tried just replicating the click of the drop down selection, but I can't get it to work. Any help would be great!
jquery solution
$(".ajax-command[command='deletePost']").click()
Simulate the click event on the link, it doesn't matter that it's hidden. I'll demonstrate this here by writing script that clicks meta link in hidden stackoverflow dropdown to the left:
// Straight from MDN
var evt = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window
});
var cb = document.querySelectorAll("div.js-help-dialog li:nth-child(3) a.js-gps-track");
var canceled = !cb[0].dispatchEvent(evt);
This is what you should do. If you try to run their AJAX request you will find yourself re-inventing half of the whole application frontend.

External link with Bootstrap 3 Tabs using JQuery

I'm using tabs with Twitter Bootstrap 3 and want one of them to function as an external link that opens a new window. I removed the data-toggle="tab" and added some JQuery to accomplish this. The code below doesn't work and gives me the following error message, however if I add class="active" to the li element, it works perfectly (other than that tab having incorrect styling). Why is this the case? How can I alter my code so I don't need class="active" on the parent li?:
HTML:
<li>
<a href="https://www.google.com/" class="external-link" target="_blank">
<span class="nav-text-wrapper">Example Tab Name</span>
</a>
</li>
Javascript:
$('.external-link').click(function(){
window.open($(this).attr('href'));
});
EDIT:
I found the solution. I had the following JQuery code to allow for nested tabs, but apparently this conflicted with me using external links on tabs
var $mainTabs = $('.tab-menu a');
$mainTabs.click(function (e) {
e.preventDefault();
$(this).tab('show');
});
How about this?
$('a.external-link').on('show.bs.tab', function (e) {
e.preventDefault(); // prevents the default tab selection behavior
window.open($(this).attr('href'));
});
show.bs.tab is an event that gets raised for a tab right before it is shown. By cancelling it with e.preventDefault(), you're interrupting the tab's show() function early on and inserting your own behavior. If you don't stop the show() function early like this, it will try to select the tab panel referenced in your href in order to show it. The error you were getting was because the tab plugin was trying to find a DOM element with a selector like this: $('https://www.google.com').

Using javascript to close a foundation 4 dropdown button menu window

I am struggling with a JavaScript / jQuery issue. I am developing with foundation 4. I have a group of 5 buttons. Two of the buttons are dropdown buttons. When the dropdown button is pressed a window is presented with the dropdown options(links).
<a id="products" href="#" data-dropdown="prod" class="not_active_button_dropdown">Dropdown Button</a><br>
<ul id="prod" class="f-dropdown">
<li><a class="prod" href="index.php?info=basic">Basic</a></li>
<li><a class="prod" href="index.php?info=unifrost">Unifrost</a></li>
<li><a class="prod" href="index.php?info=teal">Teal-Sorb</a></li>
</ul>
Note: I created my own buttons classes with sass by mixin (class="not_active_button_dropdown").
Now I developed a script that loads the php response into a div #dropdownwrap, changes the buttons so it highlights the current button that has been pressed.
<script style="text/javascript">
$(document).on('click','a.not_active_button, a.prod', function(){
var href=$(this).attr('href');
var querystring=href.slice(href.indexOf('?')+1);
//get
$.get('index_jq.php', querystring, processResponse).error(errorResponse);
//reset all buttons to not active
//normal button
$('a.active_button').removeClass("active_button").addClass("not_active_button");
//dropdown button
$('a.active_button_dropdown').removeClass("active_button_dropdown").addClass("not_active_button_dropdown");
//if it is a normal button make it active
if ($(this).hasClass("not_active_button"))
{
$(this).addClass("active_button");
}
//if it is a dropdown button option link make it active
if ($(this).hasClass("prod"))
{
$('#products').removeClass("not_active_button_dropdown").addClass("active_button_dropdown");
//$('ul#prod.f-dropdown').close();
}
//slide down wrap
if ($('.dropdownwrap').is(":hidden")) {
$('.dropdownwrap').slideDown();
} else {
$('.dropdownwrap').slideToggle("slow");
$('.dropdownwrap').slideDown("slow");
}
return false; // stop the link
});
function processResponse(data) {
$('.dropdownwrap').html(data);
}
function errorResponse() {
var errorMsg = "Your request could not be processed right now.";
errorMsg += "Please try again.";
$('.dropdownwrap').html(errorMsg);
}
</script>
I am not that experienced with JavaScript or jQuery. Anyhow the problem is the following:
//$('ul#prod.f-dropdown').close();
which is commented out above. Everything works fine, my data loads and the dropdown button highlights. The problem is that the foundation 4 dropdown button window does not close after the script executes. This is because (I am guessing) I return false to stop the link from executing. So I tried to close the window using the above commented out line. When I uncomment the line, the window closes but the return false does not execute, that is the link is not disabled, it goes to the link, i. e. index.php?info=basic. So it seems when I add the close window statement, return false does not work. I tried adding the line after return false, but it does not close the dropdown menu.
The return false; not working is probably because there is some JavaScript error before it reaches that line. In this case, the error is calling .close() on something which does not have a close method. Instead, in order to call Foundation dropdown’s close method, you have to do something like the following:
$('#prod').foundation('dropdown', 'close', $('#prod'))
I guess there is a more elegant way to do this, but I found this to work. As a note, next time please post a minimal example on jsfiddle.net and link to it in your question. This makes reproducing your problem much easier.
You also need the data-dropdown-content attribute attached to the dropdown ul element.
Reference: https://github.com/zurb/foundation/issues/1831#issuecomment-15133817

Categories