I'm trying to add a button to a GeoExt application. Ideally I want the button workflow to be:
User clicks button. Button is now "Toggled" to on.
User clicks somewhere on the map.
(This always works) Function behind button is called.
Button toggles off.
I have this as my options code:
/* Options to be passed to my create function. */
options: {
tooltip: 'Google StreetView',
iconCls: "icon-streetview",
enableToggle: false,
pressed: false,
toggleGroup: "toolGroup",
id: "streetview_tool"
}
I can add the button to the toolbar, but the toggle doesn't work properly. I've tried just about every combination of parameters I can think of.
a) Using the above, I get a console error from GeoExt:
TypeError: this.control is undefined. Steps 1 to 3 (above) work this way.
b) If I remove the toggleGroup, I don't get the error (unless enableToggle has been set to true), however the button then never toggles in the first place (steps 2 & 3 are the only ones that happen using this method).
There's also a second (Bigger!) problem - it doesn't matter whether the user has toggled the button, every time I click on the map that functionality is triggered!
So my question - how do I get this button-toggle workflow to work?
Thanks.
I don't know enough specifics about geoext, but if I understand the issue correctly you can't untoggle the button when you click on the map. I've setup an example which I hope is somewhat similar enough to your issue: https://fiddle.sencha.com/#fiddle/3ms
The solution simply calls
Ext.getCmp('streetview_tool').toggle(false)
when the body of a panel is clicked. Note that this example uses 3.4. Let me know whether this helps or if there's more to the picture I'm missing.
Related
On this page
https://www.s1biose.com/produit/savon-artisanal-bio-la-cannelle
I want to disable the "Add to Cart" button. So I added the following code in a JS file of my theme :
(function ($) {
$('.commerce-order-item-add-to-cart-form .btn').prop("disabled", true);
})(window.jQuery);
It works, but there is a problem.
When I change the variation of the product, the button activates. Why ?
I want him to be disabled.
In this screenshot, the button is disabled
In this screenshot, the button should remain disabled. But it does not work
Changing the dropdown fires a network event. Your DOM is updated on the success of this event. I suggest you trace the functions which are responsible for re-rendering this component within your template and make the appropriate changes.
const disableBtn = () =>
$('.commerce-order-item-add-to-cart-form .btn').prop("disabled", true);
$(document).ajaxSuccess(disableBtn);
The above code snippet is a simple and very naive solution. It works, but I don't recommend you use it, but learn from it. I.e. I would NEVER do this in production.
Without access to your source, I can't help you further.
I am new to angular 4. I have multiple tabs in one page, when I switch from one tab to another or to other nav bar, my requirement is to provide a popup dialog which asked "are you sure to move ?" and when I pressed ok , it should go to desired tab/nav (last clicked url) otherwise it should remain at the same page.
I have used CanDeactivateGuard , to popup the dialog before i leave the tab/switch to other nav bar { path: 'exception/:id', component: LpExceptionComponent , canDeactivate: [CanDeactivateGuard]}
Now I am not sure how to redirect to desired tab on pressing ok button?
how I will get the last clicked url here?
You probably don't even need to know the url. You can just return a promise from the canDeactivate function, and once the user clicks ok, you resolve the promise to true and the transition continues automatically. Observables are also supported if you prefer that over promises.
But if you do need to know the state that the user is trying to go to, then it's provided as the fourth parameter to the canDeactivate function (the first three parameters being component, currentRoute, and currentState)
See documentation here: https://angular.io/api/router/CanDeactivate
I am having problem in overriding the pagination code given by grid. What I need to do is kind of hack the pagination given by my grid.
We are having a lot of records. So, what we are doing we are loading records to a threshold limit.
So, lets assume the threshold limit is 50 and page size is 10 so there will be 5 pages. So, when user comes to 5th page next button provided by the grid will be disabled.
So, what we need to do we need to make it enable and if user clicks on it I need make ajax call and load another 50 records(threshold limit) in the grid.
After that I need to disable this event so that next time user clicks it should not do the make ajax call and it should work like previously (by going from 1st page to 2nd page and so on)
All the above things mentioned I am able to do. But here problem comes when user goes to 5th page and go back to some other page let say 3 without clicking next button. Now, after going to 3rd page
when user clicks on the next page button it is making ajax call as I have make the button enable when user comes to 5th page and provided a click event to it.
So even if I provide a condition to run only on when grid current page is 5 then also it is running because after going to 5th page I will make button enable and bind and event. So, as I provided the event it will run without even specifying the condition.
How do I make the click event work as default and only when the user is at 5 it will make the ajax call.
This is my code -
///grid Current page will tell us which page we are in the grid.
if(gridCurrentPage==5){
query(".dojoxGridWardButton").forEach(function(element) {
query(".dojoxGridnextPageBtnDisable").replaceClass("dojoxGridnextPageBtn", "dojoxGridnextPageBtnDisable");
query(".dojoxGridlastPageBtnDisable").replaceClass("dojoxGridlastPageBtn", "dojoxGridlastPageBtnDisable");
});
callNextButton(gridCurrentPage)
}
And this is the function.
function callNextButton(gridCurrentPage) {
var target = dojo.query(".dojoxGridnextPageBtn");
var signal = on(target, "click", function(event){ ///Adding click event
if (gridCurrentPage ==5 ) {
var deferred = new dojo.Deferred();
setTimeout(function() {
deferred.callback({
called: true
})
}, 2000);
if (checking some conditions) {
////////doing Ajax call
deferred.then(function() {
//calling a callback
})
},
error: function(e) {}
};
})
signal.remove(); //Removing click event
}
Note : My grid is enhanced grid which is part of dojo toolkit. But probably its a design issue so, any comments/advices are welcome.
I really need an advice here. Please anyone can find the problem where it is it will be reqlly helpful.
The setup I have makes an ajax request to a php script to grab some images from the server and display them. During the ajax request, I enable some additional controls. I have two modes for the images, one that brings up a larger version of the image, and one that lets me sort them.
I implemented a checkbox so that I can swap between the two modes. Whenever I click search and invoke the ajax request, the images correspond to the mode that the checkbox had when they were created.
What I want to do is make it so clicking the checkbox allows me to swap the mode without having to search again.
$.ajax({
url: './search.php',
type: 'POST',
success: function(data) {
$("#images").html(data);
enableControls();
},
This is the snippet of the ajax request where I receive the images, add them to my page, and enable the controls.
$('#sortable').change(function() {
enableControls();
});
This is the snippet where I allow my checkbox to change the state of the controls.
function enableControls() {
$('.img-responsive').off();
if($('#sortable').is(":checked")) {
$('.img-responsive').on('dblclick', sortableDoubleClick);
}
else {
$('.img-responsive').on('dblclick', imgDoubleClick);
}
}
This is a snippet where I enable the double click behaviour. Double clicking while it's in sort mode will make that image go to the front (top left) of the rows/columns of images. Double clicking while it's in the non-sort mode will bring up a larger version of the image.
The img-responsive class is a class all the images returned from the search have, and is how I reference them as a group.
Unfortunately, the line
$('.img-responsive').off();
does not work the way I want it to. I want it to completely disable existing controls so I can set whatever new ones I want. It does not do that. What happens right now is that I get both double click controls available.
So let's say I search in non-sort mode and then click my checkbox to put it in sort mode. When I double click on an image, it opens up the larger version of it AND moves it to the top left.
How can I fix this? I assume the way I am invoking .off() is incorrect, but as far as I understand, .off() should remove all the event handlers for the selector, so why is it the case that I still retain the original event handler?
I ended up solving my problem. In the portion of the code:
$('.img-responsive').on('dblclick', imgDoubleClick);
There was some additional code for touch controls:
$('.img-responsive').each(doubletapCover);
For some reason, even though that code path never occurred, it seemed to invoke that code. I made a change so it's not ever called and it fixes my problem.
Thanks to everyone who tried to help.
I'm using the following component:
http://www.jqueryscript.net/menu/Lightweight-Drilldown-Menu-Plugin-with-jQuery-Bootstrap.html
I want to adjust the some built-in functionality:
when an item from the lowest level is clicked,
the menu closes.
when opened again, the menu goes back to the last level that was accessed, as in the level where the last item was clicked before the menu closes.
I would like to prevent that the menu closes # event 1. & I would like to jump back to the 'main menu' as in the highest level of the menu.
I know i have to look in the 'bootstrap-drilldown-select.js' file, but could anyone perhaps shine some light on how this code exactly works and where i should put my adjustments?
Thanks in advance!!
Edit 1
For the redirect to main menu (2.): I found out that the difference between a list item which allows a drilldown to a deeper level, has the class 'hasChild' added to it. #'bootstrap-drilldown-select.js' line 107-108.
I think that there is an on-click event (somewhere) that checks whether or not the clicked item has a 'hasChild' class. If not, the event defined by 'onSelected' is fired. The only thing I'm still looking for is, where this event is. Any suggestions/help?
Because I couldn't find this event, I thought that I might call the initialize function when the 'onSelected' event is fired. Kinda like line 26-43, or more precies line 35 # 'bootstrap-drilldown-select.js'. However, I'm not able to reach the function 'makeDropdown' from my external js-file.
Any comments/advice on this note?
I found that redirect to main menu after selected one item, just call the function makeDropdown after this line: defaults.onSelected(event);
if (!data) {
defaults.onSelected(event);
makeDropdown(element, null, '', true); //this returns to main menu
element.dropdown('toggle');
isVisible = false;
return false;
}
The third variable in this function is the path, so if this is empty, it returns to the original data, like this line when the element is created:
/* create a dropdown object */
makeDropdown(element, null, '', false);
I hope that helps you in your investigation.