Search Results

Search found 25050 results on 1002 pages for 'javascript oop'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 25/1002 | < Previous Page | 21 22 23 24 25 26 27 28 29 30 31 32  | Next Page >

  • Avoid richfaces to send back javascript libraries in the ajax responses

    - by pakore
    I'm using JSF 1.2 with Richfaces, and for every ajax request, the server is sending back the response, whichi is good, but it also contains all the links to the javascript files. I want to improve the performance so I just want the <body> to be returned, because all the javascript files are already loaded in the browser when the user logs in (my app is not restful). How can i do that? Thanks This is an example of a response to reRender an image when clicking a button. <?xml version="1.0"?> <html lang="nl_NL" xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalcss/page.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.ImageCacheScript.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/browser_info.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/ajax4jsf/javascript/scripts/form.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/tabPanel.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalcss/tabPanel.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery/jquery.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery.utils.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/json/json-mini.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.DnDScript.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/utils.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/json/json-dom.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/dnd/dnd-common.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/dnd/dnd-draggable.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/dnd/dnd-dropzone.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/form.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/script/controlUtils.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/common-scrollable-data-table.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/extended-data-table.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/drag-indicator.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/ext-dt-drag-indicator.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/ext-dt-simple-draggable.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/ext-dt-simple-dropzone.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/dragIndicator.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalcss/extendedDataTable.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/menu.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/context-menu.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/available.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/menu.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalcss/menucomponents.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/tooltip.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/tooltip.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/datascroller.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalcss/datascroller.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/modalPanel.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/modalPanelBorders.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/modalPanel.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/tiny_mce/tiny_mce_src.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/editor.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalcss/editor.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/events.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/scriptaculous/effects.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/JQuerySpinBtn.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/calendar.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/calendar.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/panelbar.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalcss/panelbar.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/comboboxUtils.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/utils.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/inplaceinputstyles.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finalscripts/inplaceinput.js.xhtml" type="text/javascript"> </script><link class="component" href="/eyeprevent/a4j/s/3_3_3.Finalcss/inplaceinput.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.xhtml" rel="stylesheet" type="text/css" /><script src="/eyeprevent/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js.xhtml" type="text/javascript"> </script><script src="/eyeprevent/a4j/g/3_3_3.Finaljquery.js.xhtml" type="text/javascript"> </script></head> <body> <img id="j_id305:supportImage" src="/eyeprevent/image/os-ir-central.jpg" width="50%" /> <meta name="Ajax-Update-Ids" content="j_id305:supportImage" /> <span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id24" autocomplete="off" /> </span><meta id="Ajax-Response" name="Ajax-Response" content="true" /> <meta name="Ajax-Update-Ids" content="j_id305:supportImage" /> <span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id24" autocomplete="off" /> </span><meta id="Ajax-Response" name="Ajax-Response" content="true" /> </body> </html> And this is the code that generated it: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <ui:composition> <h:form> <h:panelGrid columns="1"> <a4j:region> <h:graphicImage id="supportImage" value="#{user.support.imagePath}" rendered="#{user.support.imageLoaded}" width="50%" /> </a4j:region> <h:panelGroup> <a4j:commandButton action="#{user.support.acceptImage}" value="YES" reRender="supportImage"/> <a4j:commandButton action="#{user.support.rejectImage}" value="NO" reRender="supportImage"/> </h:panelGroup> </h:panelGrid> </h:form> </ui:composition> </html>

    Read the article

  • Top-Rated JavaScript Blogs

    - by Andreas Grech
    I am currently trying to find some blogs that talk (almost solely) on the JavaScript Language, and this is due to the fact that most of the time, bloggers with real life experience at work or at home development can explain more clearly and concisely certain quirks and hidden features than most 'Official Language Specifications' Below find a list of blogs that are JavaScript based (will update the list as more answers flow in): DHTML Kitchen, by Garrett Smith Robert's Talk, by Robert Nyman EJohn, by John Resig (of jQuery) Crockford's JavaScript Page, by Douglas Crockford Dean.edwards.name, by Dean Edwards Ajaxian, by various (@Martin) The JavaScript Weblog, by various SitePoint's JavaScript and CSS Page, by various AjaxBlog, by various Eric Lippert's Blog, by Eric Lippert (talks about JScript and JScript.Net) Web Bug Track, by various (@scunliffe) The Strange Zen Of JavaScript , by Scott Andrew Alex Russell (of Dojo) (@Eran Galperin) Ariel Flesler (@Eran Galperin) Nihilogic, by Jacob Seidelin (@llimllib) Peter's Blog, by Peter Michaux (@Borgar) Flagrant Badassery, by Steve Levithan (@Borgar) ./with Imagination, by Dustin Diaz (@Borgar) HedgerWow (@Borgar) Dreaming in Javascript, by Nosredna spudly.shuoink.com, by Stephen Sorensen Yahoo! User Interface Blog, by various (@Borgar) remy sharp's b:log, by Remy Sharp (@Borgar) JScript Blog, by the JScript Team (@Borgar) Dmitry Baranovskiy’s Web Log, by Dmitry Baranovskiy James Padolsey's Blog (@Kenny Eliasson) Perfection Kills; Exploring JavaScript by example, by Juriy Zaytsev DailyJS (@Ric) NCZOnline (@Kenny Eliasson), by Nicholas C. Zakas Which top-rated blogs am I currently missing from the above list, that you think should be imperative to any JavaScript developer to read (and follow) concurrently?

    Read the article

  • Inheritance using prototype / "new"

    - by mikkol
    Hi I'm new in Javascript OO and want to know more about about inheritance. Hope you can provide some advice! I see this great post: How to "properly" create a custom object in JavaScript? which talks about how a class is inherited as I see in other websites, ex.: function man(x) { this.x = x; this.y = 2; } man.prototype.name = "man"; man.prototype.two = function() { this.y = "two"; } function shawn() { man.apply(this, arguments); }; shawn.prototype = new man; The above post claims that in order not to call "man"'s constructor while inheriting, one can use a helper like this instead: function subclassOf(base) { _subclassOf.prototype= base.prototype; return new _subclassOf(); } function _subclassOf() {}; shawn.prototype = subclassOf(man); While I understand its intention, I don't see why we can't call shawn.prototype = man.prototype; I see it works exactly the same. Or is there something I'm missing? Thanks in advance!

    Read the article

  • javascript - catch SyntaxError and run alternate function

    - by ludicco
    Hello there, I'm trying to build something on javascript that I can have an input that can be everything like string, xml, javascript and (non-javascript string without quotes) as follows: //strings eval("'hello I am a string'"); /* note the following proper quote marks */ //xml eval(<p>Hello I am a XML doc</p>); //javascript eval("var hello = 2+2;"); So this first 3 are working well since they are simple javascript native formats but when I try use this inside javascript //plain-text without quotes eval("hello I am a plain text without quotes"); //--SyntaxError: missing ; before statement:--// Obviously javascript interprets this as syntax error because it thinks its javascript throwing a SyntaxError. So what I would like to do it to catch this error and perform the adjustment method if this occurs. I've already tried with try catch but it doesn't work since it keeps returning the Syntax error as soon as it tries to execute the code. Any help would be much appreciated Cheers :) Additional Information: Imagine an external file that javascript would read, using spidermonkey, so it's a non-browser stuff(I can't use HttpRequest, DOM, etc...)..not sure if this matters, but there it is. :)

    Read the article

  • Javascript conflict on my html page

    - by tochiro
    Hello, I have an accordion menu and a lightwindow script on my web page. The lightwindow script does not work because of the accordion script because if I delete the latter the lightwindow script works. There must be a conflict but what? Here is the head section of my page: <!-- lightwindow files --> <script type="text/javascript" src="lightwindow/javascript/prototype.js"></script> <script type="text/javascript" src="lightwindow/javascript/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script> <link rel="stylesheet" href="lightwindow/css/lightwindow.css" type="text/css" media="screen" /> <!-- accordion scripts --> <script src="js/jquery-1.2.1.min.js" type="text/javascript"></script> <script src="js/menu.js" type="text/javascript"></script> <script src="js/jquery.cookie.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/accordion.css" /> Thank you for your time. Cheers tochiro

    Read the article

  • Practices for keeping JavaScript and CSS in sync?

    - by Rene Saarsoo
    I'm working on a large JavaScript-heavy app. Several pieces of JavaScript have some related CSS rules. Our current practice is for each JavaScript file to have an optional related CSS file, like so: MyComponent.js // Adds CSS class "my-comp" to div MyComponent.css // Defines .my-comp { color: green } This way I know that all CSS related to MyComponent.js will be in MyComponent.css. But the thing is, I all too often have very little CSS in those files. And all too often I feel that it's too much effort to create a whole file to just contain few lines of CSS - it would be easier to just hardcode the styles inside JavaScript. But this would be the path to the dark side... Lately I've been thinking of embedding the CSS directly inside JavaScript - so it could still be extracted in the build process and merged into one large CSS file. This way I wouldn't have to create a new file for every little CSS-piece. Additionally when I move/rename/delete the JavaScript file I don't have to additionally move/rename/delete the CSS file. But how to embed CSS inside JavaScript? In most other languages I would just use string, but JavaScript has some issues with multiline strings. The following looks IMHO quite ugly: Page.addCSS("\ .my-comp > p {\ font-weight: bold;\ color: green;\ }\ "); What other practices have you for keeping your JavaScript and CSS in sync?

    Read the article

  • Calling function and running it

    - by devs
    I am quite new to objects and OOP. I really don't know how to explain it well but I'll try. So I am trying to read though JSON with JS, the JSON is passed from PHP. This would be easy if all of the information was on the same html page, but I' am trying something that I am new too. So let me show my code... First is the JS which is in app.js var Donors = function(){ var api = this.list; $(document).ready(function(){ $.getJSON(api, function(){ var donorObj = api.payload; $.each(donorObj, function(i, donor){ //console.log(donor.ign); }); }); }); } What I want this part to do is read from the JSON I'm giving it and console.log each name (or donor.ign) when the document is ready. On the html page, or header.php <script> $(function(){ var list = <?php cbProxy(); ?>; var Dons = new Donors(); Dons.list = list; }); </script> the data that's in list is the below JSON. You already know what the rest does, it just passes the JSON to the Donors() function. JSON example: { "code": 0, "payload": [ { "time": 1349661897, "packages": [ "49381" ], "ign": "Notch", "price": "15.99", "currency": "USD" } I'm use to just making functions and calling it on the same page or file and this is my first doing this kind of function. How can I get the function to run with the data I sent it so it console.log() each name.

    Read the article

  • o3d javascript uncaught referenceerror

    - by David
    hey, im new to javascript and am intersted in creating a small o3d script: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Game Website</title> </head> <body> <script type="text/javascript" src="o3djs/base.js"></script> <script type = "text/javascript" id="myscript"> o3djs.require('o3djs.camera'); window.onload = init; function init(){ document.write("jkjewfjnwle"); } </script> <div align="background"> <div id="game_container" style="margin: 0px auto; clear: both; background-image: url('./tmp.png'); width: 800px; height:600px; padding: 0px; background-repeat: no-repeat; padding-top: 1px;"></div> </div> </body> </html> the browser cant seem to find o3djs/base.js in this line <script type="text/javascript" src="o3djs/base.js"></script> and gives me an uncaught referenceerror at this line o3djs.require('o3djs.camera'); Obviously, because it can't find the o3djs/base.js... I have installed the o3d pluggin from google and they say that should be IT ive tried on firefox, ie and chrome thanks

    Read the article

  • Including inline javascript using content_for in rails

    - by TenJack
    I am using content_for and yeild to inject javascript files into the bottom of my layout but am wondering what the best practice is for including inline javascript. Specifically I'm wondering where the put the script type declaration: <% content_for :javascript do %> <script type="text/javascript"> ... </script> <% end %> or <% content_for :javascript do %> ... <% end %> <script type="text/javascript"> <%= yield :javascript %> </script> <% end %> I am using the first option now and wondering if it is bad to include multiple ... declarations within one view. Sometimes I have partials that lead to this.

    Read the article

  • Javascript in CakePHP

    - by user445803
    Hello, I had one page in Views in CakePHP, it have normal javascript block, Just inserted: <script language="JavaScript" type="text/javascript"> ---code--- </script> Inside page, and it was all working okay... But now... It doesn't show... How can I change configuration or something to enable showing javascript blocks without CakePHP commands. Javascript needs data from that page so I can't use outer file, and it's too long to use $javascript-codeBlock Is there any way to reconfigure stupid CakePHP to start showing those blocks? Some files are showing javascript, and it's working all okay, but some of them won't show... Please help...

    Read the article

  • Javascript Methodname is replaced with !==

    - by dasheddot
    Hey! On the server lies a html file with javascript code included. This javascript code includes a method called something like "CheckObject". This file works for all users, except one specific (but important). He gets a javascript error and in his browser sourcode appears something unbelievable: The methodname "CheckObject" is replaced with "Check!==ect", means the "Obj" of the method name is replaced with !==. Why could that be? Hope anybody can help me! Best regards

    Read the article

  • ASP.NET and HTML5 Local Storage

    - by Stephen Walther
    My favorite feature of HTML5, hands-down, is HTML5 local storage (aka DOM storage). By taking advantage of HTML5 local storage, you can dramatically improve the performance of your data-driven ASP.NET applications by caching data in the browser persistently. Think of HTML5 local storage like browser cookies, but much better. Like cookies, local storage is persistent. When you add something to browser local storage, it remains there when the user returns to the website (possibly days or months later). Importantly, unlike the cookie storage limitation of 4KB, you can store up to 10 megabytes in HTML5 local storage. Because HTML5 local storage works with the latest versions of all modern browsers (IE, Firefox, Chrome, Safari), you can start taking advantage of this HTML5 feature in your applications right now. Why use HTML5 Local Storage? I use HTML5 Local Storage in the JavaScript Reference application: http://Superexpert.com/JavaScriptReference The JavaScript Reference application is an HTML5 app that provides an interactive reference for all of the syntax elements of JavaScript (You can read more about the application and download the source code for the application here). When you open the application for the first time, all of the entries are transferred from the server to the browser (all 300+ entries). All of the entries are stored in local storage. When you open the application in the future, only changes are transferred from the server to the browser. The benefit of this approach is that the application performs extremely fast. When you click the details link to view details on a particular entry, the entry details appear instantly because all of the entries are stored on the client machine. When you perform key-up searches, by typing in the filter textbox, matching entries are displayed very quickly because the entries are being filtered on the local machine. This approach can have a dramatic effect on the performance of any interactive data-driven web application. Interacting with data on the client is almost always faster than interacting with the same data on the server. Retrieving Data from the Server In the JavaScript Reference application, I use Microsoft WCF Data Services to expose data to the browser. WCF Data Services generates a REST interface for your data automatically. Here are the steps: Create your database tables in Microsoft SQL Server. For example, I created a database named ReferenceDB and a database table named Entities. Use the Entity Framework to generate your data model. For example, I used the Entity Framework to generate a class named ReferenceDBEntities and a class named Entities. Expose your data through WCF Data Services. I added a WCF Data Service to my project and modified the data service class to look like this:   using System.Data.Services; using System.Data.Services.Common; using System.Web; using JavaScriptReference.Models; namespace JavaScriptReference.Services { [System.ServiceModel.ServiceBehavior(IncludeExceptionDetailInFaults = true)] public class EntryService : DataService<ReferenceDBEntities> { // This method is called only once to initialize service-wide policies. public static void InitializeService(DataServiceConfiguration config) { config.UseVerboseErrors = true; config.SetEntitySetAccessRule("*", EntitySetRights.All); config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2; } // Define a change interceptor for the Products entity set. [ChangeInterceptor("Entries")] public void OnChangeEntries(Entry entry, UpdateOperations operations) { if (!HttpContext.Current.Request.IsAuthenticated) { throw new DataServiceException("Cannot update reference unless authenticated."); } } } }     The WCF data service is named EntryService. Notice that it derives from DataService<ReferenceEntitites>. Because it derives from DataService<ReferenceEntities>, the data service exposes the contents of the ReferenceEntitiesDB database. In the code above, I defined a ChangeInterceptor to prevent un-authenticated users from making changes to the database. Anyone can retrieve data through the service, but only authenticated users are allowed to make changes. After you expose data through a WCF Data Service, you can use jQuery to retrieve the data by performing an Ajax call. For example, I am using an Ajax call that looks something like this to retrieve the JavaScript entries from the EntryService.svc data service: $.ajax({ dataType: "json", url: “/Services/EntryService.svc/Entries”, success: function (result) { var data = callback(result["d"]); } });     Notice that you must unwrap the data using result[“d”]. After you unwrap the data, you have a JavaScript array of the entries. I’m transferring all 300+ entries from the server to the client when the application is opened for the first time. In other words, I transfer the entire database from the server to the client, once and only once, when the application is opened for the first time. The data is transferred using JSON. Here is a fragment: { "d" : [ { "__metadata": { "uri": "http://superexpert.com/javascriptreference/Services/EntryService.svc/Entries(1)", "type": "ReferenceDBModel.Entry" }, "Id": 1, "Name": "Global", "Browsers": "ff3_6,ie8,ie9,c8,sf5,es3,es5", "Syntax": "object", "ShortDescription": "Contains global variables and functions", "FullDescription": "<p>\nThe Global object is determined by the host environment. In web browsers, the Global object is the same as the windows object.\n</p>\n<p>\nYou can use the keyword <code>this</code> to refer to the Global object when in the global context (outside of any function).\n</p>\n<p>\nThe Global object holds all global variables and functions. For example, the following code demonstrates that the global <code>movieTitle</code> variable refers to the same thing as <code>window.movieTitle</code> and <code>this.movieTitle</code>.\n</p>\n<pre>\nvar movieTitle = \"Star Wars\";\nconsole.log(movieTitle === this.movieTitle); // true\nconsole.log(movieTitle === window.movieTitle); // true\n</pre>\n", "LastUpdated": "634298578273756641", "IsDeleted": false, "OwnerId": null }, { "__metadata": { "uri": "http://superexpert.com/javascriptreference/Services/EntryService.svc/Entries(2)", "type": "ReferenceDBModel.Entry" }, "Id": 2, "Name": "eval(string)", "Browsers": "ff3_6,ie8,ie9,c8,sf5,es3,es5", "Syntax": "function", "ShortDescription": "Evaluates and executes JavaScript code dynamically", "FullDescription": "<p>\nThe following code evaluates and executes the string \"3+5\" at runtime.\n</p>\n<pre>\nvar result = eval(\"3+5\");\nconsole.log(result); // returns 8\n</pre>\n<p>\nYou can rewrite the code above like this:\n</p>\n<pre>\nvar result;\neval(\"result = 3+5\");\nconsole.log(result);\n</pre>", "LastUpdated": "634298580913817644", "IsDeleted": false, "OwnerId": 1 } … ]} I worried about the amount of time that it would take to transfer the records. According to Google Chome, it takes about 5 seconds to retrieve all 300+ records on a broadband connection over the Internet. 5 seconds is a small price to pay to avoid performing any server fetches of the data in the future. And here are the estimated times using different types of connections using Fiddler: Notice that using a modem, it takes 33 seconds to download the database. 33 seconds is a significant chunk of time. So, I would not use the approach of transferring the entire database up front if you expect a significant portion of your website audience to connect to your website with a modem. Adding Data to HTML5 Local Storage After the JavaScript entries are retrieved from the server, the entries are stored in HTML5 local storage. Here’s the reference documentation for HTML5 storage for Internet Explorer: http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx You access local storage by accessing the windows.localStorage object in JavaScript. This object contains key/value pairs. For example, you can use the following JavaScript code to add a new item to local storage: <script type="text/javascript"> window.localStorage.setItem("message", "Hello World!"); </script>   You can use the Google Chrome Storage tab in the Developer Tools (hit CTRL-SHIFT I in Chrome) to view items added to local storage: After you add an item to local storage, you can read it at any time in the future by using the window.localStorage.getItem() method: <script type="text/javascript"> window.localStorage.setItem("message", "Hello World!"); </script>   You only can add strings to local storage and not JavaScript objects such as arrays. Therefore, before adding a JavaScript object to local storage, you need to convert it into a JSON string. In the JavaScript Reference application, I use a wrapper around local storage that looks something like this: function Storage() { this.get = function (name) { return JSON.parse(window.localStorage.getItem(name)); }; this.set = function (name, value) { window.localStorage.setItem(name, JSON.stringify(value)); }; this.clear = function () { window.localStorage.clear(); }; }   If you use the wrapper above, then you can add arbitrary JavaScript objects to local storage like this: var store = new Storage(); // Add array to storage var products = [ {name:"Fish", price:2.33}, {name:"Bacon", price:1.33} ]; store.set("products", products); // Retrieve items from storage var products = store.get("products");   Modern browsers support the JSON object natively. If you need the script above to work with older browsers then you should download the JSON2.js library from: https://github.com/douglascrockford/JSON-js The JSON2 library will use the native JSON object if a browser already supports JSON. Merging Server Changes with Browser Local Storage When you first open the JavaScript Reference application, the entire database of JavaScript entries is transferred from the server to the browser. Two items are added to local storage: entries and entriesLastUpdated. The first item contains the entire entries database (a big JSON string of entries). The second item, a timestamp, represents the version of the entries. Whenever you open the JavaScript Reference in the future, the entriesLastUpdated timestamp is passed to the server. Only records that have been deleted, updated, or added since entriesLastUpdated are transferred to the browser. The OData query to get the latest updates looks like this: http://superexpert.com/javascriptreference/Services/EntryService.svc/Entries?$filter=(LastUpdated%20gt%20634301199890494792L) If you remove URL encoding, the query looks like this: http://superexpert.com/javascriptreference/Services/EntryService.svc/Entries?$filter=(LastUpdated gt 634301199890494792L) This query returns only those entries where the value of LastUpdated > 634301199890494792 (the version timestamp). The changes – new JavaScript entries, deleted entries, and updated entries – are merged with the existing entries in local storage. The JavaScript code for performing the merge is contained in the EntriesHelper.js file. The merge() method looks like this:   merge: function (oldEntries, newEntries) { // concat (this performs the add) oldEntries = oldEntries || []; var mergedEntries = oldEntries.concat(newEntries); // sort this.sortByIdThenLastUpdated(mergedEntries); // prune duplicates (this performs the update) mergedEntries = this.pruneDuplicates(mergedEntries); // delete mergedEntries = this.removeIsDeleted(mergedEntries); // Sort this.sortByName(mergedEntries); return mergedEntries; },   The contents of local storage are then updated with the merged entries. I spent several hours writing the merge() method (much longer than I expected). I found two resources to be extremely useful. First, I wrote extensive unit tests for the merge() method. I wrote the unit tests using server-side JavaScript. I describe this approach to writing unit tests in this blog entry. The unit tests are included in the JavaScript Reference source code. Second, I found the following blog entry to be super useful (thanks Nick!): http://nicksnettravels.builttoroam.com/post/2010/08/03/OData-Synchronization-with-WCF-Data-Services.aspx One big challenge that I encountered involved timestamps. I originally tried to store an actual UTC time as the value of the entriesLastUpdated item. I quickly discovered that trying to work with dates in JSON turned out to be a big can of worms that I did not want to open. Next, I tried to use a SQL timestamp column. However, I learned that OData cannot handle the timestamp data type when doing a filter query. Therefore, I ended up using a bigint column in SQL and manually creating the value when a record is updated. I overrode the SaveChanges() method to look something like this: public override int SaveChanges(SaveOptions options) { var changes = this.ObjectStateManager.GetObjectStateEntries( EntityState.Modified | EntityState.Added | EntityState.Deleted); foreach (var change in changes) { var entity = change.Entity as IEntityTracking; if (entity != null) { entity.LastUpdated = DateTime.Now.Ticks; } } return base.SaveChanges(options); }   Notice that I assign Date.Now.Ticks to the entity.LastUpdated property whenever an entry is modified, added, or deleted. Summary After building the JavaScript Reference application, I am convinced that HTML5 local storage can have a dramatic impact on the performance of any data-driven web application. If you are building a web application that involves extensive interaction with data then I recommend that you take advantage of this new feature included in the HTML5 standard.

    Read the article

  • Why don't I just build the whole web app in Javascript and Javascript HTML Templates?

    - by viatropos
    I'm getting to the point on an app where I need to start caching things, and it got me thinking... In some parts of the app, I render table rows (jqGrid, slickgrid, etc.) or fancy div rows (like in the New Twitter) by grabbing pure JSON and running it through something like Mustache, jquery.tmpl, etc. In other parts of the app, I just render the info in pure HTML (server-side HAML templates), and if there's searching/paginating, I just go to a new URL and load a new HTML page. Now the problem is in caching and maintainability. On one hand I'm thinking, if everything was built using Javascript HTML Templates, then my app would serve just an HTML layout/shell, and a bunch of JSON. If you look at the Facebook and Twitter HTML source, that's basically what they're doing (95% json/javascript, 5% html). This would make it so my app only needed to cache JSON (pages, actions, and/or records). Which means you'd hit the cache no matter if you were some remote api developer accessing a JSON api, or the strait web app. That is, I don't need 2 caches, one for the JSON, one for the HTML. That seems like it'd cut my cache store down in half, and streamline things a little bit. On the other hand, I'm thinking, from what I've seen/experienced, generating static HTML server-side, and caching that, seems to be much better performance wise cross-browser; you get the graphics instantly and don't have to wait that split-second for javascript to render it. StackOverflow seems to do everything in plain HTML, and you can tell... everything appears at once. Notice how though on twitter.com, the page is blank for .5-1 seconds, and the page chunks in: the javascript has to render the json. The downside with this is that, for anything dynamic (like endless scrolling, or grids), I'd have to create javascript templates anyway... so now I have server-side HAML templates, client-side javascript templates, and a lot more to cache. My question is, is there any consensus on how to approach this? What are the benefits and drawbacks from your experience of mixing the two versus going 100% with one over the other? Update: Some reasons that factor into why I haven't yet made the decision to go with 100% javascript templating are: Performance. Haven't formally tested, but from what I've seen, raw html renders faster and more fluidly than javascript-generated html cross-browser. Plus, I'm not sure how mobile devices handle dynamic html performance-wise. Testing. I have a lot of integration tests that work well with static HTML, so switching to javascript-only would require 1) more focused pure-javascript testing (jasmine), and 2) integrating javascript into capybara integration tests. This is just a matter of time and work, but it's probably significant. Maintenance. Getting rid of HAML. I love HAML, it's so easy to write, it prints pretty HTML... It makes code clean, it makes maintenance easy. Going with javascript, there's nothing as concise. SEO. I know google handles the ajax /#!/path, but haven't grasped how this will affect other search engines and how older browsers handle it. Seems like it'd require a significant setup.

    Read the article

  • OOP - Composition, Components and Composites Example?

    - by coder3
    I've been reading a bit about OOP in relation to Composition, Components and Composites. I believe I understand the fundamental principle (not sure). Can some one please provide a code example of a person or car (both have many properties) using Composition, Components and Composites. I think seeing it in code would clear up the confusion I have regarding this pattern. Preferably in Java or PHP - many thanks!

    Read the article

  • Is there a way to play the role of Javascript with any other language like C#?

    - by Gulshan
    Is there a way to play the role of Javascript with any other language like C#? One way came up in my head is, having silverlight installed, using C# instead of Javascript for all the client side scripting (Though C# is not a scripting language). Is it possible? I am not talking about something like GWT(Java) or Script#(C#). Probably the question can be stated as- "With silverlight installed, can I do everything supported by Javascript(like DOM manipulation etc) with C#?" Hope it's clearer.

    Read the article

  • Can these game be fully coded in html5/javascript?

    - by RufioLJ
    I mean the mechanics of the game. Would it be possible? -Pokemon GBA series, rendering the world would be easy, but what about battle mechanics? -MapleStory, after seen dragonbound.net which is an identical copy of Gunbound I would think it's rather possible, but I'm still not sure if javascript can handle all the mechanics of the world. It would be heavy on resources I guess? I'm asking this because I'm really interested in html5 game develop(I really think in a future will destroy flash on game dev ground). I want to have an idea of how far games developed with the html5/javascript technology can go. I got especially inspired by dragonbound. I really think it pushes htmlt/javascript to the limits (game dev).

    Read the article

  • Do I have to learn html and javascript to create web applications?

    - by vainolo
    I am an experienced Java programmer, and I want to create a complex web application requiring dynamic pages, drawings, etc (take SO as an example). Do I have to learn javascript/html in order to create such an application? It is not that I don't want to learn another language (I've done this before), but technology on the javascript environment seems to change so fast that when you finish learning one framework it is already obsolete. I have checked a number of java framework for web development (spring, play), but not deeply. So can these frameworks (or other possible java frameworks that I'm not aware of) be used without learning html/javascript? I also have some python experience. So if I can do the app in python it is also an option.

    Read the article

  • When should I observe javascript events on window vs. document vs. document.body?

    - by brahn
    I'm using prototype.js for my web app, and I have everything running on chrome, safari, and firefox. I am now working on IE8 compatibility. As I've been debugging in IE, I've noticed that there are javascript events for which I have previously set an observer on the window, e.g. Event.observe(window, eventType, function () {...}); (where eventType might be "dom:loaded", "keypress", etc.) and it works just fine in Chrome/Safari/Firefox. However, in IE the observer never fires. In at least some cases I could get this to work on IE by instead placing the observer on something other than window, e.g. document (in the case of "dom:loaded") or document.body (in the case of "keypress"). However, this is all trial-and-error. Is there some more systematic way to determine where to place these observers such that the results will be cross-browser compatible? Thanks!

    Read the article

  • Adding scope variable to an constructor

    - by Lupus
    I'm trying to create a class like architecture on javascript but stuck on a point. Here is the code: var make = function(args) { var priv = args.priv, cons = args.cons, pub = args.pub; return function(consParams) { var priv = priv, cons = args.cons; cons.prototype.constructor = cons; cons.prototype = $.extend({}, pub); if (!$.isFunction(cons)) { throw new Hata(100001); } return new cons(consParams); } }; I'm trying to add the priv variable on the returned function objects's scope and object scope of the cons.prototype but I could not make it; Here is the usage of the make object: var myClass = make({ cons: function() { alert(this.acik); }, pub: { acik: 'acik' }, priv: { gizli: 'gizli' } }) myObj = myClass(); PS: Please forgive my english...

    Read the article

  • constructors and inheritance in JS

    - by nandinga
    Hi all, This is about "inheritance" in JavaScript. Supose I create a constructor Bird(), and another called Parrot() which I make to "inherit" the props of Bird by asigning an instance of it to Parrot's prototype, like the following code shows: function Bird() { this.fly = function(){}; } function Parrot() { this.talk = function(){ alert("praa!!"); }; } Parrot.prototype = new Bird(); var p = new Parrot(); p.talk(); // Alerts "praa!!" alert(p.constructor); // Alerts the Bird function!?!?! After I've created an instance of Parrot, how comes that the .constructor property of it is Bird(), and not Parrot(), which is the constructor I've used to create the object? Thanks!!

    Read the article

  • Class as an Event Observer

    - by emi
    I want to do something like this... var Color = Class.create({ initialize: function() { this._color = "white"; this.observe("evt: colorChanged", this.colorChanged.bind(this)); }, changeColor: function(color) { this._color = color; this.fire("evt: colorChanged"); }, colorChanged: function(event) { alert("You change my color!"); } }); var a = new Color().changeColor("blue"); Why the colorChange custom event will never be dispatched and I need to use, instead of this, a DOM element like document.observe? In my code I'd like to know which class dispatches the event using event.target and I can't if I must use document or some other DOM element. :( I've been working in Actionscript 3 and that's the methodology I learned to work with custom events in classes. What about Javascript?

    Read the article

  • Is there a design pattern for injecting methods into a class?

    - by glenn I.
    I have a set of classes that work together (I'm coding in javascript). There is one parent class and a number of child classes that are instantiated by the parent class. I have a number of clients of these classes that each need to add on one more methods to the parent or child classes. Rather than having each client inherit from these classes, which is doable but messy because of the child classes, I am having these clients pass functions into the parent class when they instantiate the main class. The main class creates the methods dynamically and the clients can call the methods like they were there all along. My questions are: is this a sensible thing to do? what would the design pattern be for what I am doing?

    Read the article

  • Use of .apply() with 'new' operator. Is this possible?

    - by Premasagar
    In JavaScript, I want to create an object instance (via the new operator), but pass an arbitrary number of arguments to the constructor. Is this possible? What I want to do is something like this (but the code below does not work): function Something(){ // init stuff } function createSomething(){ return new Something.apply(null, arguments); } var s = createSomething(a,b,c); // 's' is an instance of Something The Answer From the responses here, it became clear that there's no in-built way to call .apply() with the new operator. However, people suggested a number of really interesting solutions to the problem. My preferred solution was this one from Matthew Crumley (I've modified it to pass the arguments property): var createSomething = (function() { function F(args) { return Something.apply(this, args); } F.prototype = Something.prototype; return function() { return new F(arguments); } })();

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 21 22 23 24 25 26 27 28 29 30 31 32  | Next Page >