I have a small web-app that accepts input from a human to create search params. I'm using ng-model-options to debounce the ng-change function to execute the search.
I have small arrows next to the column names on the table that lets users sort (there are three icons - up-down, up, and down for the sort_field and sort_order displayed using ng-class) ; I would like to register a change on those and execute a search after a small delay using debounce. The problem is I'm not sure how use ng-model to bind the particular param to those icons. I don't want someone hammering on the sort icons and crashing the server or their browser.
What I would rather do is have one place on the page that says to watch the search_param object and fire a search 500 milliseconds after whenever it has changed. This way any of the input fields or sort selections would be called when a user is done editing them which triggers a function to send those params to the endpoint.
What is the strategy in AngularJS to do this? Right now all input fields bind a field in the search_param object and have ng-model-options to debounce on change. This is a lot of repeated code.
I recently answered someone regarding Tables and the amount of effort and work you have to put in to get very basic functionality (sorting,searching,pagination).
Why re-invent the wheel if there is a perfectly great library for you to use:
Angular-datatables
I posted a complete solution here for you to use pulling data from a json source: Ng-repeat trying to create a counter index
In your case you would need to go through the Server side processing documentation on Datatable's site to correctly format the data: https://datatables.net/manual/server-side
Related
I am working on order automation for Trading View.
Although I have been able to make some progress, changing the price for limit orders (as well as the quantity, any number) has been a challenge. I am able to change the value on the input but it doesn't really get updated in the app model (hence the buy button never reflects the change).
Any help will be highly appreciated.
Best
Sometimes the view of the value is not bidirectional connected to the hidden input field. Seems like the trading app is using some reactive framework, they usually integrate some UI components library, and those libraries hide the real input field in behind the beautiful mask of the ux oriented view on the front side.
Here you have 2 options
Try to set the value of hidden input field in behind the component and try to send the request to see if the new value is fetched, no matter if its visible on front or no
I think more user friendly option, to trigger the events on the HTML elements, this will require more research from your side to learn how to trigger events and check the results of those events step by steps. If you already know it then it will be fast.
For Example:
// Let's say pure js
// Keep in mind, id of element, not a hidden input field.
const dropdown = document.getElementById('idOfHTMLElement');
dropdown.click(); // After click the options of the dropdown should appear
const options = Array.from(document.getElementsByClassName('classNameOfDropDownOption'));
const desiredOption = options.find((option) => option.someConditionLikePriceOrSmthElse: boolean);
desiredOption.click();
// Something like this, not accurate code, please test and correct if you will use this
Hi awesome developers,
Maybe someone can help or put me in the right direction. I want to create a settings page with a few yes/no options.
These settings need to enable or disable form events from different entities. First I was thinking about creating a new entity named foo_Settings with a few fields and yes/no options to trigger on change events. These events will then add or remove events from another entity.
After doing some research, I couldn't find any examples or cases or any info if this could be done through webservices.
I hope someone can help :)
Greets,
Yes, it is a common design pattern in CRM to have a settings/configuration-entity for storing settings such as this.
You can decide to either have one settings-record per organization, or maybe one settings-record per business unit if that suits your needs better. In this way you can have different configurations depending on the need of each business unit.
After creating the settings record and adding some boolean fields, you would write javascript that runs OnLoad of specific entities. This code would fetch the relevant settings-record, read the value of the relevant boolean-field and add a change listener depending on the value of the boolean by calling addOnChange().
After thinking about the settingspage and ways/solutions to create such functionality, there also was something that was itchy..
By creating a settings page and checking in the onload function of each entity with a fetch (odata call), this is not the most fastest or cleanest way. What if thousands of people are using a entity.. This will resulting that thousands of people will fetch.
So my solution will be:
Creating a settingspage (entity).. Onchange event of a setting will fire a odata call to set a record (true or false) on a hidden field in that entity..
In the onload of the entity I will check the value of that hidden field and do logic. This way I will prevent that there will be an Odata call every time the page loads..
Are there any other solutions?
Versions
Mac OS: OSX 10.10.2
Ruby: 2.2.1p85
Rails: 4.2.0
Bootstrap-SASS: 3.3.4 #For Web UI
Bootstrap-Switch-Rails: 3.0.0 #For Toggles
Context
I am building a site where someone can create a packing event to make bags for the homeless. I am using Ruby on Rails to create this webapp, Bootstrap to design the user interface, and am open to using JQuery, javaScript, HTML, and CSS to get the desired functionality. Though my working knowledge of the first two languages is minimal.
In the user's event creation and edit pages I have a list of items that a person can add to their bags. This list is in a table view as seen through the link below.
Dropbox link
Desired Functionality
I am wanting to do 2 things.
When the user enters the number of bags they plan on packing, I want to be able to update the column "Number Needed" for each item. So, for instance in the example scenario shown in the image above, the "Number Needed" for "Raise Money" would be "$6,500", for "Volunteers" would not be added, for "Water" would be "1000" and for "Food" would be "1000".
I want the user to be able to toggle whether to include an item on their event page. So, in the example picture, the user wants to show on their event page that they are raising money for their event, and requesting donations for water and food; but they do not need volunteers to pack the bags. In this scenario, I would like to disable the form fields of "Number Needed", "Currently Have" and "Number Remaining to Get" for the row "Volunteers".
Questions
For the first desired functionality specified above: Should I just have the table on a separate page maybe so that the fields are populated before the table is actually shown? Or, my preferred ability, do I need to put a button after the "Number of Bags" field that when clicked updates the table? And how would I do that?
For the second desired functionality specified above: Is there a way to have this done dynamically when the user toggles the "Include" column to "Yes" or "No"? How would I disable the desired form fields dynamically once a user toggles that row to "No"?
Let me know if you need any more information. And thank you in advance for your expertise.
First things first, I would put this in the comment, but I don't have enough reputation to do that yet.
Ok so there's a few ways to solve your problem. The first and ugly solution would be to rerender the page everytime something gets updated. You really shouldn't do it that way because that required the user to hit a button to submit the form and the controller would render the same page again with updated results.
Instead, you want to use jQuery to add event listeners to your form fields and the button mentioned in the second functionality. On those event listeners, put some handlers to update the desired field. It's hard to direct you on the jQuery if I don't know your HTML structure. As Santiago mentioned, there are many tutorials out on the internet for putting event listeners and creating the proper handlers.
Additionally, you should consider AJAX to asynchronously communicate with your controller to keep the front-end (what the users see on the browser) and the back-end (data stored in the database) in sync. Again, plenty of guides out there on the internet for this, but definitely look into the Rails functionality of "remote: true" on your form to make the set up of the AJAX process easier.
I want to add multiple custom fields to the lightbox in dhtmlScheduler. I realize that this is a dup of a prior question but that answer is incomplete/incorrect.
My application correctly stores and recalls data from a MySQL database using dhtmlxDataProcessor on the client and dhtmlxConnector via PHP on the server side. I have carefully read, re-read, and parsed documentation on Custom "details" form. I've worked with the code in the 05_custom_editor.html sample.
The problem is that those examples do not work - they silently fail to store the second field, "Details", in the Description section. This is not surprising since nowhere is the field mapped to a database column.
What changes are needed so the "Details" field of the example form stored in the database and recalled with the event?
What changes are needed to support read-only data in the Details field that is populate based on the "Text" field? What I'm thinking of is a name that has an address associated with it.
How to invoke a custom windows with a form from the lightbox to populate the address?
I would prefer to be able to do this by extending the default lightbox, but that is not a requirement.
Any guidance is appreciated.
There are 3 required fields when using dhtmlScheduler. They are the first 3 in your PHP connector:
$scheduler->render_table("my_table","id","start_date,end_date,name,details,....
Your connector may use any column names as long as the order is preserved. But because it's required and used all over the place the dhtmlScheduler must refer to the name of the event. It is called "text".
The lightbox section maps description on to "text". I think that there is no
scheduler.locale.labels.section_description
for the same reason.
1) Update the PHP connector to pull in the required fields.
2) You can use sched.formSection('myfield') to get components from inside the lightbox, then you can add javascript to blur on focus.
3) Normal javascript
You can use one of the custom events alter any form items before you display the lightbox.
My dhtmlScheduler seems very vocal when it fails! What does the console say? Have you stepped through to see where it's failing?
I'd like to provide my users a way to navigate a taxonomy by successively drill down ono drop down lists.
A simple example would be something like ebay's categories. Say you pick the category "Clothing", the next drop down list would display all the sub-categories under Clothing such as "Shorts", "Pants", "Coats" etc. And this can go on arbitrarily deep.
I looked at the jQuery plug-in mcDropdown. The interface looks really nice. However it seems to require the entire taxonomy to be passed to the plug-in in one go. Other plug-ins I looked at also have this limitation.
I need somethinig that retrieves & displays data dynamically. So after the user picks "Clothing", the UI sends that selection back to the server, which then sends back a list of sub-categories of "Clothing", so on and so forth.
Is there any jQuery plug-in that does that? Or what would it take to implement that in plain jQuery?
I'd prefer jQuery, but other frameworks would be fine too.
I do not know of some plugin for this so here is a breakdown of the process..
Should not take long to implement.. (i do not attempt it as it relies on your server-side technology and preference between html/xml/json for the ajax call returns..)
jquery Ajax call to bring 1st level data
create dropdown with jquery and add fetched data to it
List item
use jquery .data() method on the new dropdown a autoincrementing counter (will be used to remove all later instances when you change something in a dropdown that is not the last)
bind a handler to the .change() event of the new dropdown that will repeat the entire process, passing as parameter to the ajax call the id of the selection (should create the logic once and just invoke it manually the first time..)
in the same handler, check if the counter of the select box is not the last one, find all dropdowns and remove those with counter greater than this dropdown..
add the new dropdown in the DOM..
I hope it makes some sense..
I once wrote a plugin that might be what you're looking for; if not, at least it should give you a good place to start coding from (hopefully :)