I am trying to make a product configurator for a website. I'm using MEAN but at this point I just have a problem with AngularJS.
I proceed to explain my program. In the application you have three buttons for the first step of the configuration.
When you click one, AngularJS send back to the web the next three buttons (the values of this buttons depends on the first one you click). And here arrives the problem, this last buttons doesnt seems to work.
After clicking the first button I call the function $scope.getOption2 and it returns this:
htmlsString= '<div><button id="btnS2-1" ng-click= getOption3(1)>1</button></div>'+
'<div><button id="btnS2-2" ng-click= getOption3(2)>2</button></div>'+
'<div><button id="btnS2-3" ng-click= getOption3(3)>3</button></div>';
And this is the way I print it on screen:
$scope.option2 = $sce.trustAsHtml(pruebaHTML);
But the function $scope.getOption3 is never called when I click in one of those buttons.
I have simplified the code, but the essential part is here. I hope somebody can see my problem.
Appending elements like this is not the Angular way, and is frowned upon. Angular does not know of your new buttons, because you cannot manipulate your DOM in this way. You could $compile your elements again, but maybe you should just have the buttons in your template to begin with, you could show them with ngShow. Maybe better yet, see if there is some directive out there that can do what you want - or roll your own.
Look http://docs.angularjs.org/api/ng.$compile for details on $compile.
Related
So I have Create & an Update view with Django. Both use the same template for the form. (It doesn't seem to be a Django problem perse, but in case it turns out relevant...)
With the CreateView, I can easily click into a textarea widget and edit its value. With the UpdateView however, I seem to need to use a bunch of click before somehow I manage to edit the content of the area. I have compared the html/css in both cases & they are exactly the same.
Upon further inspection, it seems that the imported data contains tabs in some empty fields (hence why it only appends in the UpdateView). So the issue appears to be that when I click anywhere in the input/textarea, the tabs make it hard to actually focus/select the cell. That may be why random clicks (or double-clicks to select the tab?) appear to allow me to edit properly.
I'm unsure if the tabs originate from the source data somehow, or just got added along the way. Of course I'll probably figure out a way to clean out that data.
Is there a quick css/jquery fix for this? Some sort of $('input').on("click"...) handler I could use? Of course one option would be to clean up the source data. However if for whatever reason they've been living fine with those in their previous system, I might just leave it & go for a quick fix, should one exists.
Something like this:
<textarea name="descfr2" cols="40" rows="10" maxlength="60" id="id_descfr2"> </textarea>
https://codepen.io/logikonabstractions/pen/GRWPROO
You could use the focus() method from jquery (https://api.jquery.com/focus/).
Try to add the event on your cells so that the input inside became focused on click:
$('.cells').click(function(){
$(this).find('input').focus();
}
I would do something like that (if you can select all your cells with some class attributes)
Here is the website I am trying to access. I dont want the default tab (Day) though, I want to select the Season tab
https://www.eex.com/en/market-data/power/futures/uk-financial-futures#!/2017/05/23
The link appears to be exactly the same whichever tab is chose making differentiation impossible as far as I can tell.
Any help on this would be much appreciated, using whichever programming method and language is appropriate.
Kind Regards
Barry Walsh
The URL does not change since this is an ajax request, which you can see from MarketDataTableAController's getPageData function. You can read about them here https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
Ive inspected your html and you seem to be using angular. On further inpection you can see that the tabs have ng-click="setActiveTab(tab)" attribute on them. So whenever user clicks, this function gets executed. It is a matter of using this function with the appropriate tab object to get the content to change. You for example could put setActiveTab(tab) into your controller init method since setActiveTab() calls the forementioned getPageData() function to update the page.
Also the tab you are looking for is page.tabs[5] ($parent.page.tabs[5] if referring from TabController) since this is the tab with the label of season. Pass that to setActiveTab() and it should show you the season instead.
However this might not be a good solution since the tab array ordering might change. Then you would need to loop over all objects in page.tabs and see if tab.label === "Season" and pass that in the function instead or better yet use the $filter service provided by angular which would look more cleaner.
Your code source also seems to be minimized and its not very easy to read.
is there any ready widget like that?
If not, can I combine the dijit filteringSelect with dojox multichecked?
if not, is it easy to create one of my own or has any one started doing this? it's so necessary for my project.
There is no widget like that as far as I know (the multichecked widget itself is not even a standard widget, since it's a part from DojoX).
About your question of combining both. I don't think that will be easy, because the dijit/form/FilteringSelect does not use a <select> as widget and I don't think they're made to be ran together.
And the answer to your last question: it all depends on what functionality you exactly need. A dijit/form/FilteringSelect only allows you to select 1 value (it's a textbox with a dropdown in fact, and a textbox can only have 1 value).
If you want to create a variant with radio buttons, then that is possible, but it is not an easy job. The multichecked is working with a simple DOM node, however, the dijit/form/FilteringSelect offers a lot more things like autocomplete, stores, ... . To make your widget work, you need to listen to all these events and adapt yuur radio buttons to it.
I made a simple example that is only displaying radio buttons for each item in the filtering select, the code can be seen at JSFiddle. However, it does not react to changes, that's a part that you will have to implement.
I've already asked a similar question, but I really can't figure out how to connect these elements together. I'm still not very good with Handlers, and I guess my question is:
How can I access UI Widgets (and their children) while outside of the doGet() function?
My use case is this: I have a list of projects/IDs. I have all the data I want based on the ID that will populate the Project Details tab of this application. I created 'unique' Buttons for each of these Projects, and threw them into a Grid. Now, I want to generate the Project Details (detailPanel) Widgets specifically for each Button if/when it is clicked.
I have the Project ID attached to each Button (uniquely) through a Hidden, but I can't seem to attach the Project Details tab (detailPanel) to the Button so that, when clicked, I can set the values for the TextBox, DateBox, ListBox, etc. Widgets of the detailPanel.
I think I'm missing something obvious about this. I want to avoid attaching each child Widget of the detailPanel as a callbackElement of the Button at all costs. There are around 40 elements (I've lost count), and it seems really inefficient. I'm almost sure that if I can add one Widget as a callback element, that I get access to all child Widgets. But I tried, and that doesn't seem to be the case.
Here is the link to the public UiApp, which shows the UI. And the sister Script Project (uneditable).
You dont need to add callback elements that you will write to, callback elements are only for reading their data. If the detailspanel id is dynamic have a hidden that has its id stored inside and pass it to the handler. from your handler you getelementbyid and set its data.
Hello and thank you for reading.
I have an aspx form hosted in SharePoint 2010 that has some multiple select elements within a form. There are buttons to add and remove options from these select elements.
My problem is that I need to run a query based on the options within these multi select elements each time new options are added / removed from them. SharePoint is executing some server side code I don't have access to but here's my underlying problem.
If I hook into the buttons' onclick event, when my function is called the options have already been added to or removed from the select element. I need to capture the current option set of these elements, before the onclick function executes.
Is there another event I can tie into? Something like onbeforeclick on the buttons or optionsChanged on the multi select element? It doesn't look like any event will satisfy what I need to do here, but I'm hoping someone has faced a similar issue before.
Thanks,
Zachary Carter
The only solution I could come up with is to capture the present set of options each time an option is added or removed.
This solution is going to involve alot of array manipulation however, and if I can avoid that and simply tie into an event, before the onclick event of the button is called, that would be my ideal solution.
This might not be a great answer to your question, and if not, I apologize. However, I just ran into a very similar problem, albeit using Visual Basic. The solution wasn't elegant in my eyes, but I used VB's MouseUp event, which fires when the mouse button is released. On release (i.e., at the end of the previous action), I save all the information in the elements into an array, and then on the next click, before anything else happens, I can check against that array.
Edit: Gah, looks like you posted essentially that solution while I was typing. Sorry I didn't notice.