I am away from my development workstation so I thought I'd ask this in hopes of getting an answer when I try it tomorrow. I have a two part question relating to a web application i built using c# jquery and jquery datatables:
1) I know that we can set the value of fnfilter as metioned on their page using something like:
var oTable;
$(document).ready(function() {
oTable = $('#example').dataTable();
/* Filter immediately */
oTable.fnFilter( 'test string' );
} );
however is there a way to retrieve the value entered by the use in the search bar? I was thinking along the lines of
var aContainer= oTable.fnFilter()
or
var aContainer= oTable.fnFilter($(this).html())
2) My application has to retrieve values from another source on the web. These are the value displayed in the datatable. Most of my processing(counting, etc..) is done client side and has drastically slowed down generating the web app. Does anyone know of any suggestions to increase performance of client side scripts specifically datatables?
If your datatable is really instantiated as oTable = $('#example').dataTable(); then doing this:
var textEntered = $('#example_filter input:text')[0].value;
Should return whatever the user entered on the field for filtering.
In answer to #1, you can get the value of the text entered into the search box by doing
// Assume the table's id attribute is 'blah'
var search_string = $('#blah_filter>input').val();
As far as #2, have you considered server-side processing of the data and sending the result to the client?
This article
might give you a big help if you decide to write server side code. Now researching it myself (and not looking forward to implementing custom filtering!).
Related
I am relatively new to ColdFusion (using ColdFusion 10) and I have a question regarding creating a real-time updated table.
Currently I have a C# application that I have writing stock prices to a csv (text) file every 2 seconds and would like to reflect these changes as they happen in a table on web page. I know I could have the entire table refresh every 2 seconds, but this would generate a lot of requests to the server and I would like to know if there is a better way of doing it ? Could this be easily achieved using ColdFusion 10's new html5 Web-sockets functionality ?
Any advice/guidance on which way to proceed or how to achieve this would be greatly appreciated !
Thanks, AlanJames.
I think you could rewrite your question and get at least 5 answers in first hour.
Now to answer it, if I understood well what you're asking.
IMHO websockets aren't there yet, if your website is for wide population and you are not 100% sure that they're coming with most recent Chrome or FF, forget it.
You could use some javascript websocket library which would gracefully fallback to flash or AJAX HTTP polling, like http://socket.io/ or cloud service like pusher.com . But this will complicate your life because you have 2-3 times more work in backend if you implement polling and websocket.
Regarding amount of requests, if you want real time data on screen, you gotta have server to support it.
You could optimize if you request once and refresh data for all the table, so not per cell. You'd get all new data at once and update those cells which changed with jquery. So not pulling all data again, or whole table HTML, just minimal amount of data.
AJAX polling would certainly help with amount of requests, time of the request being open is another possible problem though. You could do polling with BlazeDS which is even in ColdFusion 9.
some pages to look at:
http://www.bennadel.com/blog/2351-ColdFusion-10-Using-WebSockets-To-Push-A-Message-To-A-Target-User.htm
http://www.bennadel.com/blog/1956-Very-Simple-Pusher-And-ColdFusion-Powered-Chat.htm
http://nil.checksite.co.uk/index.cfm/2010/1/28/CF-BlazeDS-AJAX-LongPolling-Part1
There isn't a way to get live updates every 2 seconds without making some kind of request from your page to your server, otherwise how would it know if anything has changed?
Personally I would write a CFC method to read in your text file and see if it's changed, then poll that method every few seconds using jQuery to return whether it has changed or not, and pass back any updated content.
Without knowing the details of your text file etc. it's hard to write anything accurate. Fundamentally your CFC method would have to store (in a SESSION var probably) a copy of the text file data, so it could compare it with the latest read-in data and tell if anything has changed. If it has changed then send a structure back with the updates, or return a response saying it's unchanged.
Your CFC code would look something like this:
<cffunction name="check_update" access="remote" output="false">
<cfset response = structNew()>
<cffile action="read"
file="path\to\your\textfile.txt"
variable="file_content"
>
<cfif file_content NEQ SESSION.file_content>
<cfset response.updated = true>
<cfset SESSION.file_content = file_content>
<cfset response.content = structNew()>
<!--- code here to populate 'content' variable with updated info --->
<cfelse>
<cfset response.updated = false>
</cfif>
<cfreturn response>
</cffunction>
Then the jQuery code to poll that data would look like this:
var update_interval;
var update_pause = 3000;
function check_update() {
var request = {
returnformat : 'json',
queryformat : 'column',
method: 'check_update'
}
$.getJSON("path/to/your/service.cfc", request, function(data) {
if(data.UPDATED == true) {
/* code here to iterate through data.CONTENT */
/* and render out your updated info to your table */
}
});
}
$(document).ready(function () {
update_interval = setInterval(check_update(), update_pause);
});
So once the DOM is ready we create an interval that in this case fires every 3 seconds (3000ms) and calls the check_update() function. That function makes a call to your CFC, and checks the response. If the response UPDATED value is true then it runs whatever code to render your updates.
That's the most straightforward method of achieving what you need, and should work regardless of browser. In my experience the overhead of polling a CFC like that is really very small indeed and the amount of data you're transferring will by tiny, so it should be no problem to handle.
I don't think there's any other method that could be more lightweight / easy to put together. The benefits of long polling or SSE (with dodgy browser support) are negligible and not worth the programming overhead.
Thanks, Henry
I have a asp.net C# MVC Razor view that allows the user to change units for input fields from metric to imperial. There are about a dozen labels that all need to be changed at the same time to the same text, no exceptions ("mm" => "inch" and visa verse).
Since the dot net framework requires each element to have unique ID fields I'm trying to find another way to group them all together and change them on the client side.
It seems silly to give each one a unique ID and call each one individually in a if/then statement to switch measurement systems when they are identical. There has to be a better way.
I attempted to use #ViewBag but I found that javascript can only read the value and can't change it on the client side.
#Html.Label("display_units", "mm", new { id = "lbl_units" })
Thanks for your help and suggestions.
Give your labels a common css class like "display-units". Then from Javascript code, you can use jQuery to find all labels of that class and change the text:
$(".display-units").text('mm');
KnockoutJS was written to solve this kind of problem, ie, binding your viewmodel to your view.
Im trying to add some C# code in my javascript. But I can't parse my var name into the C# code.
What I want is this:
$.ready(function(){
var name = $("#input");
#Class.text(name)
});
But it wont allow me to parse the name.
This is a short version of what i got, the #Class represent a more complex function
The syntax is indeed incorrect.
The var name = $("#input"); is javascript. It is executed at the client end after the document is loaded. The #Class is server side and is executed when the page is being generated.
You cannot use javascript variables in C#. What is it that you are trying to achieve; there may be a different way to do so.
--
Update : You are trying to call a c# method from javascript.
Overall this will require a post back to the server - see http://blog.bobcravens.com/2009/11/ajax-calls-to-asp-net-mvc-action-methods-using-jquery/
#MichaelTotKorsgaard Based on our discussion in the comments of your question, I think I now understand. Unfortunately what you're trying to do simply won't work. It doesn't work that way. The reason you do AJAX/JSON is because, once C#/MVC/ASP.NET returns HTML (it doesn't actually know if what it returns is valid), it's up to the Client to "do stuff" with it. That's where Javascript comes in. But the server-side MVC and client-side JS don't actually know anything about each other. You Need to either 1) post back or 2) use AJAX.
It's time to saddle up and learn how to do it :)
If you give more details about what you're actually trying to accomplish -- like what you're trying to load from JS/AJAX -- then I'm sure SO can give you more information to set you on the right path.
I am trying to write a javascript function that calls an Dictionary value and than tries to split it on a ยด_'. The problem is that the Key to get the value from Dictionary is in an Javascript var that is extracted from a dropdownlist. Is it possible to use an Javascript var inside an c# function inside Javascript?
the Code as it is now:
var Category = document.getElementById('Properties').value;
var Name = document.getElementById(Category).value;
Category = '#Model.Dictionary[Name].Split('_')[0]';
EDIT:
People are misinterpreting my problem, the .Split function does work but the Dictionary[Name] is giving me problems. if i enter
var Category = document.getElementById('Properties').value;
var Name = document.getElementById(Category).value;
Category = '#Model.Dictionary["Bicycle"].Split('_')[0]';
into the code it works perfectly, but I want to get the "Bicycle" part dynamically out of an DropDownList.
EDIT 2:
Okay I have decided that what I am over thinking the situation and that what I am trying to do needs alot more work than is needed, found a beter solutions, thanks for everybody that tried to help me.
You're a bit mixed up between client and server side. To interact with server side code like this, you'll need to either post to the server or write an AJAX callback to call a server method.
http://mikehadlow.blogspot.com/2008/10/mvc-framework-and-jquery-ajax-heaven.html
No, that is not possible. All the server code runs before the page is sent to the browser, and all the client code runs after.
What you would have to do to use the dictionary in the client code is to create Javascript code from the server side, that recreates the dictionary on the client side.
If that's not possible, you would have to make an AJAX call to the server.
I have avoided the issue completely by having the DropDownList have different values in Value and Text, doing this is can get the wanted input that used to be in the Dictionary out of the Value of the DropDownList without changing the Text.
I've been given a task to make a dynamic drop down which takes it's data[image and value id] from table. I am wondering if any of you came across this scenario or if any one can help me out in this I need help in concept and coding. Definitely any help is appreciated.
I see the example in jquery here is the link:
http://www.marghoobsuleman.com/jquery-image-dropdown
something like this but data is coming from table.
If you use the plugin that you found in the link, then basically what you will want to do is create the dropdown dynamically based on the table content. Without having more details of how your table is structured I can't give you exact details, but something like this should get you close (I'm going to assume there is a drop-down element already on the page somewhere called "select", and your table is called "table" with the image in field 0, and the text in field 1) Note: This hasn't really been tested.
var options = "";
$("#table tr").each(function() {
var imagePath = $(this).find("td:eq(0) img").attr("src");
var title = $(this).find("td:eq(1)").text();
options += '<option value="'+title+'" title="'+imagePath+'">'+title+'</option>';
});
$("#select").html(options);