I've been exploring jquery datatables and flexigrid plug ins to display data from a mysql database.
I have both versions displaying data from the database which comes from a php script. So all ok there.
However I want to add a form to enable a search to made on criteria eg from and to dates, types etc. multiple critieria. Flexi grid has a basic filter - i've not delved too deeply with datatable.
I can do this without using a plug in but I would like my results to be displayed in the chosen datagrid and then use that tables functionality. I'm just not sure of the workflow on how to do this.
How do I initiate the creation of a flexigrid or datatable from the call back of a form submission with the results from that call back? Do I save the results in a variable and pass that to the plug ins?
I hope my question makes sense. I know what I would like to do, just not sure how to do it
I'm ok with php - newsih to javascript
Thanks
Flexigrid
You can create a form (e.g. call it searchForm) and then serialize this data and pass it into the Flexigrid search parameters.
You can then add form data to a Flexigrid implementation on the click of the button:
$(function () {
$('#btnSearch').click(function () {
addFormData();
// Reload the grid from the URL, passing in search parameters from addFormData
$('#flexGrid').flexOptions({ url: '/search/here/' }).flexReload();
});
});
And the addFormData function just serializes the data from the form and adds it to the parameters of the Flexigrid call back to the server:
function addFormData() {
//Retrieve all input data from the searchForm
var allSearchParams = $('#searchform').serializeArray();
//Add the parameters to Flexigrid, so when it reloads, it will use them to filter the data
$("#flexGrid").flexOptions({ params: allSearchParams });
return true;
}
DataTables
DataTables has handy plugins like the Column Filter which has server-side filtering to do all this work for you, or I would recommend reading up on DataTables server-side processing.
Related
Im solving how to exchange data between JS control add-in and NAV.
Now, when I want to get data from JS control add-in to NAV. I call from NAV, JS method and in JS method I call method in NAV. See example below.
Is there some easy way e.g. return values on first call from NAV?
Because I need data from JS in one method.
Thank you for your help.
C/AL Code
d::someMethod()
//I need to work with data from JS here
CurrPage.d.getDataFromJS();
d::receiveDataFromJS(data: Variant)
//here I receive data from JS
JS
function getDataFromJS() {
var result = 'bla bla';
Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('receiveDataFromJS', [result]);
}
You can return data from your addin via events. Just define the event in your dll and reinclude your addin, it should then be visible in the C/AL. To trigger the event on JavaScript side use Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('eventName', [parameters]);
The parameters you parse here can then be used to parse your data to the NAV-side. I hope this helps you
I'm developing a web app using Express. On one of my pages I have a table filled with data and I want users to be able to modify the data. I use contenteditable (HTML5) to make the data editable (DEMO: http://jsfiddle.net/k854hsae/5/)
I have a Javascript method to submit whatever has been written when the Enter key is pressed:
$(document).ready(function () {
var $editableTd = $('td[contenteditable]');
$editableTd.bind('keyup', function (e) {
if (e.keyCode == 13) {
$(this).blur();
// SAVE NEW DATA TO DATABASE
}
});
});
I use MongoDB. I want to save the new data to the database every time a cell is modified (so no "submit button"). I'm not quite sure on how to pass the information along in Express. From the examples I've seen, they all use Forms with the following syntax in Jade:
form#formAddUser(name="adduser",method="post",action="/adduser")
But I don't know how I can POST using contenteditable. Is there a way to "call" server-side JS from client-side JS?
You can use jQuery .post() method to send ajax post request from client-side JS to server-side JS.
I am using ajax from JQuery. I am doing in a page that I see the results of a POST/GET having provided specific parameters as filters to the server.
Assume I have provided parameters a&b&c to the user so that I see in the page the subset of the data that these parameters hold true.
In a specific case I do an ajax call to pass a value to the server that modifies this set that I am seeing.
What I need is a way to do a refresh of the page but that will only display the new version of the current subset of data I.e. somehow refreshing passing back to the server a&b&c
Right now I am doing: window.location.reload(true); which reloads all the data and it is time-consuming to re-apply the filters manually.
How can I solve this?
Essentially what I need is not full refresh?
If you are using Ajax from jQuery and want to do a partial reload but have chosen window.location.reload, then you are doing it wrong.
Use the format
$("#someDiv").load("someUrl?a=x&b=y")
or
$.get("someUrl?a=x&b=y",function(data) { $("#someDiv").html(data)});
for example this code in the head where .parameters could be checkboxes
$(function() {
$(".parameters").on("click",function() {
var url = "someUrl.php?"+$("#myForm").serialize();
$.get(url,function(data) {
$("#someContainer").html(data);
});
});
});
You would have to return something from the server which will contain th einformation needed to update
And then update the content based on the returned data.
I am using jQuery Tokeninput by James Smith. Once I initialize the token input, I need to change the data fed to it and also change the prepopulate option under script control. How can I do this?
Here is my code :
Initialization:
$('#nameList').tokenInput(data, {
theme: "facebook",
preventDuplicates: true
});
Later in the script, I want to change the value of the local "data" and also add prepopulate to it. Any help would be appreciated.
you can give the url to your server side script where you get all the required data and send it as json...
Create a server-side script (PHP, Rails, ASP.net, etc) to generate your search results. The script can fetch data from wherever you like, for example a database or a hardcoded list. Your script must accept a GET parameter named q which will contain the term to search for. E.g. http://www.example.com/myscript?q=query
you can go through the documentaion here
$(document).ready(function () {
$("#nameList").tokenInput("http://www.example.com/myscript");
})
and your result in server side should return in json like
PHP (if your are using PHP...)
echo json_encode($data);
example
[
{"id":"856","name":"House"},
{"id":"1035","name":"Desperate Housewives"},
...
]
I am working on a web app and trying to code a form with two dropdown lists. The list in the second dropdown will be dependent on the selection from the first one. The task itself isn’t too complicated except that once the first selection is made, I need to make a database call to pull the data for the second dropdown. This is where I am having difficulty. Both lists are in fact populated from a database.
I am working on this in a python script and have been trying to do this w/ an onChange javascript function. The web app is built in Zope and page templates may be an option along w/ the python scripts.
you will have to use a combination of Ajax and javascript here. Onchange event of your select drop down call a javascript function. This javascript function will make a ajax request to a python script that will actually make a database hit and return you a response in a javascript variable. With this javascript variable you can edit you DOM and set the html of second select box.
see if u can get some hint from this:
http://www.satya-weblog.com/2007/04/dynamically-populate-select-list-by.html
That's exactly what I did. Below is the javascript function I came up with. OnChange, I call getOptions and the pythonScript creates the second dropdown list. I am able to pass in a parameter to get the data I need for this dropdown. Thanks!
function getOptions() {
var code = 'code=' + $("dropdown1").getValue();
var myAjax = new Ajax.Updater('dropdown2', './pythonScript', { method: 'get', parameters: code });
}