I have a variable in my JavaScript which contains the id of the clicked row in the master grid. I want to pass it to the groovy service page that handles my child grid so that it can filter the rows based on that id. How do I do that?
The problem is that your javascript-based grid runs on the client, while the page is rendered server-side. Therefore, some communication must take place in order to instruct your application to filter rows based on what the user selects.
Grails uses the MVC architecture, this means that there is a controller that takes care of answering the requests generated from the client. To answer these requests, the Controller can make use of the Views (.gsp files). So when you call to the URL controller/index you may make use of an index.gsp view to render your page.
What you need to do is to make an ajax call to a controller method (e.g. controller/getFilteredRows) that gets as input the selected row (could be its id) and based on some logic fetches all the required information and sends them back to the client encoded for example using JSON.
Now the client knows the rows it has to display, hence you can update your grid.
Related
I am using DRF and AngularJS for my website. I make a simple request like-
$http({
method: "GET",
url: "http://127.0.0.1:8000/api/sendeop",
}).then(function success(response) {
//some processing on the data returned
}, function error(response) {});
Now if data changes in the database, it is not reflected on angularJS as this only makes the request once while it loads. How to watch the api for data change and process it in angularJS?
I'm not quite sure if $watch or $digest solve my problem, but if they do, how do I use them?
From your problem statement I understand the following:
You have a backend DB. The server-side/middleware queries the DB and sends the data to the front-end.
The client/front-end which is using Angular JS is accepting the data from the server side and utilizing it in the screens.
You want to check if the data in the backend DB is changed and if it is changed you want the client to request the data and refresh the screen content.
If the above understanding is correct, then I would suggest the following:
(For capturing changes of data in a single row)
Add a tsChanged(TimeStamp for changed data) column in the table which is storing the data in the DB.
Every Update query will update the tsChanged field of the row.
When the data will be first sent to the client then the tsChanged of the that state is also sent to the client.
Create a service (say updateCheckerService) in the server side that compares the tsChanged values (between the current tsChanged in the DB vs the tsChanged that is sent from the client side). A light weight Select query will do.
Using $interval hit the updateCheckerService by passing the tsChanged thats already present in the client side.
If the server responds true (means the data is changed), then call the data load service again.
(For capturing the changes of the data in multiple rows)
Add a tsChanged column in the table which is storing the data in the DB.
Every Update query will update the tsChanged field of the row.
When the data will be first sent to the client then the highest value of tsChanged is sent to the client.
Create a service (say updateCheckerService) in the server side that compares the tsChanged values (between the current highest tsChanged in the DB vs the tsChanged that is sent from the client side). A light weight Select query will do.
Using $interval hit the updateCheckerService by passing the tsChanged thats already present in the client side.
If the server responds true (means the data is changed), then call the data load service again.
Advantages:
Since the Client side data loading service is expensive and heavy, its best to call only when you are sure that the data is changed in the DB.
In order to be sure that the data is changed, we are using a light weight service, thus effectively making the process lighter.
Hope it helps!
wel you got it all wrong, angular js is client side scripting language only,
if you want to track the changes in database and want to show updated data.
you will need to take help any of middleware (i.e socket.io) or
you can use webworkers for ajax poling which will make continous http call to your server in every definite interval or
you can use any third party (i.e. firebase or PubNub) library.
You can implement a notification system (see Amazon SQS or SNS), or, as stated by #str, you can implement a real-time call (see ajax long polling, websockets).
I'm building an ASP.NET MVC 4 website that needs to be available offline (HTML 5 manifests/caching), so I will be unable to take advantage of server side HTML generation.
Right now, I just have generic/cacheable HTML on the View (.cshtml) and I'm making jQuery AJAX calls on document ready to load the data from the server and using mustache.js to generate the HTML.
Being constrained to doing HTML generation only in the client side, I'm unable to use Url.RouteUrl to generate links and also constrained to having to parse the current URL manually when navigating to a details page, and using the Id (or whatever the parameter is) to make the AJAX call to retrieve the information for the specific record that I need.
Since I'm still using MVC URL Routing (and would like to keep using it) to return the corresponding View (as in, http://localhost:27954/Route/Test2/7?mytext=hellow), I'll need a javascript or jQuery function to both be able to parse URL's and retrieve the value for a given querystring parameter, and ideally another method to generate URLs.
Since I'm obviously not the first person in this situation, I was wondering if anyone had any proven methods already that they could share, or any recommendations.
Thanks!
I think in this case I need to write a client side script that onpageload/onchange gets options from server & builds a list dynamically. & stores new options to server via some JavaScript script. I will prefer to save user input in a file on server. I will be very thankful for any help.
Here is the stack we use for our web app and that works more or less the way you describe:
the user load an HTML page
the page make an ajax call and get the options as a JSON(either it exists already in the database, or a new option set is generated)
the json is rendered using a JS templating engine (PURE in our case)
the user change something
the same JSON is modified and sent by a POST to the server
the server read that JSON and store it in the database(you would write the data to your file). And then go back to the step 4, to wait for another user change.
I have been finding ways around this for a long time but think it's time I addressed it.
If I have a page that has a dropdown menu, is there anyway I can select a value which will subsequently load other values further down.
Can this be done without a page reload?
I will give you an example.
Say I was making some tools for an admin panel, but first of all they needed to select a member to work with.
They would select the member and then below, the fields about that member would be populated based on what was selected in the first menu.
As I have already asked, can this be done without a page reload?
Thanks for reading.
Yes it can be done without AJAX. When the page is rendered pass all the collections that will be used by the dropdown lists as JSON objects into the HTML:
var collection = [{ id: 1, name: 'John' }, { id: 2, name: 'Smith' }];
...
Then register for the change event of the first drop down and based on the selected value go and fetch the data from the other collections. Of course if you have lots of data this might not be practical as your pages will become very large and in this case AJAX woulld be more appropriate.
Answer YES it can be done.
Firstly you'll need an event, in this case you need to take action on the onChange event for the selectBox. So when an item changes you run a function.
Now you have 2 choices. You can do this using AJAX or NOT, it really depends on the complexity / security of your application.
In the following I refer to
Users : those using the application
Hidden Client Side Data : Data sent to the client during page load, but not visible to all users, however using view source, or downloading JS files, the Data is not secured.
Method 1 - NO AJAX
Basics: You send all the possible display options down initially when the page is first loaded, but display only the sections relevant to the user during selectbox onchange events.
Recommended when: No security condiderations if hidden client side data is detected (or won't be detected, or you simply trust your audience to use the app in the intended manner). Lastly when your total view permutations are low.
Method 2 - AJAX
Basics: You send down initially only the page skeleton, when the user changes the value of the select box, you then do an AJAX request to the server - grab the new view info thats relevant to that user, send it back down to a script which will inject that user data into the DOM.
Recommended when: You have a public site, or a site where security is a consideration. Where you have lots of view permutations or want more customizations per user than in scenario 1.
As you see both methods do not require a repost - method 1 ships everything upfront, method 2 uses AJAX to fill in data when required. Both methods are valid depending on your requirement.
Yes. Ajax is mainly used for that i.e. (without a page reload)
You have to use following step to achieve
Create a link and call a JavaScript function on it's onchange function
In the JavaScript function you have to call Ajax request.
Update the div in your ajax response.
i have stored values in mysql and i want to retrive that value in webpage
but the webpage is creted only using javascript
so how can i use that database's value in javascript
You need to have a server side script in the middle so you can retrieve the value using ajax.
What you're asking for is only possible with a restful nosql database like CouchDB.
You really need to give more information as to what you want to do, but as you implied that the page isn't dynamic the method would be to use ajax to request a dynamic page (written in a sever side langugage) that retrieves the data from the database and outputs it in the required format.
You'll need to either...
a) Have a separate, server-side script which can run the appropriate query, and then pass through the data to the page through an AJAX-type call (jQuery et cetera have functions to simplify the AJAX side of things, if you so desire),
OR
b) Put some server-side code into the page that is evaluated before the page is served and writes the data into the page within something that the Javascript can access it from (i.e. the definition of a variable or some such).