Search Results

Search found 15389 results on 616 pages for 'external js'.

Page 222/616 | < Previous Page | 218 219 220 221 222 223 224 225 226 227 228 229  | Next Page >

  • Eclipse (STS), Maven and maven-minify-plugin, can they work together?

    - by CodeReaper
    Hi, I am working on a project where I am in charge of html, css and javascript. I found this maven-minify-plugin that seemed to just what I wanted. Everything is good when I deploy using maven on the server, but when I am using Eclipse (STS, www.springsource.com/products/sts) to run the project on localhost no css nor js file is generated by the plugin. Does anyone have experience with this Maven plugin, so they can tell me if it should be possible or not run on localhost? Does anyone have knowledge of another plugin I can use to (combine and) minify javascript and css files when running on localhost in Eclipse and also when deploying using Maven? Any help appreciated... ----extra information---- I basicly just copied in what it said on the plugin webpage, so I have these bits in my pom.xml: .... <build> <plugins> .... <plugin> <groupId>com.samaxes.maven</groupId> <artifactId>maven-minify-plugin</artifactId> <version>1.1</version> <executions> <execution> <id>default-minify</id> <phase>process-resources</phase> <configuration> <cssFiles> .... <param>forms.css</param> <param>jquery.droppy.css</param> <param>jquery.jgrowl.css</param> </cssFiles> <jsFiles> .... <param>jquery.droppy.js</param> <param>jquery.jgrowl.js</param> </jsFiles> <jsFinalFile>script.js</jsFinalFile> <linebreak>-1</linebreak> <nomunge>false</nomunge> <verbose>false</verbose> <preserveAllSemiColons>false</preserveAllSemiColons> <disableOptimizations>false</disableOptimizations> <bufferSize>4096</bufferSize> </configuration> <goals> <goal>minify</goal> </goals> </execution> </executions> </plugin> </plugins> </build> .... Should/Can I bind the plugin to a difference phase? I just use mvn clean package and move the snapshot into tomcat to deploy on the server. I am unsure on how to explain how I run the webapp on localhost, but here goes. I have a vanilia tomcat, that I defined as a server in Eclipse and then defined that the webapp should always build in that "server".

    Read the article

  • Rails routing to XML/JSON without views gone mad

    - by John Schulze
    I have a mystifying problem. In a very simple Ruby app i have three classes: Drivers, Jobs and Vehicles. All three classes only consist of Id and Name. All three classes have the same #index and #show methods and only render in JSON or XML (this is in fact true for all their CRUD methods, they are identical in everything but name). There are no views. For example: def index @drivers= Driver.all respond_to do |format| format.js { render :json => @drivers} format.xml { render :xml => @drivers} end end def show @driver = Driver.find(params[:id]) respond_to do |format| format.js { render :json => @driver} format.xml { render :xml => @driver} end end The models are similarly minimalistic and only contain: class Driver< ActiveRecord::Base validates_presence_of :name end In routes.rb I have: map.resources :drivers map.resources :jobs map.resources :vehicles map.connect ':controller/:action/:id' map.connect ':controller/:action/:id.:format' I can perform POST/create, GET/index and PUT/update on all three classes and GET/read used to work as well until I installed the "has many polymorphs" ActiveRecord plugin and added to environment.rb: require File.join(File.dirname(__FILE__), 'boot') require 'has_many_polymorphs' require 'active_support' Now for two of the three classes I cannot do a read any more. If i go to localhost:3000/drivers they all list nicely in XML but if i go to localhost:3000/drivers/3 I get an error: Processing DriversController#show (for 127.0.0.1 at 2009-06-11 20:34:03) [GET] Parameters: {"id"=>"3"} [4;36;1mDriver Load (0.0ms)[0m [0;1mSELECT * FROM "drivers" WHERE ("drivers"."id" = 3) [0m ActionView::MissingTemplate (Missing template drivers/show.erb in view path app/views): app/controllers/drivers_controller.rb:14:in `show' ...etc This is followed a by another unexpected error: Processing ApplicationController#show (for 127.0.0.1 at 2009-06-11 21:35:52)[GET] Parameters: {"id"=>"3"} NameError (uninitialized constant ApplicationController::AreaAccessDenied): ...etc What is going on here? Why does the same code work for one class but not the other two? Why is it trying to do a #view on the ApplicationController? I found that if I create a simple HTML view for each of the three classes these work fine. To each class I add: format.html # show.html.erb With this in place, going to localhost:3000/drivers/3 renders out the item in HTML and I get no errors in the log. But if attach .xml to the URL it again fails for two of the classes (with the same error message as before) while one will output XML as expected. Even stranger, on the two failing classes, when adding .js to the URL (to trigger JSON rendering) I get the HTML output instead! Is it possible this has something to do with the "has many polymorphs" plugin? I have heard of people having routing issues after installing it. Removing "has many polymorphs" and "active support" from environment.rb (and rebooting the sever) seems to make no difference whatsoever. Yet my problems started after it was installed. I've spent a number of hours on this problem now and am starting to get a little desperate, Google turns up virtually no information which makes me suspect I must have missed something elementary. Any enlightenment or hint gratefully received! JS

    Read the article

  • jquery with ASP.NET MVC - calling ajax enabled web service

    - by dcp
    This is a bit of a continuation of a previous question. Now I'm trying to make a call to an AJAX enabled web service which I have defined within the ASP.NET MVC application (i.e. the MovieService.svc). But the service is never being called in my getMovies javascript function. This same technique of calling the AJAX web service works ok if I try it in a non ASP.NET MVC application, so it makes me wonder if maybe the ASP MVC routes are interfering with things somehow when it tries to make the AJAX web service call. Do you have any idea why my web service isn't getting called? Code below. <script src="<%= ResolveClientUrl("~/scripts/jquery-1.4.2.min.js") %>" type="text/javascript"></script> <script src="<%= ResolveClientUrl("~/scripts/grid.locale-en.js") %>" type="text/javascript"></script> <script src="<%= ResolveClientUrl("~/scripts/jquery-ui-1.8.1.custom.min.js") %>" type="text/javascript"></script> <script src="<%= ResolveClientUrl("~/scripts/jquery.jqGrid.min.js") %>" type="text/javascript"></script> <script type="text/javascript"> var lastsel2; function successFunction(jsondata) { debugger var thegrid = jQuery("#editgrid"); for (var i = 0; i < jsondata.d.length; i++) { thegrid.addRowData(i + 1, jsondata.d[i]); } } function getMovies() { debugger // ***** the MovieService#GetMovies method never gets called $.ajax({ url: 'MovieService.svc/GetMovies', data: "{}", // For empty input data use "{}", dataType: "json", type: "GET", contentType: "application/json; charset=utf-8", success: successFunction }); } jQuery(document).ready(function() { jQuery("#editgrid").jqGrid({ datatype: getMovies, colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'], colModel: [ { name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} }, { name: 'Movie Name', index: 'Name', width: 250, editable: true, editoptions: { size: 10} }, { name: 'Directed By', index: 'Director', width: 250, align: 'right', editable: true, editoptions: { size: 10} }, { name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right', editable: true, editoptions: { size: 10} }, { name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} }, { name: 'Plot', index: 'Plot', width: 150, hidden: false, editable: true, editoptions: { size: 30} }, { name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true, editable: false, editoptions: { readonly: true, size: 10} } ], pager: jQuery('#pager'), rowNum: 5, rowList: [5, 10, 20], sortname: 'id', sortorder: "desc", height: '100%', width: '100%', viewrecords: true, imgpath: '/Content/jqGridCss/redmond/images', caption: 'Movies from 2008', editurl: '/Home/EditMovieData/', caption: 'Movie List' }); $("#bedata").click(function() { var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow'); if (gr != null) jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false }); else alert("Hey dork, please select a row"); }); }); </script> <h2> <%= Html.Encode(ViewData["Message"]) %></h2> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website"> http://asp.net/mvc</a>. </p> <table id="editgrid"> </table> <div id="pager" style="text-align: center;"> </div> <input type="button" id="bedata" value="Edit Selected" /> Here's my RegisterRoutes code: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.IgnoreRoute("*MovieService.svc*"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = "" } // Parameter defaults ); } Here's what my MovieService class looks like: namespace jQueryMVC { [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class MovieService { // Add [WebGet] attribute to use HTTP GET [OperationContract] [WebGet(ResponseFormat = WebMessageFormat.Json)] public IList<Movie> GetMovies() { return Persistence.GetMovies(); } } }

    Read the article

  • error LNK2019 for ZLib sample code compiling.

    - by Nano HE
    Hello. I created win32 console application in vs2010 (without select the option of precompiled header). And I inserted the code below. but *.obj link failed. Could you provide me more information about the error. I searched MSDN, but still can't understand it. #include <stdio.h> #include "zlib.h" // Demonstration of zlib utility functions unsigned long file_size(char *filename) { FILE *pFile = fopen(filename, "rb"); fseek (pFile, 0, SEEK_END); unsigned long size = ftell(pFile); fclose (pFile); return size; } int decompress_one_file(char *infilename, char *outfilename) { gzFile infile = gzopen(infilename, "rb"); FILE *outfile = fopen(outfilename, "wb"); if (!infile || !outfile) return -1; char buffer[128]; int num_read = 0; while ((num_read = gzread(infile, buffer, sizeof(buffer))) > 0) { fwrite(buffer, 1, num_read, outfile); } gzclose(infile); fclose(outfile); } int compress_one_file(char *infilename, char *outfilename) { FILE *infile = fopen(infilename, "rb"); gzFile outfile = gzopen(outfilename, "wb"); if (!infile || !outfile) return -1; char inbuffer[128]; int num_read = 0; unsigned long total_read = 0, total_wrote = 0; while ((num_read = fread(inbuffer, 1, sizeof(inbuffer), infile)) > 0) { total_read += num_read; gzwrite(outfile, inbuffer, num_read); } fclose(infile); gzclose(outfile); printf("Read %ld bytes, Wrote %ld bytes, Compression factor %4.2f%%\n", total_read, file_size(outfilename), (1.0-file_size(outfilename)*1.0/total_read)*100.0); } int main(int argc, char **argv) { compress_one_file(argv[1],argv[2]); decompress_one_file(argv[2],argv[3]);} Output: 1>------ Build started: Project: zlibApp, Configuration: Debug Win32 ------ 1> zlibApp.cpp 1>d:\learning\cpp\cppvs2010\zlibapp\zlibapp\zlibapp.cpp(15): warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details. 1> c:\program files\microsoft visual studio 10.0\vc\include\stdio.h(234) : see declaration of 'fopen' 1>d:\learning\cpp\cppvs2010\zlibapp\zlibapp\zlibapp.cpp(25): warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details. 1> c:\program files\microsoft visual studio 10.0\vc\include\stdio.h(234) : see declaration of 'fopen' 1>d:\learning\cpp\cppvs2010\zlibapp\zlibapp\zlibapp.cpp(40): warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details. 1> c:\program files\microsoft visual studio 10.0\vc\include\stdio.h(234) : see declaration of 'fopen' 1>d:\learning\cpp\cppvs2010\zlibapp\zlibapp\zlibapp.cpp(36): warning C4715: 'decompress_one_file' : not all control paths return a value 1>d:\learning\cpp\cppvs2010\zlibapp\zlibapp\zlibapp.cpp(57): warning C4715: 'compress_one_file' : not all control paths return a value 1>zlibApp.obj : error LNK2019: unresolved external symbol _gzclose referenced in function "int __cdecl decompress_one_file(char *,char *)" (?decompress_one_file@@YAHPAD0@Z) 1>zlibApp.obj : error LNK2019: unresolved external symbol _gzread referenced in function "int __cdecl decompress_one_file(char *,char *)" (?decompress_one_file@@YAHPAD0@Z) 1>zlibApp.obj : error LNK2019: unresolved external symbol _gzopen referenced in function "int __cdecl decompress_one_file(char *,char *)" (?decompress_one_file@@YAHPAD0@Z) 1>zlibApp.obj : error LNK2019: unresolved external symbol _gzwrite referenced in function "int __cdecl compress_one_file(char *,char *)" (?compress_one_file@@YAHPAD0@Z) 1>D:\learning\cpp\cppVS2010\zlibApp\Debug\zlibApp.exe : fatal error LNK1120: 4 unresolved externals ========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

    Read the article

  • Problem with jQuery plugin TinySort

    - by Volmar
    I'm trying to sort a list with the help of jQuery and the TinySort-plugin, and it works good but one thing is not working as i want. My Code is: <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>TinySort problem</title> <script type="text/javascript" src="http://so.volmar.se/www/js/jquery.js"></script> <script type="text/javascript" src="http://so.volmar.se/www/js/jquery.tinysort.min.js"></script> <script type="text/javascript"> function pktsort(way){ if($("div#paket>ul>li.sortdiv>a#s_abc").text() == "A-S"){ $("div#paket>ul>li.sortdiv>a#s_abc").text("S-A"); $("div#paket ul li.sortable").tsort("",{place:"org",returns:true,order:"desc"}); }else{ $("div#paket>ul>li.sortdiv>a#s_abc").text("A-S"); $("div#paket ul li.sortable").tsort("",{place:"org",returns:true,order:"asc"}); } } </script> </head> <body> <div id="paket" title="Paket"> <ul class="rounded"> <li class="sortdiv">Sort: <a href="#" onclick="pktsort();" class="active_sort" id="s_abc">A-S</a></li> <li class="sortable">Almost Famous</li> <li class="sortable">Children of Men</li> <li class="sortable">Coeurs</li> <li class="sortable">Colossal Youth</li> <li class="sortable">Demonlover</li> <li class="sortable">Femme Fatale</li> <li class="sortable">I'm Not There</li> <li class="sortable">In the City of Sylvia</li> <li class="sortable">Into the Wild</li> <li class="sortable">Je rentre à la maison</li> <li class="sortable">King Kong</li> <li class="sortable">Little Miss Sunshine</li> <li class="sortable">Man on Wire</li> <li class="sortable">Milk</li> <li class="sortable">Monsters Inc.</li> <li class="sortable">My Winnipeg</li> <li class="sortable">Ne touchez pas la hache</li> <li class="sortable">Nói albinói</li> <li class="sortable">Regular Lovers</li> <li class="sortable">Shaun of the Dead</li> <li class="sortable">Silent Light</li> <li class="addmore"><b>This text is not supposed to move</b></li> </ul> </div> </body> </html> you can try it out at: http://www.volmar.se/list-prob.html MY PROBLEM IS: I don't want the <li class="addmore"> to move above all the <li class="sortable">-elements when i press the sort-link. i wan't it to always be in the bottom. you can find documentation of the TinySort plugin here. i've tried loads of combinations with place and returns propertys but i just can't get it right.

    Read the article

  • Break a class in twain, or impose an interface for restricted access?

    - by bedwyr
    What's the best way of partitioning a class when its functionality needs to be externally accessed in different ways by different classes? Hopefully the following example will make the question clear :) I have a Java class which accesses a single location in a directory allowing external classes to perform read/write operations to it. Read operations return usage stats on the directory (e.g. available disk space, number of writes, etc.); write operations, obviously, allow external classes to write data to the disk. These methods always work on the same location, and receive their configuration (e.g. which directory to use, min disk space, etc.) from an external source (passed to the constructor). This class looks something like this: public class DiskHandler { public DiskHandler(String dir, int minSpace) { ... } public void writeToDisk(String contents, String filename) { int space = getAvailableSpace(); ... } public void getAvailableSpace() { ... } } There's quite a bit more going on, but this will do to suffice. This class needs to be accessed differently by two external classes. One class needs access to the read operations; the other needs access to both read and write operations. public class DiskWriter { DiskHandler diskHandler; public DiskWriter() { diskHandler = new DiskHandler(...); } public void doSomething() { diskHandler.writeToDisk(...); } } public class DiskReader { DiskHandler diskHandler; public DiskReader() { diskHandler = new DiskHandler(...); } public void doSomething() { int space = diskHandler.getAvailableSpace(...); } } At this point, both classes share the same class, but the class which should only read has access to the write methods. Solution 1 I could break this class into two. One class would handle read operations, and the other would handle writes: // NEW "UTILITY" CLASSES public class WriterUtil { private ReaderUtil diskReader; public WriterUtil(String dir, int minSpace) { ... diskReader = new ReaderUtil(dir, minSpace); } public void writeToDisk(String contents, String filename) { int = diskReader.getAvailableSpace(); ... } } public class ReaderUtil { public ReaderUtil(String dir, int minSpace) { ... } public void getAvailableSpace() { ... } } // MODIFIED EXTERNALLY-ACCESSING CLASSES public class DiskWriter { WriterUtil diskWriter; public DiskWriter() { diskWriter = new WriterUtil(...); } public void doSomething() { diskWriter.writeToDisk(...); } } public class DiskReader { ReaderUtil diskReader; public DiskReader() { diskReader = new ReaderUtil(...); } public void doSomething() { int space = diskReader.getAvailableSpace(...); } } This solution prevents classes from having access to methods they should not, but it also breaks encapsulation. The original DiskHandler class was completely self-contained and only needed config parameters via a single constructor. By breaking apart the functionality into read/write classes, they both are concerned with the directory and both need to be instantiated with their respective values. In essence, I don't really care to duplicate the concerns. Solution 2 I could implement an interface which only provisions read operations, and use this when a class only needs access to those methods. The interface might look something like this: public interface Readable { int getAvailableSpace(); } The Reader class would instantiate the object like this: Readable diskReader; public DiskReader() { diskReader = new DiskHandler(...); } This solution seems brittle, and prone to confusion in the future. It doesn't guarantee developers will use the correct interface in the future. Any changes to the implementation of the DiskHandler could also need to update the interface as well as the accessing classes. I like it better than the previous solution, but not by much. Frankly, neither of these solutions seems perfect, but I'm not sure if one should be preferred over the other. I really don't want to break the original class up, but I also don't know if the interface buys me much in the long run. Are there other solutions I'm missing?

    Read the article

  • jQuery tablesorter sorting not working

    - by jknox
    I'm using jQuery tablesorter plugin to generate dynamically a table from a csv file, and that part is working fine. However whenever i try to sort the table by clicking on the table headers, firebug reports this problem in the console: parsers is undefined return parsers[i].type;\n Initially i though this problem was being caused by the table not being ready after the document loads, so i fixed that by manually calling tablesorter() after my table was rendered from the csv file. this didn't fix the issue though. Also, at the very end of the table, the table is drawn garbled with some gray areas at the end. I suppose this is related to the error above. The code in question is this: <html> <head> <link rel="stylesheet" href="blue/style.css" type="text/css" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript" src="jquery.csv.js"></script> <script type="text/javascript" id="js"> function sortThis() { $("#myTable").tablesorter({ // sortList:[[0,0],[2,1]] }); }; </script> <title>huh!?</title> </head> <body> <table id="myTable" class="tablesorter" cellspacing="1" cellpadding="0" border="0"> <thead> <tr> <th>name</th> <th>type</th> <th>Date</th> </tr> </thead> <tbody> <script type="text/javascript"> $.get('myfile.csv', function(data) { myfile = jQuery.csv()(data) for (var x = 0; x < myfile.length; x++) { str = "<tr>"; for (var y = 0; y < myfile[x].length; y++) { str += "<td>" + myfile[x][y] + "</td>"; } str += "</tr>"; $('#myTable').append(str); } }); sortThis(); </script> </tbody> </table> </body> </html> Thanks in advance for your help.

    Read the article

  • jQuery gallery scrolling effect with ease

    - by Sebastian Otarola
    So, I got this page from a friend and I think the gallery is amazingly done. Too bad it's in Flash ; http://selected.com/en/#/collection/homme/ Now, I'm trying to replicate the effect with jQuery. I've made all the loco searches on google one could think of. Zooming the picture is not a problem, the problem lies within the scrolling, how they come together at the ease part. I'm looking for solution in how to make the thumbnail animate when you scroll the page, they drag behind and infront of each other in a very subtle way - I've got (With a lot of help from Whirl3d in the jQuery-irc channel) this for the scrollup/down part of the mouse but the scrolling goes haywire; I Thought I post it here where I've come many times to get answers to a lot of questions and code-errors. This is my first post in stackoverflow and I know you guys are geniuses! Give it a shot! Thanks in advance! jQuery Part $(document).ready(function() { var fronts=$(".front"); var backs=$(".back"); var tempScrollTop, currentScrollTop = 0; $(document).scroll(function () { currentScrollTop = $(document).scrollTop(); if (tempScrollTop < currentScrollTop) { //Scroll down fronts.animate({marginTop:"-=100"},{duration:500, queue:false, easing:"easeOutBack"}); backs.animate({marginTop:"-=100"}, {duration:300, queue:false, easing:"easeOutBack"}); console.log('scroll down'); } else if (tempScrollTop > currentScrollTop) { //scroll up fronts.animate({marginTop:"+=100"},{duration:500, queue:false, easing:"easeOutBack"}); backs.animate({marginTop:"+=100"}, {duration:300, queue:false, easing:"easeOutBack"}); console.log('scroll up'); } tempScrollTop = currentScrollTop ;}) ;}); The HTML <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://www.paigeharvey.net/assets/js/jquery.easing.js"></script> <script type="text/javascript" src="gallery.js"></script> <title>Parallax testing image gallery</title> </head> <body> <div class="container"> <div class='box front'>First Group</div> <div class='box back'>First Group</div> <div class='box front'>First Group</div> <div class='box back'>First Group</div> <br style="clear:both"/> <div class='box front'>Second Group</div> <div class='box back'>Second Group</div> <div class='box front'>Second Group</div> <div class='box back'>Second Group</div> <br style="clear:both"/> <div class='box front'>Third Group</div> <div class='box back'>Third Group</div> <div class='box front'>Third Group</div> <br style="clear:both"/> </div> </body> And finally the CSS Part .container {margin: auto; width: 410px; border: 1px solid red;} .box.front{border: 1px solid red;background-color:Black;color:white;z-Index:500;} .box.back {border: 1px solid green;z-Index:300;background-color:white;} .box {float:left; text-align:center; width:100px; height:100px;}

    Read the article

  • Using AJAX to display error message Ruby on Rails

    - by bgadoci
    I have built a blog using Ruby on Rails. New to both. I am implementing AJAX pretty effectively until I get to the error handling portion. I allow for comments on posts and do this by rendering a comment partial and remote form in the /views/posts/show.html.erb page. Upon successful save of a comment the show page is updated using views/comments/create.js.rjs and displays a flash notice. I am simply trying to flash a notice when it doesn't save. Searched around and worked this a bit on my own. Can't get it to fly. Here is my code: /views/posts/show.html.erb <div id="comments"> <%= render :partial => @post.comments %> <div id="notice"><%= flash[:notice] %></div> </div> <% remote_form_for [@post, Comment.new] do |f| %> <p> <%= f.label :body, "New Comment" %><br/> <%= f.text_area (:body, :class => "textarea") %> </p> <p> <%= f.label :name, "Name" %><br/> <%= f.text_field (:name, :class => "textfield") %> </p> <p> <%= f.label :email, "Email" %><br/> <%= f.text_field (:email, :class => "textfield") %> </p> <p><%= f.submit "Add Comment" %></p> <% end %> /views/comments/_comment.html.erb <% div_for comment do %> <div id="comment-wrapper"> <% if admin? %> <div id="comment-destroy"><%=link_to_remote "X", :url => [@post, comment], :method => :delete %></div> <% end %> <%= h(comment.body) %><br/><br/> <div class="small">Posted <%= time_ago_in_words(comment.created_at) %> ago by <%= h(comment.name) %> <% if admin? %> | <%= h(comment.email) %> <% end %></div> </div> <% end %> /views/comments/create.js.rjs page.insert_html :bottom, :comments, :partial => @comment page[@comment].visual_effect :highlight page[:new_comment].reset page.replace_html :notice, flash[:notice] flash.discard CommentsController#create def create @post = Post.find(params[:post_id]) @comment = @post.comments.create!(params[:comment]) respond_to do |format| if @comment.save flash[:notice] = "Thanks for adding this comment" format.html { redirect_to @post } format.js else flash[:notice] = "Make sure you include your name and a valid email address" format.html { redirect_to @post } format.js end end end

    Read the article

  • can't implement jquery jScrollPane to replace browser's scrollbars

    - by Zack
    I am trying to replace browser's scrollbars with jScrollPane (jQuery), it won't work. Here are two attempts to implement it: a basic attempt, and an attempt to imitate the full page demo for jScrollPane. I've been trying everything I could think of to figure out what didn't work, but couldn't. here is my code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <!-- styles needed by jScrollPane --> <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <style type="text/css" id="page-css"> /* Styles specific to this particular page */ html { overflow: auto; } #full-page-container { overflow: auto; } .scroll-pane { width: 100%; height: 200px; overflow: auto; } .horizontal-only { height: auto; max-height: 200px; } </style> <!-- latest jQuery direct from google's CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- the mousewheel plugin --> <script type="text/javascript" src="script/jquery.mousewheel.js"></script> <!-- the jScrollPane script --> <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script> <script type="text/javascript" id="sourcecode"> $(function () { var win = $(window); // Full body scroll var isResizing = false; win.bind( 'resize', function () { if (!isResizing) { isResizing = true; var container = $('#full-page-container'); // Temporarily make the container tiny so it doesn't influence the // calculation of the size of the document container.css( { 'width': 1, 'height': 1 } ); // Now make it the size of the window... container.css( { 'width': win.width(), 'height': win.height() } ); isResizing = false; container.jScrollPane( { 'showArrows': true } ); } } ).trigger('resize'); // Workaround for known Opera issue which breaks demo (see // http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar ) $('body').css('overflow', 'hidden'); // IE calculates the width incorrectly first time round (it // doesn't count the space used by the native scrollbar) so // we re-trigger if necessary. if ($('#full-page-container').width() != win.width()) { win.trigger('resize'); } }); </script> </head> <body> <div id="full-page-container"> This is the most basic implementation of jScrollPane I could create, if I am not wrong this has all it should take, yet it doesn't work. a little lorem ipsum to make the scrollbars show up: [here come's lot's of lorem ipsum text in the actual page...] </div> </body> </html> The other option is the same, with a link to demo.css and demo.js.

    Read the article

  • Events do not propagate from a child element?

    - by Legend
    I was playing around with the Swipe jQuery plugin on my iPod Touch and Android devices. The following works: <html> <head> <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="lib/plugins/jquery.swipe.js"></script> <script type="text/javascript"> $(function() { $('body').swipe({ swipeLeft: function() { $('#container1').append("Swiped Left!"); }, swipeRight: function() { $('#container2').append("Swiped Right!");} }); }); </script> <style type="text/javascript"> body {width: 300px; height: 300px; background: #000;} </style> </head> <body> <div id="container1"> This is container one </div> <div id="container2"> This is container two </div> </body> </html> But if I have something like this: <html> <head> <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="lib/plugins/jquery.swipe.js"></script> <script type="text/javascript"> $(function() { $('#wrapper').swipe({ swipeLeft: function() { $('#container1').append("Swiped Left!"); }, swipeRight: function() { $('#container2').append("Swiped Right!");} }); }); </script> <style type="text/javascript"> body {width: 300px; height: 300px; background: #000;} </style> </head> <body> <div id="wrapper"> <div id="container1"> This is container one </div> <div id="container2"> This is container two </div> </div> </body> </html> Notice the "wrapper" div around the containers. Now, when I swipe on the div element, I was expecting it to actually trigger the event. This works in iPod touch as expected but does not work on my Android device unless I randomly start swiping everywhere until I happen to swipe on that small wrapper div element itself. I am not sure how to explain this but hink of it as sending events to the wrapper div itself. Both use the WebKit engine. Can someone tell me if I am doing something wrong?

    Read the article

  • Problems re-populating select options in Rails when form returned with errors

    - by Rick
    I have a form with 2 select options in it -- frequency and duration. When there are errors with the form, and it is returned to the browser, the select options are not re-populated with the selections the user made even though the returned values for those fields match the values of options in the selects. Also, when the form is returned, these fields are not marked as having errors even though their values are blank. Here's the frequency and duration fields in Rails <%= frequency_select c, :frequency %> <%= duration_select c, :duration %> The method for frequency_select is def frequency_select(f, method) options = [["day", 1.day], ["other day", 2.days], ["week", 1.week]] f.select method, options, :include_blank => true end And the method for duration_select is def duration_select(f, method, unit="day" ) values, units = *case unit when "day" : [[[5, 5], [15, 15], [30, 29]], "days"] when "other day" : [[[15, 15], [30, 29], [45,45]], "days"] when "week" : [[[4, 29], [6, 43], [8, 57]], "weeks"] end f.select method, values.map {|(label, i)| ["#{label} #{units}", i.days]}, :include_blank => true end If you enter a value into one or both of these fields and submit the form without completing part of it (any part of it), the form is returned to the user (as would be expected), but the duration and frequency fields are not re-populated with the user's selection. If I add this bit of code to the form <p><%= @challenge.attributes.inspect %></p> I see that this for duration and frequency when the form is returned to the browser: "duration"=>3888000, "frequency"=>172800 These values match values on the options in the select fields. Is there anything special in Rails that needs to be done so that the select fields are re-populated with the user's selections? Any thoughts on what the problem could be or what I should try next? Help is greatly appreciated! -Rick PS If you look at some of the other questions, you'll notice I've asked about this in the past. At one point, I thought the form was returning values for frequency and duration in days rather than seconds, but that's not the case. PPS Here's one other bit of information that might matter, but my tests indicate that it probably does not. (Though, I'm a bit of a newbie to this, so don't take my word for it.) These two fields are chained together using the cascade jquery plugin. The javascript is included on the page (not in a separate file) and some of the js is being created by Rails. First, here are the scripts as they appear in the browser. The first is the script to generate the options for the duration select and the second is the script required by the Cascade plugin to trigger the field chaining. <script type="text/javascript"> var list1 = [ {'When':'86400','Value':' ','Text':' '}, {'When':'172800','Value':' ','Text':' '}, {'When':'604800','Value':' ','Text':' '}, {'When':'86400','Value':'432000','Text':'5 days'}, {'When':'86400','Value':'1296000','Text':'15 days'}, {'When':'86400','Value':'2505600','Text':'30 days'}, {'When':'172800','Value':'1296000','Text':'15 days'}, {'When':'172800','Value':'2505600','Text':'30 days'}, {'When':'172800','Value':'3888000','Text':'45 days'}, {'When':'604800','Value':'2505600','Text':'4 weeks'}, {'When':'604800','Value':'3715200','Text':'6 weeks'}, {'When':'604800','Value':'4924800','Text':'8 weeks'} ]; function commonTemplate(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; }; function commonMatch(selectedValue) { return this.When == selectedValue; }; </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#challenge_duration, #user_challenge_duration").cascade("#challenge_frequency, #user_challenge_frequency",{ list: list1, template: commonTemplate, match: commonMatch }) }); </script> And here's a bit of the the first script as it is in the erb file -- you see that some of the script is being generated by Rails <%= [ [1.day, [[5, 5], [15,15], [30, 29]], "days"], [2.days, [[15, 15], [30, 29], [45, 45]], "days"], [1.week, [[4, 29], [6, 43], [8, 57]], "weeks"]].map do |(frequency, durations, unit)| durations.map do |(label, value)| "{'When':'#{frequency}','Value':'#{value.days}','Text':'#{label} #{unit}'}" end end.join(",\n") -%> Now, the reason I don't think that it matters whether the duration is being generated with JS is the problem still exists if I remove all the JS the problem also affects the frequency field, whose options are not being generated by the JS

    Read the article

  • Is this a SEO SAFE anchor link

    - by Mayhem
    so... Is this a safe way to use internal links on your site.. By doing this i have the index page generating the usual php content section and handing it to the div element. THE MAIN QUESTION: Will google still index the pages using this method? Common sense tells me it does.. But just double checking and leaving this here as a base example as well if it is. As in. EXAMPLE ONLY PEOPLE The Server Side if (isset($_REQUEST['page'])) {$pageID=$_REQUEST['page'];} else {$pageID="home";} if (isset($_REQUEST['pageMode']) && $_REQUEST['pageMode']=="js") { require "content/".$pageID.".php"; exit; } // ELSE - REST OF WEBSITE WILL BE GENERATED USING THE page VARIABLE The Links <a class='btnMenu' href='?page=home'>Home Page</a> <a class='btnMenu' href='?page=about'>About</a> <a class='btnMenu' href='?page=Services'>Services</a> <a class='btnMenu' href='?page=contact'>Contact</a> The Javascript $(function() { $(".btnMenu").click(function(){return doNav(this);}); }); function doNav(objCaller) { var sPage = $(objCaller).attr("href").substring(6,255); $.get("index.php", { page: sPage, pageMode: 'js'}, function(data) { ("#siteContent").html(data).scrollTop(0); }); return false; } Forgive me if there are any errors, as just copied and pasted from my script then removed a bunch of junk to simplify it as still prototyping/white boarding the project its in. So yes it does look a little nasty at the moment. REASONS WHY: The main reason is bandwidth and speed, This will allow other scripts to run and control the site/application a little better and yes it will need to be locked down with some coding. -- FURTHER EXAMPLE-- INSERT PHP AT TOP <?php // PHP CODE HERE ?> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scripts.js"></script> </head> <body> <div class='siteBody'> <div class='siteHeader'> <?php foreach ($pageList as $key => $value) { if ($pageID == $key) {$btnClass="btnMenuSel";} else {$btnClass="btnMenu";} echo "<a class='$btnClass' href='?page=".$key."'>".$pageList[$key]."</a>"; } ?> </div><div id="siteContent" style='margin-top:10px;'> <?php require "content/".$pageID.".php"; ?> </div><div class='siteFooter'> </div> </div> </body> </html>

    Read the article

  • Sencha Touch 2 - Can't get list to display // or load a store? [UPDATED X2]

    - by Jordan
    I have been trying to get a list to display for quite a while now. I have tried all sorts of tips from various people without success. Now I am running into a new problem. I have taken the exact code from an example and I can't seem to get it to work either. First of all, here is the code. Station.js Ext.define('Syl.model.Station', { extend: 'Ext.data.Model', config: { fields: [ { name: 'id', type: 'string' }, { name: 'stop', type: 'string' } ] } }); Stations.js Ext.define('Syl.store.Stations', { extend : 'Ext.data.Store', requires: ['Syl.model.Station'], id: 'stations', xtype: 'stations', config : { model : 'Syl.model.Station', //storeId: 'stationsStore', autoLoad : true, //sorters: 'stop', /* proxy: { type: 'ajax', url: 'stations.json' }*/ data: [ { "id": "129", "stop": "NY Station" }, { "id": "13", "stop": "Newark Station" } ] } }); MyService.js Ext.define('Syl.view.MyService', { extend: 'Ext.Panel', xtype: 'stationsformPage', requires: [ 'Syl.store.Stations', 'Ext.form.FieldSet', 'Ext.field.Password', 'Ext.SegmentedButton', 'Ext.List' ], config: { fullscreen: true, layout: 'vbox', //iconCls: 'settings', //title: 'My Service', items: [ { docked: 'top', xtype: 'toolbar', title: 'My Service' }, { [OLDER CODE BEGIN] xtype: 'list', title: 'Stations', //store: 'Stations', store: stationStore, //UPDATED styleHtmlContent: true, itemTpl: '<div><strong>{stop}</strong> {id}</div>' [OLDER CODE END] [UPDATE X2 CODE BEGIN] xtype: 'container', layout: 'fit', flex: 10, items: [{ xtype: 'list', title: 'Stations', width: '100%', height: '100%', store: stationStore, styleHtmlContent: true, itemTpl: '<div><strong>{stop}</strong> {id}</div>' }] [UPDATE X2 CODE END] }, ] } }); app.js (edited down to the basics) var stationStore; //UPDATED Ext.application({ name: 'Syl', views: ['MyService'], store: ['Stations'], model: ['Station'], launch: function() { stationStore = Ext.create('Syl.store.Stations');//UPDATED var mainPanel = Ext.Viewport.add(Ext.create('Syl.view.MyService')); }, }); Okay, now when I run this in the browser, I get this error: "[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found". The app runs but there is no list. I can't understand how this code could work for the people who gave the example and not me. Could it be a difference in the Sencha Touch version? I am using 2.0.1.1. To add to this, I have been having problems in general with lists not displaying. I had originally tried a stripped down list without even having a store. I tried to just set the data property in the list's config. I didn't get this error, but I also didn't get a list to display. That is why I thought I would try someone else's code. I figured if I could at least get a working list up and running, I could manipulate it into doing what I want. Any help would be greatly appreciated. Thanks. [UPDATED] Okay, so I did some more hunting and someone told me I needed to have an instance of my store to load into the list, not the store definition. So I updated the code as you can see and the error went away. The problem is that I still don't get a list. I have no errors at all, but I can't see a list. Am I not loading the data correctly? Or am I not putting the list in the view correctly? [UPDATED X2] Okay, so I learned that the list should be in a container and that I should give it a width and a height. I'm not totally sure on this being correct, but I do now have a list that I can drag up and down. The problem is there is still nothing in it. Anyone have a clue why?

    Read the article

  • Jquery mobile ajax request not working after 4-5 request is made in Android

    - by Coder_sLaY
    I am developing an application using jQuery mobile 1.1.0 RC1 and phonegap 1.5.0 I have a single HTML page which contains all the pages in it as a div(through data-role="page") here is my code <!DOCTYPE HTML> <html> <head> <title>Index Page</title> <!-- Adding viewport --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Adding Phonegap scripts --> <script type="text/javascript" charset="utf-8" src="cordova/cordova-1.5.0.js"></script> <!-- Adding jQuery mobile and jQuery scripts & CSS --> <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script> <link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0-rc.1.min.css" /> <script type="text/javascript" src="jquery/jquery.validate.min.js"></script> <script type="text/javascript" src="jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"></script> <link rel="stylesheet" href="css/colors.css"> <script type="text/javascript"> function page1(){ $.mobile.changePage("#page2", { transition : "slide" }); } function page2(){ $.mobile.changePage("#page1", { transition : "slide" }); } $("#page1").live("pageshow", function(e) { $.ajax({ type : 'GET', cache : false, url : "http://192.168.1.198:9051/something.xml" + "?time=" + Date.now(), data : { key : "value" }, dataType : "xml", success : function(xml) { console.log("Success Page1"); }, error : function(xhr) { } }); }); $("#page2").live("pageshow", function(e) { $.ajax({ type : 'GET', cache : false, url : "http://192.168.1.198:9051/something.xml" + "?time=" + Date.now(), data : { key : "value" }, dataType : "xml", success : function(xml) { console.log("Success Page2"); }, error : function(xhr) { } }); }); </script> <body> <div data-role="page" id="page1"> <div data-role="header">Page 1</div> <div data-role="content"> <input type="text" name="page1GetTime" id="page1GetTime" value="" /><a href="#" data-role="button" onclick="page1()" id="gotopage2"> Go to Page 2 </a> </div> </div> <div data-role="page" id="page2"> <div data-role="header">Page 2</div> <div data-role="content"> <input type="text" name="page2GetTime" id="page2GetTime" value="" /><a href="#" data-role="button" onclick="page2()" id="gotopage1">Go to Page 1</a> </div> </div> </body> Now when i click to "Go to page2" then page2 will be shown along with one ajax request .. If i keep on moving from one page to another then a ajax request is made.. This request stops responding after 4 to 5 request... Why is it happening?

    Read the article

  • Simplemodal: four times on a page leads to extra "next" or "previous" button

    - by DDF
    We are experiencing a problem with each instance of the call to the simplemodal div class .basic-modal-content adding an extra next or previous button in the modal windows. We are using simplemodal in four places on a page using a common JS in the container (provided below) and a common CSS format for the modal windows. In one area we are using six "statements" in a window with a next and previous button. I would include a picture of the modal window but it's being disallowed by the system as I'm a first time poster to this forum. In the other three areas we are using three "biographies" in a similar window with the ability to see each of the three bios from each of modal windows. We are using a common Simplemodal JS script in the page which has the following code: <script> $(function() { $('a').each(function() { $(this).click(function() { $('#modal_' + this.id).modal({ overlayClose:true }); }); }); var num_divs = $('div.basic-modal-content').length; $('div.basic-modal-content').each(function(i) { /* if there is a previous div add a link to it */ if (i > 0) { /* get the ID for previous div */ var prev_id = $(this).prev('.basic-modal-content').attr('id'); /* add the link with click event */ $('<a href="#" class="simplemodal-container-prev"></a>') .click(function() { $.modal.close(); $('#' + prev_id).modal({overlayClose:true}); }) .appendTo($(this)); } /* if there is a next div add a link to it */ if (i < num_divs - 1) { /* get the ID for next div */ var next_id = $(this).next('.basic-modal-content').attr('id'); /* add the link with click event */ $('<a href="#" class="simplemodal-container-next"></a>') .click(function() { $.modal.close(); $('#' + next_id).modal({overlayClose:true}); }) .appendTo($(this)); } }); }); </script> and some CSS to create an image for each window that shows the progress bar through the ul/li list. The code to produce the above looks like this: <h1>Our HEADLINE</h1> <div id='basic-modal'> <ul> <li><a href='#' id='one'>TEXT 1</a></li> <li><a href='#' id='two'>TEXT 2</a></li> <li><a href='#' id='three'>TEXT 3</a></li> <li><a href='#' id='four'>TEXT 4</a></li> <li><a href='#' id='five'>TEXT 5</a></li> <li><a href='#' id='six'>TEXT 6</a></li> </ul> </div> <div class="basic-modal-content" id="modal_one"> <img src="link to modal_one.png" alt="progress bar"/> <h3>headline text</h3> <p>body text</p> </div> <div class="basic-modal-content" id="modal_two"> <img src="link to modal_two.png" alt="progress bar"/> <h3>headline text</h3> <p>body text</p> </div> <div> ... other divs 3 4 and 5 </div> <div class="basic-modal-content" id="modal_six"> <img src="link to modal_six.png" alt="progress bar"/> <h3>headline text</h3> <p>body text</p> </div> </div> The ul/li structure works on the main page for the links. The modal windows allow one to browse through all of the six TEXTs. There is a common CSS style to the windows and a custom image in each of the modal windows derived from the "#modal_[number] img" CSS in the form of a progress bar. It should be noted that the first modal window in the first set of ul/li (the six) do not exhibit the extra previous button. Here is the relevant code from one of the three biographic links. You will note that the biographic links each have to have all three in this current configuration. <h4>Our HEADLINE</h4> <div class="bottom-widget-text"> <img src="picture" alt="not relevant to the simplemodal problem"/> <p>Read about person NUMBER 1 by clicking on the following link: <a href='#' id='seven' >Expand</a> </p> </div> <div class="basic-modal-content" id="modal_seven"> <img src="link to modal_seven.png" alt="portrait 1"/> <h3>headline text</h3> <p>BIOGRAPHY</p> </div> <div class="basic-modal-content" id="modal_eight"> <img src="link to modal_eight.png" alt="portrait 2"/> <h3>headline text</h3> <p>BIOGRAPHY</p> </div> <div class="basic-modal-content" id="modal_nine"> <img src="link to modal_nine.png" alt="portrait 3"/> <h3>headline text</h3> <p>BIOGRAPHY</p> </div> </div> Similarly the "biographies" open up from a different area of the page. The modal windows allow one to browse through all three of the BIOs. The bios use the SAME CSS style windows and a custom image in each of the modal windows derived from the "#modal_[number] img" CSS in the form of a portrait. Everything is working well except one thing: the first six windows have an extra next button that leads to an image of the close widow button only. Similarly, the BIOs pages have extra previous button that leads to the same "close button only" shown above. We want to maintain the same base CSS for the modal windows for this page. We want to keep the JS simple. The only behavior that is bad is the extra previous and next bottons that appear to be spurious. So is this a fix to the JS? Or do I have the instances of the modal windows too entangled? Perhaps there is a better method for having multiple instances of a simplemodal window on the same page? Or is the problem the "#" variable being common to each of the uses of the JS? Thanks in advance. DDF

    Read the article

  • JSON object array to store data of a form in local storage temporary (PhoneGap project)

    - by Nadeesha
    I am building a data aqusition system using PhoneGap. .I am trying to store my form data temporary on local storage using JSON,Data should be visible after I close and reopen the application (after pressing Get Data button),But after I close it only the lastly entered record is visible This is my code <!DOCTYPE html> <html> <head> <title>Household Profile DB storage</title> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,width=device-width" /> <link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css"> <link rel="stylesheet" href="css/table.css"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> <script type="text/javascript" src="js/iscroll.js"></script> <script type="text/javascript" charset="utf-8"> function onDeviceReady() { persistData(homeId,owner,gramaND,contactNo,address,race); } function saveLocal(form){ if (window.localStorage) { var fhomeId = form.homeId.value, fowner = form.owner.value, fgramaND = form.gramaND.value, fcontactNo= form.contactNo.value, faddress = form.address.value, frace = form.race.value; alert("hi"); var highscores = [{"homeId": fhomeId, "owner":fowner, "gramaND":fgramaND, "contactNo":fcontactNo, "address":faddress, "race":frace}]; localStorage.setItem("highscores",JSON.stringify(highscores)); alert("The data has been stored successfully."); } else { alert("Your Browser does not support LocalStorage."); } } function readLocal(){ if (window.localStorage) { var scores =[]; //Get the highscores object scores = localStorage.getItem("highscores"); scores = JSON.parse(scores); for (i=0;i<scores.length;i++){ var text = "homeId :"+scores[i].homeId +"<br>"+ "owner:"+ scores[i].owner+"<br>"+ "address"+scores[i].address +"<br>"+ "gramaND"+scores[i].gramaND +"<br>"+ "contactNo"+scores[i].contactNo+"<br>" + '<Button value="DELETE" onclick="'+scores.splice(i, 0)+'><>/Button>'; var tbodyx = document.getElementsByTagName("tbody"); var tr=document.createElement("TR"); var td=document.createElement("TD"); td.innerHTML = text; tr.appendChild(td); tbody.appendChild(tr); } } } </script> </head> <body> <div data-role="page" id="page1"> <!--/header--> <div data-role="header" data-position="inline" data-theme="b"> <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a> <h1>Household Profile</h1> <a href="index.html" data-icon="home">Menu</a> </div> <!--/header--> <div id="wrapper"> <form id="userInput" action ="" method="GET"> <div data-role="content"> <div data-role="fieldcontain"> <label > Home ID </label> <input class="inputClass" id="homeId" placeholder="H0001" value="" data-mini="true" type="text"> </div> <div data-role="fieldcontain"> <label > Owner </label> <input class="inputClass" id="owner" placeholder="Aberathne" value="" type="text"> </div> <div data-role="fieldcontain"> <label class="select">GramaNiladhari Division</label> <select class="inputClass" id="gramaND"> <option value="GramaNiladhari Division 1">GramaNiladhari Division 1</option> <option value="GramaNiladhari Division 2">GramaNiladhari Division 2</option> <option value="GramaNiladhari Division 3">GramaNiladhari Division 3</option> <option value="GramaNiladhari Division 4">GramaNiladhari Division 4</option> </select> </div> <div data-role="fieldcontain"> <label > Contact No </label> <input class="inputClass" id="contactNo" placeholder="071-9545-073" value="" type="number"> </div> <div data-role="fieldcontain"> <label >Address:</label> <textarea cols="40" rows="8" class="inputClass" id="address"></textarea> </div> <div class="ui-block-a"><button type="submit" data-theme="d">Location in a Map</button></div> <div data-role="fieldcontain"> <label >Race</label> <select class="inputClass" id="race"> <option value=" Sinhalese"> Sinhalese</option> <option value=" Sri Lanka Tamils"> Sri Lanka Tamils</option> <option value=" Moors"> Moors</option> <option value=" Indian Tamils "> Indian Tamils </option> <option value=" Malays "> Malays </option> <option value=" Burghers "> Burghers </option> </select> </div> <input class="buttonClass" type="button" value="Insert Data" onclick="saveLocal(this.form);"> </div> </form> </div> <input class="buttonClass" type="button" value="get Data" onclick="readLocal();"> <!-- <p id="dhomeId"></p> <p id="downer"></p> <p id="dgramaND"></p> <p id="dcontactNo"></p> <p id="daddress"></p> <p id="drace"></p>--> <table border="1"> <tbody id="tbody"> <tr><td>test1</td></tr> <tr><td>test2</td></tr> </tbody> </table> </div> </body> </html> Also I need to expand my code to edit and delete record from local storage.

    Read the article

  • Using Flot's Bar Graph in an Android WebView with Highlighting

    - by Nicholi
    The issue is unhighlighting bars which are no longer selected in a bar graph plotted by flot in a WebView on Android. Got no other issues drawing the actual graphs (which look beautiful for something so simple btw). I am not extremely knowledgeable in terms of javascript and web design/development but it seems little should have been needed, if it would just work!! :( I believe I'm following the Flot API correctly, if not someone please scream and yell at me. It seems to work just fine in a non-mobile browser at least. Hoping someone has done this before, but if not I've got the minimal necessary code to poke at your droids if inquiring minds would like to test. I've tested on two Nexus Ones (both 2.2.1), and have tried targeting with Andriod 1.5 and 2.2 SDKs (my intention is to target 1.5 if possible). I've been attempting to hack away at this for far too long on my own now. What happens: 1. Graph loads fine with bars. All bars unhighlighted. 2. Select a bar in graph, gets highlighted fine (and a tooltip is placed). 3. Select a different bar in graph, old bar is unhighlighted, old tooltip removed, new bar highlighted and tooltip placed (still no problems). 4. Click in the vast darkness of the graph which should then unhighlight the last bar... but it doesn't. I've tried disabling flot's autohighlight and manually doing it as well to no avail. Looking into flot itself and only getting down to drawOverlay() where the issue seems to begin... An even more disturbing bug(?) appears if the fill bar option is enabled in the graph, but I'd rather just forget about that for now. Also grabbed the latest version of flot from their svn (r290), but made no different from last public release (v0.6). As a complete guess I'm thinking it's an issue with WebKit's javascript implementation (or something specific to Nexus Ones, which wouldn't be so bad), but if there is any ugly hack to just get it to work I'm all ears. I've thrown the graph data directly into the html/js, rather than deal with showing all the code involved in the Java-javascript handler and callbacks. The simple html placed in 'assets/flot/test/' with jquery.js and jquery.flot.js: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery.js"></script> <script src="jquery.flot.js"></script> <script id="source" language="javascript" type="text/javascript"> var lastItem = null; var plot = null; $(document).ready(function () { //window.testhandler.loadGraph(); // bind plotclick here $("#graphHolder").bind("plotclick", function (event, pos, item) { if (item) { var lastPoint = null; if (lastItem != null) lastPoint = lastItem.datapoint; if (!pointEquals(lastPoint, item.datapoint)) { //if (lastItem != null) // plot.unhighlight(lastItem.series, lastItem.datapoint); lastItem = item; $("#tooltip").remove(); //plot.highlight(item.series, item.datapoint); showTooltip(item.pageX, item.pageY, item.datapoint[1]); } } else if (lastItem != null) { plot.unhighlight(lastItem.series, lastItem.datapoint); // not unhighlighting anything //plot.unhighlight(); // doesn't work either, supposed to unhighlight everything lastItem = null; $("#tooltip").remove(); } }); GotGraph(); }); /** * Show a tooltip above bar in graph * @param {int} x Left coordinate of div * @param {int} y Top coordinate of div * @param {String} contents text to place in div */ function showTooltip(x, y, contents) { $('<div id="tooltip">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y, left: x, border: '1px solid #fdd', padding: '2px', 'background-color': '#fee', opacity: 0.80 }).appendTo("body").fadeIn(200); } /** * Draw the graph. This is a callback which will be called by Java * * @param {Object} seriesData * @param {Object} seriesOptions */ function GotGraph() { //seriesData, seriesOptions) { var seriesData = [{ "bars":{"lineWidth":2,"show":true,"barWidth":86400000,"align":"center","fill":false}, "data":[[1288569600000,10],[1288656000000,5],[1288742400000,12],[1288828800000,20],[1288915200000,14],[1289001600000,3],[1289174400000,22],[1289260800000,20],[1289347200000,10],[1289433600000,5],[1289520000000,12],[1289606400000,20],[1289692800000,14],[1289779200000,35]]}]; var seriesOptions = { "xaxis":{"twelveHourClock":false,"minTickSize":[1,"day"],"tickSize":[1,"day"],"timeformat":"%d","mode":"time"}, "yaxis":{"min":0}, "grid":{"clickable":true,"autoHighlight":true,"hoverable":false}}; plot = $.plot($("#graphHolder"), seriesData, seriesOptions); } function pointEquals(point1, point2) { if (point1 != null && point2 != null && typeof(point1) == typeof(point2) && point1.length == point2.length) { var i; for (i=0;i<point1.length;i++) { if (point1[i] != point2[i]) { return false; } } return true; } return false; } </script> </head> <body> <div id="graphHolder" STYLE="height:200px;width:400px"></div> </body> </html> The minimal amount of code necessary in onCreate in startup activity: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView mytestView = new WebView(this); mytestView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); setContentView(mytestView); mytestView.setBackgroundColor(0); mytestView.getSettings().setJavaScriptEnabled(true); mytestView.setClickable(true); mytestView.setFocusable(false); mytestView.setFocusableInTouchMode(false); mytestView.loadUrl("file:///android_asset/flot/test/stats_graph.html"); }

    Read the article

  • MVC Portable Areas Enhancement &ndash; Embedded Resource Controller

    - by Steve Michelotti
    MvcContrib contains a feature called Portable Areas which I’ve recently blogged about. In short, portable areas provide a way to distribute MVC binary components as simple .NET assemblies where the aspx/ascx files are actually compiled into the assembly as embedded resources. This is an extremely cool feature but once you start building robust portable areas, you’ll also want to be able to access other external files like css and javascript.  After my recent post suggesting portable areas be expanded to include other embedded resources, Eric Hexter asked me if I’d like to contribute the code to MvcContrib (which of course I did!). Embedded resources are stored in a case-sensitive way in .NET assemblies and the existing embedded view engine inside MvcContrib already took this into account. Obviously, we’d want the same case sensitivity handling to be taken into account for any embedded resource so my job consisted of 1) adding the Embedded Resource Controller, and 2) a little refactor to extract the logic that deals with embedded resources so that the embedded view engine and the embedded resource controller could both leverage it and, therefore, keep the code DRY. The embedded resource controller targets these scenarios: External image files that are referenced in an <img> tag External files referenced like css or JavaScript files Image files referenced inside css files Embedded Resources Walkthrough This post will describe a walkthrough of using the embedded resource controller in your portable areas to include the scenarios outlined above. I will build a trivial “Quick Links” widget to illustrate the concepts. The portable area registration is the starting point for all portable areas. The MvcContrib.PortableAreas.EmbeddedResourceController is optional functionality – you must opt-in if you want to use it.  To do this, you simply “register” it by providing a route in your area registration that uses it like this: 1: context.MapRoute("ResourceRoute", "quicklinks/resource/{resourceName}", 2: new { controller = "EmbeddedResource", action = "Index" }, 3: new string[] { "MvcContrib.PortableAreas" }); First, notice that I can specify any route I want (e.g., “quicklinks/resources/…”).  Second, notice that I need to include the “MvcContrib.PortableAreas” namespace as the fourth parameter so that the framework is able to find the EmbeddedResourceController at runtime. The handling of embedded views and embedded resources have now been merged.  Therefore, the call to: 1: RegisterTheViewsInTheEmmeddedViewEngine(GetType()); has now been removed (breaking change).  It has been replaced with: 1: RegisterAreaEmbeddedResources(); Other than that, the portable area registration remains unchanged. The solution structure for the static files in my portable area looks like this: I’ve got a css file in a folder called “Content” as well as a couple of image files in a folder called “images”. To reference these in my aspx/ascx code, all of have to do is this: 1: <link href="<%= Url.Resource("Content.QuickLinks.css") %>" rel="stylesheet" type="text/css" /> 2: <img src="<%= Url.Resource("images.globe.png") %>" /> This results in the following HTML mark up: 1: <link href="/quicklinks/resource/Content.QuickLinks.css" rel="stylesheet" type="text/css" /> 2: <img src="/quicklinks/resource/images.globe.png" /> The Url.Resource() method is now included in MvcContrib as well. Make sure you import the “MvcContrib” namespace in your views. Next, I have to following html to render the quick links: 1: <ul class="links"> 2: <li><a href="http://www.google.com">Google</a></li> 3: <li><a href="http://www.bing.com">Bing</a></li> 4: <li><a href="http://www.yahoo.com">Yahoo</a></li> 5: </ul> Notice the <ul> tag has a class called “links”. This is defined inside my QuickLinks.css file and looks like this: 1: ul.links li 2: { 3: background: url(/quicklinks/resource/images.navigation.png) left 4px no-repeat; 4: padding-left: 20px; 5: margin-bottom: 4px; 6: } On line 3 we’re able to refer to the url for the background property. As a final note, although we already have complete control over the location of the embedded resources inside the assembly, what if we also want control over the physical URL routes as well. This point was raised by John Nelson in this post. This has been taken into account as well. For example, suppose you want your physical url to look like this: 1: <img src="/quicklinks/images/globe.png" /> instead of the same corresponding URL shown above (i.e., “/quicklinks/resources/images.globe.png”). You can do this easily by specifying another route for it which includes a “resourcePath” parameter that is pre-pended. Here is the complete code for the area registration with the custom route for the images shown on lines 9-11: 1: public class QuickLinksRegistration : PortableAreaRegistration 2: { 3: public override void RegisterArea(System.Web.Mvc.AreaRegistrationContext context, IApplicationBus bus) 4: { 5: context.MapRoute("ResourceRoute", "quicklinks/resource/{resourceName}", 6: new { controller = "EmbeddedResource", action = "Index" }, 7: new string[] { "MvcContrib.PortableAreas" }); 8:   9: context.MapRoute("ResourceImageRoute", "quicklinks/images/{resourceName}", 10: new { controller = "EmbeddedResource", action = "Index", resourcePath = "images" }, 11: new string[] { "MvcContrib.PortableAreas" }); 12:   13: context.MapRoute("quicklink", "quicklinks/{controller}/{action}", 14: new {controller = "links", action = "index"}); 15:   16: this.RegisterAreaEmbeddedResources(); 17: } 18:   19: public override string AreaName 20: { 21: get 22: { 23: return "QuickLinks"; 24: } 25: } 26: } The Quick Links portable area results in the following requests (including custom route formats): The complete code for this post is now included in the Portable Areas sample solution in the latest MvcContrib source code. You can get the latest code now.  Portable Areas open up exciting new possibilities for MVC development!

    Read the article

  • Azure &ndash; Part 6 &ndash; Blob Storage Service

    - by Shaun
    When migrate your application onto the Azure one of the biggest concern would be the external files. In the original way we understood and ensure which machine and folder our application (website or web service) is located in. So that we can use the MapPath or some other methods to read and write the external files for example the images, text files or the xml files, etc. But things have been changed when we deploy them on Azure. Azure is not a server, or a single machine, it’s a set of virtual server machine running under the Azure OS. And even worse, your application might be moved between thses machines. So it’s impossible to read or write the external files on Azure. In order to resolve this issue the Windows Azure provides another storage serviec – Blob, for us. Different to the table service, the blob serivce is to be used to store text and binary data rather than the structured data. It provides two types of blobs: Block Blobs and Page Blobs. Block Blobs are optimized for streaming. They are comprised of blocks, each of which is identified by a block ID and each block can be a maximum of 4 MB in size. Page Blobs are are optimized for random read/write operations and provide the ability to write to a range of bytes in a blob. They are a collection of pages. The maximum size for a page blob is 1 TB.   In the managed library the Azure SDK allows us to communicate with the blobs through these classes CloudBlobClient, CloudBlobContainer, CloudBlockBlob and the CloudPageBlob. Similar with the table service managed library, the CloudBlobClient allows us to reach the blob service by passing our storage account information and also responsible for creating the blob container is not exist. Then from the CloudBlobContainer we can save or load the block blobs and page blobs into the CloudBlockBlob and the CloudPageBlob classes.   Let’s improve our exmaple in the previous posts – add a service method allows the user to upload the logo image. In the server side I created a method name UploadLogo with 2 parameters: email and image. Then I created the storage account from the config file. I also add the validation to ensure that the email passed in is valid. 1: var storageAccount = CloudStorageAccount.FromConfigurationSetting("DataConnectionString"); 2: var accountContext = new DynamicDataContext<Account>(storageAccount); 3:  4: // validation 5: var accountNumber = accountContext.Load() 6: .Where(a => a.Email == email) 7: .ToList() 8: .Count; 9: if (accountNumber <= 0) 10: { 11: throw new ApplicationException(string.Format("Cannot find the account with the email {0}.", email)); 12: } Then there are three steps for saving the image into the blob service. First alike the table service I created the container with a unique name and create it if it’s not exist. 1: // create the blob container for account logos if not exist 2: CloudBlobClient blobStorage = storageAccount.CreateCloudBlobClient(); 3: CloudBlobContainer container = blobStorage.GetContainerReference("account-logo"); 4: container.CreateIfNotExist(); Then, since in this example I will just send the blob access URL back to the client so I need to open the read permission on that container. 1: // configure blob container for public access 2: BlobContainerPermissions permissions = container.GetPermissions(); 3: permissions.PublicAccess = BlobContainerPublicAccessType.Container; 4: container.SetPermissions(permissions); And at the end I combine the blob resource name from the input file name and Guid, and then save it to the block blob by using the UploadByteArray method. Finally I returned the URL of this blob back to the client side. 1: // save the blob into the blob service 2: string uniqueBlobName = string.Format("{0}_{1}.jpg", email, Guid.NewGuid().ToString()); 3: CloudBlockBlob blob = container.GetBlockBlobReference(uniqueBlobName); 4: blob.UploadByteArray(image); 5:  6: return blob.Uri.ToString(); Let’s update a bit on the client side application and see the result. Here I just use my simple console application to let the user input the email and the file name of the image. If it’s OK it will show the URL of the blob on the server side so that we can see it through the web browser. Then we can see the logo I’ve just uploaded through the URL here. You may notice that the blob URL was based on the container name and the blob unique name. In the document of the Azure SDK there’s a page for the rule of naming them, but I think the simple rule would be – they must be valid as an URL address. So that you cannot name the container with dot or slash as it will break the ADO.Data Service routing rule. For exmaple if you named the blob container as Account.Logo then it will throw an exception says 400 Bad Request.   Summary In this short entity I covered the simple usage of the blob service to save the images onto Azure. Since the Azure platform does not support the file system we have to migrate our code for reading/writing files to the blob service before deploy it to Azure. In order to reducing this effort Microsoft provided a new approch named Drive, which allows us read and write the NTFS files just likes what we did before. It’s built up on the blob serivce but more properly for files accessing. I will discuss more about it in the next post.   Hope this helps, Shaun All documents and related graphics, codes are provided "AS IS" without warranty of any kind. Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.

    Read the article

  • How-to filter table filter input to only allow numeric input

    - by frank.nimphius
    In a previous ADF Code Corner post, I explained how to change the table filter behavior by intercepting the query condition in a query filter. See sample #30 at http://www.oracle.com/technetwork/developer-tools/adf/learnmore/index-101235.html In this OTN Harvest post I explain how to prevent users from providing invalid character entries as table filter criteria to avoid problems upon re-querying the table. In the example shown next, only numeric values are allowed for a table column filter. To create a table that allows data filtering, drag a View Object – or a data collection of a Web Service or JPA business service – from the DataControls panel and drop it as a table. Choose the Enable Filtering option in the Edit Table Columns dialog so the table renders with the column filter boxes displayed. The table filter fields are created using implicit af:inputText components that need to be customized for you to apply a custom filter input component, or to change the input behavior. To change the input filter, so only a defined set of input keys is allowed, you need to change the default filter field with your own af:inputText field to which you apply an af:clientListener tag that filters user keyboard entries. For this, in the Oracle JDeveloper visual editor, select the column which filter you want to change and expand the column node in the Oracle JDeveloper Structure Window. Part of the column definition is the Column facet node. Expand the facets so you see the filter facet entry. The filter facet is grayed out as there is no custom facet defined. In a next step, open theComponent Palette (ctrl+shift+P) and drag an Input Text component onto the facet. This demarks the first part in the filter customization. To make the custom filter component work, you need to map the af:inputText component value property to the ADF filter criteria that is exposed in the Expression Builder. Open the Expression Builder for the filter input component value property by clicking the arrow icon to its right. In the Expression Builder expand the JSP Objects | vs | filterCriteria node to select the attribute name represented by the table column. The vs entry is the name of a variable that is defined on the table and that grants you access to the table attributes. Now that the filter works as before – though using a custom filter input component – you can add the af:clientListener tag to your custom filter component – af:inputText – to call out to JavaScript when users type in the column filter field Point the client filter method property to a JavaScript function that you reference or add through using the af:resource tag and set the type property value to keyDown. <af:document id="d1">     <af:resource type="javascript" source="/js/filterHandler.js"/> … The filter definition looks as shown below <af:inputText label="Label 1" id="it1"                         value="#{vs.filterCriteria.Employe        <af:clientListener method="suppressCharacterInput"                                     type="keyDown"/> </af:inputText> The JavaScript code that you can use to either filter character inputs or numeric inputs is shown below. Just store this code in an external JavaScript (.js) file and reference it from the af:resource tag. //Allow numbers, cursor control keys and delete keys function suppressCharacterInput(evt) {     var _keyCode = evt.getKeyCode();     var _filterField = evt.getCurrentTarget();     var _oldValue = _filterField.getValue();     if (!((_keyCode < 57) ||(_keyCode > 96 && _keyCode < 105))) {         _filterField.setValue(_oldValue);         evt.cancel();     } } //Allow characters, cursor control keys and delete keys function suppressNumericInput(evt) {  var _keyCode = evt.getKeyCode();  var _filterField = evt.getCurrentTarget();  var _oldValue = _filterField.getValue();  //check for numbers  if ((_keyCode < 57 && _keyCode > 47) ||      (_keyCode > 96 && _keyCode < 105)){     _filterField.setValue(_oldValue);     evt.cancel();   } } But what if browsers don't allow JavaScript ? Don't worry about this. If browsers would not support JavaScript then ADF Faces as a whole would not work and you had a different problem.

    Read the article

  • So you want a French Site?

    - by juanlarios
    I thought I would write a quick write up of how to create a french site in SharePoint 2007. I'm not talking about a Variation but just a plain French Site from the ground up. There were some gotchas that I felt were worth blogging about. First:  go to Microsoft Telnet Article and follow the install instructions. Make sure that when you get to the download page that you select "French" as part of the drop down and you download and install the right language pack. I noticed that if you did not click the "change" button enven though I selected the 'french' language pack, it reverted back to the english language pack.   Second: You will notice a couple of things. When you go to central admin you will see the following:    Now you can pick between french site or english. You will get this if you install other language packs and they will be listed in the drop down. You will notice that you now have french headings and frech listings of sites. You see "Publishing" as a heading because I have a custom site definition that I deployed as a french site. Third: As you start navigating around and trying to create document libraries or sites you will start getting errors. Errors like the following: "Cannot make a cache safe URL for "SelectorControls.js", file not found. Please verify that the file exists under the layouts directory. " Troubleshoot issues with Windows SharePoint Services. Once you resolve the issue with this "js" file, you will find that there are other js files that are missing. The only problem is that if you are not fluent in French or the language you are trying to deploy, Well, you'll have a tough time understanding error messages as they will all be in the new language you are trying to deploy. So let's just talk about what happened when you installed the language pack. In the 12 Hive:  12/Template    you will now see a 1033 folder and a 1036 folder. The 1036 folder is the folder that was created and added as part of the language pack. What the above error is saying is that now that it's looking at the 1036 folder, well, it's missing some files. The nice thing is that these files are included in the 1033 folder (which is the English Language Pack). Simply copy and paste the controls from the one folder to the other. There will be more than one conflict so you will have to move serveral controls over. Can't remember how many but simply add them as error messages come up. I had to add some navigation controls and some content selectors.   Now that's all that you need to install the Frech Language pack anc reate site collections that are entirely in a another language. Do not mistake this with Variations, where you can have multiple language sites. For those of you doing a little bit extra with this, let me share what I was doing extra and what I needed to get it working for me. I had had a custom site definition which was obviously not showing up in my selection of french sites. I was under the impression that all sites in English would show up in french and that the sites were simply routed to a new Resource file for french content. And that is the case but there is a little extra that needs to be done if you have a custom site definition deployed:  First: Under hive 12/Template/1033/XML  there is a listing of site definition files that are deployed to the English side of things. If you navigate to 12/Template/1036/XML  and open one of the site definitions you will see that they are similar and reference the existing site definitions installed on the server, except that they have some french added to descriptions and names. Simply copy the xml file of your custom template to the 1036 folder to have it show up as a selection when you select French as the dropdown entry when create a site colleciton. You can go ahead and change the description and name to suit the language it's under.    Second: As part of my site definition, I packaed up several list templates, that were saved as STP files. When you navigate to the list template listing, well, the templates are for English sites, not French so I cannot create document libraries based on the template. What now? well here comes KWIzCom to the rescue! They seem to have put out a "STP language converter" where you can take a site template or list template and convert it to any target language you are after. It's a free download, Use it and you're good to go.  One thing I will mention is that when I convereted the English documents I whent ahead and converted them to French-Canadien. And it didn't work! so I finally figured out that the French Version it was expecting in the french site was "French-France". Don't know why that is, it's just what needs to be done to get that working. When I did that, I was able to use the List templates that I created in the English site for the French Site.   Hope it helps , good luck!

    Read the article

  • The clock hands of the buffer cache

    - by Tony Davis
    Over a leisurely beer at our local pub, the Waggon and Horses, Phil Factor was holding forth on the esoteric, but strangely poetic, language of SQL Server internals, riddled as it is with 'sleeping threads', 'stolen pages', and 'memory sweeps'. Generally, I remain immune to any twinge of interest in the bowels of SQL Server, reasoning that there are certain things that I don't and shouldn't need to know about SQL Server in order to use it successfully. Suddenly, however, my attention was grabbed by his mention of the 'clock hands of the buffer cache'. Back at the office, I succumbed to a moment of weakness and opened up Google. He wasn't lying. SQL Server maintains various memory buffers, or caches. For example, the plan cache stores recently-used execution plans. The data cache in the buffer pool stores frequently-used pages, ensuring that they may be read from memory rather than via expensive physical disk reads. These memory stores are classic LRU (Least Recently Updated) buffers, meaning that, for example, the least frequently used pages in the data cache become candidates for eviction (after first writing the page to disk if it has changed since being read into the cache). SQL Server clearly needs some mechanism to track which pages are candidates for being cleared out of a given cache, when it is getting too large, and it is this mechanism that is somewhat more labyrinthine than I previously imagined. Each page that is loaded into the cache has a counter, a miniature "wristwatch", which records how recently it was last used. This wristwatch gets reset to "present time", each time a page gets updated and then as the page 'ages' it clicks down towards zero, at which point the page can be removed from the cache. But what is SQL Server is suffering memory pressure and urgently needs to free up more space than is represented by zero-counter pages (or plans etc.)? This is where our 'clock hands' come in. Each cache has associated with it a "memory clock". Like most conventional clocks, it has two hands; one "external" clock hand, and one "internal". Slava Oks is very particular in stressing that these names have "nothing to do with the equivalent types of memory pressure". He's right, but the names do, in that peculiar Microsoft tradition, seem designed to confuse. The hands do relate to memory pressure; the cache "eviction policy" is determined by both global and local memory pressures on SQL Server. The "external" clock hand responds to global memory pressure, in other words pressure on SQL Server to reduce the size of its memory caches as a whole. Global memory pressure – which just to confuse things further seems sometimes to be referred to as physical memory pressure – can be either external (from the OS) or internal (from the process itself, e.g. due to limited virtual address space). The internal clock hand responds to local memory pressure, in other words the need to reduce the size of a single, specific cache. So, for example, if a particular cache, such as the plan cache, reaches a defined "pressure limit" the internal clock hand will start to turn and a memory sweep will be performed on that cache in order to remove plans from the memory store. During each sweep of the hands, the usage counter on the cache entry is reduced in value, effectively moving its "last used" time to further in the past (in effect, setting back the wrist watch on the page a couple of hours) and increasing the likelihood that it can be aged out of the cache. There is even a special Dynamic Management View, sys.dm_os_memory_cache_clock_hands, which allows you to interrogate the passage of the clock hands. Frequently turning hands equates to excessive memory pressure, which will lead to performance problems. Two hours later, I emerged from this rather frightening journey into the heart of SQL Server memory management, fascinated but still unsure if I'd learned anything that I'd put to any practical use. However, I certainly began to agree that there is something almost Tolkeinian in the language of the deep recesses of SQL Server. Cheers, Tony.

    Read the article

  • Silverlight Cream for December 18, 2010 -- #1012

    - by Dave Campbell
    In this Issue: Mark Monster, Kevin Dockx, Jeremy Likness(-2-,-3-), Timmy Kokke, Den Delimarsky, Mike Snow, Samuel Jack(-2-), and Renuka Prasad(-2-). Above the Fold: Silverlight: "Trigger a Storyboard on ViewModel changes" Mark Monster WP7: "Microsoft Push Notification in Windows Phone 7" Renuka Prasad Shoutouts: SilverlightGal sent me the link to The Silverlight Dossier ... I think it's a pretty good start... additions I'd like to see are ways to submit to the various areas. Michael Crump put up a contest that runs from now to January 1st... Win a set of Infragistics Silverlight Controls with Data Visualization!... pretty cool, Michael! If you visit WynApse.com, you'll see I have a subscription to LearnVisualStudio.net... and now they have posted a batch of WP7 videos... 64 of them to be exact... wow!: New video series From SilverlightCream.com: Trigger a Storyboard on ViewModel changes Mark Monster has a great post up about triggering Storyboard on ViewModel changes using the DataTrigger from Blend... cool stuff, and you can also do GoToStateAction or other actions or build yourowndang Trigger Action... fun awaits! ... sorry it took a while to post, Mark... been a tad overloaded here! Working with the Silverlight Rich Text Box control Kevin Dockx has had a post up for a while at SilverlightShow where he takes a good look at the RichText control and it's various capabilities, including source so you can give it a dance yourself. Lessons Learned in Personal Web Page Part 3: Custom Panel and Listbox Jeremy Likness's part 3 of his Personal Web Page lessons learned is covering the tres-cool 3D Panel he did... and he's got it all explained out... building from scratch via a custom panel and a Listbox control... A Silverlight MVVM Feed Reader from Scratch in 30 Minutes Jeremy Likness has a video tutorial showing building an MVVM/Silverlight feedreader in 30 minutes ... plus a couple mods that he noticed after the fact... beat that HTML5 :) Jounce Part 8: Raising Property Changed In Jeremy Likness's latest post, he has number 8 in his series on his MVVM platform, Jounce. This time he's explaining the property changed notification, has a very cool way of doing it, and some interesting comments from readers. Dependency Injection, MVVM, Ninject and Silverlight Timmy Kokke has a great tutorial up with associated demo project on Dependency Injection in MVVM and Silverlight. Some hidden features in the Windows Phone 7 emulator Den Delimarsky shows how to get some of the hidden features on your WP7 emulator like the Call History, Call Settings, and Details about the numbers. Playing sound effects on Windows Phone 7 Mike Snow's latest tip is playing sound effects on your WP7 ... a little bit of XNA here and there, and badabing, badaboom, you got sound! Day 3 of my “Build a Windows Phone 7 game in 3 days” Challenge Samuel Jack has a couple more posts up about his 'Build a WP7 game in 3 Days' challenge... first up is Day 3 from 8:50 to 22:30 ... wow... long day! ... but he's got something good going now... some good external links also Day 3.5 of my “Build a Windows Phone 7 game in 3 days” Challenge Samuel Jack's 3rd day ended with another half-day added on to put on some finishing touches... again, some good external links... and he finished with this Say hello to Simon Squared, my 3.5 day old WP7 Game Microsoft Push Notification in Windows Phone 7 Renuka Prasad has a bunch of material up that I've not been aware of (how did that happen, people??) ... here's the first of a couple of his posts on Code Project ... a very nice tutorial on the Push Notification process... great diagrams and external links. Windows Phone 7 – Toast Notification Using Windows Azure Cloud Service Renuka Prasad has another WP7 post on CodeProject... this one on Toast Notification... and he's using Azure and WCF all rolled into it as well... great diagrams, descriptions and all the code. Stay in the 'Light! Twitter SilverlightNews | Twitter WynApse | WynApse.com | Tagged Posts | SilverlightCream Join me @ SilverlightCream | Phoenix Silverlight User Group Technorati Tags: Silverlight    Silverlight 3    Silverlight 4    Windows Phone MIX10

    Read the article

  • My Codemash 2011 Retrospective

    - by Greg Malcolm
    I just got back from Codemash yesterday, and still on an adrenaline buzz. Here's my take on this years encounter: The Awesome Nearly everybody in one place Codemash is the ultimate place to catch up with community friends. This is my 3rd year visiting and I've got to know a great number of very cool people through various conferences, Give Camps and other community events. I'm finding more and more that Codemash is the best place to catch up with everybody regardless of technology interest or location. Of course I always make a whole bunch more friends while I'm there! Yay! Open Spaced I found the open spaces didn't work so well last year. This year things went a lot smoother and the topics were engaging and fresh. While I miss Alan Steven's approach of running it like an agile project, it was very cool to see that it evolving. Laptops were often cracked open, not just once but frequently! For example: Jasmine - Paired on a javascript kata using the Jasmine javascript test runner J - Sat in on a J demo from local J enthusiast, Tracy Harms Watir - More pairing, this time using Ruby with the watir-webdriver through cucumber. I'd mostly forgotten that Cucumber runs just fine without Rails. It made a change to do without. The other spaces were engaging too, but I think that's enough for that topic. Javascript Shenanigans I've already mentioned that I attended a Jasmine kata session. Jasmine is close to my heart right now every since I discovered it while on the hunt for a decent Javascript testing framework for a javascript koans project earlier this year. Well, it also got covered in the Java Precompiler and Pillar's vendor session, which was great to see. Node.js was also a reoccurring theme. Node.js in a nutshell? It's an extremely scalable Event based I/O server which runs on Javascript. I'd already encountered through a Startup Weekend project and have been noticing increasing interest of late. After encountering more node.js driven excitement from my peers at codemash I absolutely had to attend the open space on it. At least 20 people turned up and by the end we had some answers, a whole ton of new questions and an impromptu user group in the form of a twitter channel (#nodemash). I have no idea where this is going to go or how big it is going to become, but if it can cross the chasm into the enterprise it could become huge... Scala Koans I'm a bit of a Koans addict, and I really need more exposure to functional languages so I gave the Scala Koans precompiler a try. Great fun! I'm really glad I attended because I found I had a whole ton of questions. Currently the koans are available here, and the answers are here. Opportunities While we're on the subject can we change the subject now? Hai Gregory, You really need to keep the drinking for later in the day. I mean seriously, you're 34 and you still do this every single time! Sure, you made it to Chad Fowler keynote ok, but you looking a rather pale weren't you? Also might have been nice to attend 'Netflicks in the Cloud' instead of 'Sleeping It Off For People Who Should Know Better'. Kthxbye PS: Stop talking to yourself Not that I entirely regret it, I've had some of my greatest insights through late night drunken conversations at the CodeMash bar. Just might be nice to reign it in a little and get something out of the next morning too. Diversity This is something that is in the back of my mind because of conversations at Codemash as well as throughout the year; I'm realizing more and more how discouraging the IT profession is for women. I notice in the community there has been a lot of attention paid to stamping out harrasment, which is good, but there also seems to be a massive PR issue. I really don't have any solutions, but I figure it can't hurt to pay more attention to whats going on... And in Other News I now have a picture of Chad Fowler giving me more cowbell! Sadly I managed to lose the cowbell later on. Hopefully it's gone to a Better Place. The Womack Family Band joined in with the musicians jam this year. There's my cowbell again! Why must you hide from me? I also finally went in the water for the first time in all the I've been coming to codemash. Why did I wait so long?!?

    Read the article

< Previous Page | 218 219 220 221 222 223 224 225 226 227 228 229  | Next Page >