Search Results

Search found 987 results on 40 pages for 'hisham el bereky'.

Page 27/40 | < Previous Page | 23 24 25 26 27 28 29 30 31 32 33 34  | Next Page >

  • Booking form works but does not give feedback

    - by Naim
    I have a form where people can book seats for a given event. It's actually a WordPress plugin. When someone sends his booking, email notifications are sent properly and the event booking status is updated accordingly. The issue is that the booking form does not give any feedback whatsoever. Once you hit "book now", the graphic keeps loading and no feedback is ever displayed like for instance "booking sent successfully" or "there are errors in your form", even though the booking is saved correctly with both sides notified by email. I guess it's a JavaScript issue,Firebug console is not showing any error... So here is the code source of the booking form : Also please experience the issue live Here username: tester password: testsa Thanks! $('#em-booking-form').submit( function(e){ e.preventDefault(); var em_booking_doing_ajax = false; $.ajax({ url: EM.bookingajaxurl, data:$('#em-booking-form').serializeArray(), dataType: 'jsonp', type:'post', beforeSend: function(formData, jqForm, options) { if(em_booking_doing_ajax){ alert(EM.bookingInProgress); return false; } em_booking_doing_ajax = true; $('.em-booking-message').remove(); $('#em-booking').append('<div id="em-loading"></div>'); }, success : function(response, statusText, xhr, $form) { $('#em-loading').remove(); $('.em-booking-message').remove(); $('.em-booking-message').remove(); //show error or success message if(response.result){ $('<div class="em-booking-message-success em-booking-message">'+response.message+'</div>').insertBefore('#em-booking-form'); $('#em-booking-form').hide(); $('.em-booking-login').hide(); $(document).trigger('em_booking_success', [response]); }else{ if( response.errors != null ){ if( $.isArray(response.errors) && response.errors.length > 0 ){ var error_msg; response.errors.each(function(i, el){ error_msg = error_msg + el; }); $('<div class="em-booking-message-error em-booking-message">'+error_msg.errors+'</div>').insertBefore('#em-booking-form'); }else{ $('<div class="em-booking-message-error em-booking-message">'+response.errors+'</div>').insertBefore('#em-booking-form'); } }else{ $('<div class="em-booking-message-error em-booking-message">'+response.message+'</div>').insertBefore('#em-booking-form'); } } $('html, body').animate({ scrollTop: $("#em-booking").first().offset().top - 50 }); //sends user back to top of form //run extra actions after showing the message here if( response.gateway != null ){ $(document).trigger('em_booking_gateway_add_'+response.gateway, [response]); } if( !response.result && typeof Recaptcha != 'undefined'){ Recaptcha.reload(); } }, complete : function(){ em_booking_doing_ajax = false; $('#em-loading').remove(); } }); return false; });

    Read the article

  • I'm cloning a table row that contains an input that's being set to jQuery TimeEntry that errors when

    - by Kendall Crouch
    I'm adding a TimeEntry to a page where the user can add a row (clone) to a table. The row that is cloned is hidden (display:none). The user clicks a button and javascript is run to clone the row which renames all of the fields and then appends the new row to the table. <tr id="blankRowShift"> <td> <input type="text" id="timeStart" name="timeStart" /> </td> <td> <input type="text" id="timeEnd" name="timeEnd" /> </td> <td> <select id="userLevel"> <option value="0">Please Select One</option> <option value="2">Admin</option> <option value="1">Employee</option> <option value="3">Scheduler</option> </select> </td> </tr> var r = $("#tbl #blankRowShift").clone().removeAttr("id"); $("#timeStart", r).attr("name", "timeStart" + nn).attr("id", "timeStart" + nn); $("#timeEnd", r).attr("name", "timeEnd" + nn).attr("id", "timeEnd" + nn); $("#userLevel option:nth(0)", r).attr("selected", "selected"); $("#userLevel", r).attr("name", "userLevel" + nn).attr("id", "userLevel" + nn).attr("value", 0); $("#tbl").append(r); $("#timeStart" + nn).timeEntry({ show24Hours: false, showSeconds: false, timeSteps: [1, 15, 0], spinnerImage: 'includes/js/spinnerOrange.png', beforeShow: customRangeStart }); $("#timeStart" + nn).timeEntry('setTime', new Date()); $("#timeEnd" + nn).timeEntry({ show24Hours: false, showSeconds: false, timeSteps: [1, 15, 0], spinnerImage: 'includes/js/spinnerOrange.png', beforeShow: customRangeEnd }); $("#timeEnd" + nn).timeEntry('setTime', new Date()); The spinner works just fine and the times can be changed. Then when submitting the form, I validate the time. The getTime errors in jQuery with the message "elem is undefined var id = elem[ expando ];". I've placed the statement 'console.dir(input)' in the _getTimeTimeEntry: function and it returns nothing for the cloned fields. el = $("#timeStart" + i); if (el.timeEntry("getTime") == null) {

    Read the article

  • How to parameterize @Scheduled(fixedDelay) with Spring 3.0 expression language?

    - by ngeek
    When using the Spring 3.0 capability to annotate the a scheduled task, I would like to set the fixedDelay as parameter from my configuration file, instead of hard-wiring it into my task class, like currently... @Scheduled(fixedDelay=5000) public void readLog() { ... } Unfortunately it seems that with the means of the Spring Expression Language (EL) @Value returns a String object which in turn is not able to be auto-boxed to a long value as required by the fixedDelay parameter. Thanks in advance for your help on this.

    Read the article

  • jQuery gallery turn over with next and previous buttons

    - by Ralf
    Hi, i'm trying to do some kind of Gallery-Turn Over Script with jQuery. Therefor i got an array with - let's say 13 - images: galleryImages = new Array( 'images/tb_01.jpg', 'images/tb_02.jpg', 'images/tb_03.jpg', 'images/tb_04.jpg', 'images/tb_05.jpg', 'images/tb_06.jpg', 'images/tb_07.jpg', 'images/tb_08.jpg', 'images/tb_09.jpg', 'images/tb_10.jpg', 'images/tb_11.jpg', 'images/tb_12.jpg', 'images/tb_13.jpg' ); My gallery looks like a grid showing only 9 images at once. My current script already counts the number of li-elements in #gallery, loads the first 9 images and displays them. The HTML looks like this: <ul id="gallery"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="gallery-controls"> <li id="gallery-prev"><a href="#">Previous</a></li> <li id="gallery-next"><a href="#">Next</a></li> </ul> I'm pretty new to jQuery an my problem is that i can't figure out how to split the array in portions with 9 elements to attach it as a link on the control buttons. I need something like this: $('#gallery-next').click(function(){ $('ul#gallery li').children().remove(); $('ul#gallery li').each(function(index,el){ var img = new Image(); $(img).load(function () { $(this).css('display','none'); $(el).append(this); $(this).fadeIn(); }).attr('src', galleryImages[index]); //index for the next 9 images?!?! }); }); Thanks for help!

    Read the article

  • How to read attachment messages without using scriptlets in JSP?

    - by Stardust
    Hi, I want to know how can I read attachment messages without using scriplets in JSP? After getting Message object as an attribute by using request object from servlets, how can I confirm whether Message content is an instance of Multipart or not without using scriplets like: if(message.getContent() instanceOf Multipart) How can I read the content of any file by using EL in JSP? As I can't see any getRead method in inputStream subclass.

    Read the article

  • Weird gcc error stray/missing terminating " character in C

    - by DreamCodeR
    I get the following errors: error: missing terminating " character and error: stray `\' in program In this line of C code: system("sqlite3 -html /home/user/.rtcom-eventlogger/el.db \"SELECT service_id, event_type_id,free_text, remote_uid FROM Events WHERE remote_uid=\'%d\' ORDER BY start_time DESC;\" > lol.html", nr); "nr" is a integer variable. I have gone over this so many times but are totally stuck of finding a solution. EDIT: The errors is the ouput while compiling with gcc if I didn't make that clear.

    Read the article

  • MATLAB plot moving data points in seperate subplots simutaneously

    - by Nate B.
    I wish to visualize the movement of a data point throughout space across a period of time within MATLAB. However, the way I want my figure to display is such that only a single instant is plotted at any given time. That was easy, I simply created a for loop to update my 3D plot display for every set of coordinates (x,y,z) in my data. However, I wish to display 4 different viewing angles of this plot at all times. I am well aware of how to setup subplots within MATLAB, that is not the issue. My issue is getting all 4 of these subplots to execute simultaneously so that all 4 subplots are always displaying the same point in time. I would appreciate if anyone could suggest how to handle this issue. As requested, my code for a figure with a single plot is shown below: datan = DATA; %data in form of x,y,z,a,b,c by column for row# of time points tib=zeros(size(datan,1),12); tib(:,1:3) = datan(:,1:3); tib_ref=tib(1,1:3); for i=1:size(datan,1) tib(i,1:3)=tib(i,1:3)-tib_ref; end angle_to_dircos close all figure('Name','Directions (Individual Cycles)','NumberTitle','off') for cc=1:2 hold off for bb=1:10:size(tib,1); scatter3(tib(bb,1),tib(bb,2),tib(bb,3),'green','filled'); %z and y axes are flipped in polhemus system hold on p0 = [tib(bb,1),tib(bb,2),tib(bb,3)]; p1 = [tib(bb,1)+10*tib(bb,4),tib(bb,2)+10*tib(bb,5),tib(bb,3)+10*tib(bb,6)]; p2 = [tib(bb,1)+10*tib(bb,7),tib(bb,2)+10*tib(bb,8),tib(bb,3)+10*tib(bb,9)]; p3 = [-(tib(bb,1)+100*tib(bb,10)),-(tib(bb,2)+100*tib(bb,11)),-(tib(bb,3)+100*tib(bb,12))]; vectarrow(p0,p1,1,0,0) hold on vectarrow(p0,p2,0,1,0) hold on vectarrow(p0,p3,0,0,1) hold on az = 90; el = 0; view(az, el); xlim([-50,50]); ylim([-50,50]); zlim([-50,50]); xlabel('distance from center in X'); ylabel('distance from center in Y'); zlabel('distance from center in Z'); title('XYZ Scatter Plots of Tracker Position'); hold on plot3(0,0,0,'sk','markerfacecolor',[0,0,0]); p0 = [0,0,0]; p1 = [10,0,0]; p2 = [0,10,0]; p3 = [0,0,100]; vectarrow(p0,p1,1,0,0) hold on vectarrow(p0,p2,0,1,0) hold on vectarrow(p0,p3,1,0,1) drawnow; end end

    Read the article

  • How to convert Xml files to Text Files 2

    - by John
    Hi all, I have around 8000 xml files that needs to be converted into text files. The text file must contain title, description and keywords of the xml file without the tags and removing other elements and attributes as well. In other words, i need to create 8000 text files containing the title,description and keywords of the xml file. I need codings for this to be done systematically. Any help would be greatly appreciated. Thanks in advance. Hey all thank you all so so much with your replies. Here's a sample of what my xml looks like: <?xml version="1.0"?> <metadata> <identifier>43productionsNightatthegraveyard</identifier> <title>Night at the graveyard</title> <collection>opensource_movies</collection> <mediatype>movies</mediatype> <resource>movies</resource> <upload_application appid="ccPublisher" version="2.2.1"/> <uploader>[email protected]</uploader> <description>una noche en el cementerio (terror)</description> <license>http://creativecommons.org/licenses/by-nc/3.0/</license> <title>Night at the graveyard</title> <format>Video</format> <adder>[email protected]</adder> <licenseurl>http://creativecommons.org/licenses/by-nc/3.0/</licenseurl> <year>2007</year> <keywords>Night,at,the,graveyard,43,productions</keywords> <holder>43 productions</holder> <publicdate>2007-04-11 19:52:28</publicdate> </metadata> And this would be the output: una noche en el cementerio (terror) Night at the graveyard Night,at,the,graveyard,43,productions This need to be saved with the same name but in text format. Thanks all so much if any more suggestions would be much appreciated.

    Read the article

  • Is there a stable emacs automated packaging system?

    - by Zubair
    I'm using Gnu Emacs on OSX, Windows, and Linux. Is there some command which can download and install packages (or .el files) automatically? I've seen there are some work-in-progress projects on the internet (after googling) but I was wondering if I was missing some awesome package manager out there that just works.

    Read the article

  • JSP: Use information from one page to another

    - by Sandeep Bansal
    Hi, I currently have a JSP page with a Form for the user to enter their name, but what I want is to get the user forwarded to a different JSP page after form submission and to carry on their name to be used. I don't want to use JSTL EL just simple JSP uses. I was thinking of using a bean storing the detail in a session but how would it work. Thanks.

    Read the article

  • Javascript CSS visability.

    - by Alex
    It seems that javascript only can ready inline css if i want to check if element is display:hidden getting it with: el.style.display But how to check if display:none is placed inside external CSS file?

    Read the article

  • .htaccess not load css file and images and duplicate parent url?

    - by Mahran Elneel
    i have create htaccess and cannot load css file and images but when add ../file.css and images ../ima it work but i want to open in current directory. and when click the link in home page like will be http://localhost/mysite/program/4 but in another page will add http://localhost/mysite/program/program/2 and this wrong location the .htaccess code Options +FollowSymLinks RewriteEngine On # Turn on the rewriting engine RewriteRule ^program/([0-9]+)/?$ get_programs.php?pack_id=$1 [NC,L] RewriteRule ^El-Mensajero/?$ home.php [NC,L] RewriteRule ^Daily-Tours/?$ daily_tours.php [NC,L] RewriteRule ^page/([0-9]+)/?$ get_pages.php?page_id=$1 [NC,L]

    Read the article

  • get attributes from xml tree using linq

    - by nelsonwebs
    I'm working with an xml file that looks like this: <?xml version="1.0" encoding="UTF-8"?> <element1 xmlns="http://namespace1/"> <element2> <element3> <element4 attr1="2009-11-09"> <element5 attr2="NAME1"> <element6 attr3="1"> <element7 attr4="1" attr5="5.5" attr6="3.4"/> </element6> </element5> <element5 attr2="NAME2"> <element6 attr3="1"> <element7 attr4="3" attr5="4" attr6="4.5"/> </element6> </element5> </element4> </element3> </element2> </element1> Where I need to loop through element5 and retrieve the attributes in an Ienumberable like this: attr1, attr2, attr3, attr4, attr5, attr6 using linq to xml and c#. I can loop through the element5 and get all the attribute2 info using but I can't figure out how to get the parent or child attributes I need. UPDATE: Thanks for the feeback thus far. For clarity, I need to do a loop through attribute5. So basically, what I have right now (which isn't much) is . . . XElement xel = XElement.Load(xml); IEnumberable<XElement> cList = from el in xel.Elements(env + "element2").Element (n2 + "element3").Elements(n2 + "element4").Elements(ns + "element5") select el; foreach (XElement e in cList) Console.WriteLine(e.Attribute("attr2").Value.ToString()); This will give me the value all the attr 2 in the loop but I could be going about this all wrong for what I'm trying to acheive. I also need to collect the other attributes mentioned above in a collection (the Console reference is just me playing with this right now but the end result I need is a collection). So the end results would be a collection like attr1, attr2, attr3, attr4, attr5, attr6 2009-11-09, name1, 1, 1, 5.5, 3.4 2009-11-09, name2, 1, 3, 4, 4.5 Make Sense?

    Read the article

  • JSF action, value and binding catalog generator

    - by BBSnowman
    I am looking for a simple tool that generates a catalog of all used action methods, values and bindings. I'm working on a big JSF/RichFaces project and I have lost the overview of the used links to the beans. Therefore I need a tool (would be nice if it is a Eclipse plugin) that generates a simple list of all used EL expressions. Is there something out there?

    Read the article

  • jQuery Validator - Dynamic Text

    - by James
    Adding a validator to my form: jQuery.validator.addMethod('whatever', function(val, el) { // whatever goes here }, 'A maximum of ' + $('#my_id_here').val() + ' categories can be selected.'); This doesn't fly. I always get undefined. Is this a good, simple way to do this? Thanks

    Read the article

  • home directory and .emacs file in Windows 7

    - by prosseek
    I installed emacs 23.3.1 in c:/emacs-23.3. Following the hints in this page, I updated the site-start.el to set HOME environment variable. (setenv "HOME" "c:/users/USER/emacs") And I made c:/users/USER/.emacs (like I did in unix/mac) to write the code for using slime, but it doesn't seem to start slime correctly. Is this a correct way of setting emacs in Windows 7? Where do I put the .emacs file?

    Read the article

  • json data not rendered in backbone view

    - by user2535706
    I have been trying to render the json data to the view by calling the rest api and the code is as follows: var Profile = Backbone.Model.extend({ dataType:'jsonp', defaults: { intuitId: null, email: null, type: null }, }); var ProfileList = Backbone.Collection.extend({ model: Profile, url: '/v1/entities/6414256167329108895' }); var ProfileView = Backbone.View.extend({ el: "#profiles", template: _.template($('#profileTemplate').html()), render: function() { _.each(this.model.models, function(profile) { var profileTemplate = this.template(this.model.toJSON()); $(this.el).append(tprofileTemplate); }, this); return this; } }); var profiles = new ProfileList(); var profilesView = new ProfileView({model: profiles}); profiles.fetch(); profilesView.render(); and the html file is as follows: <!DOCTYPE html> <html> <head> <title>SPA Example</title> <!-- <link rel="stylesheet" type="text/css" href="src/css/reset.css" /> <link rel="stylesheet" type="text/css" href="src/css/harmony_compiled.css" /> --> </head> <body class="harmony"> <header> <div class="title">SPA Example</div> </header> <div id="profiles"></div> <script id="profileTemplate" type="text/template"> <div class="profile"> <div class="info"> <div class="intuitId"> <%= intuitId %> </div> <div class="email"> <%= email %> </div> <div class="type"> <%= type %> </div> </div> </div> </script> </body> </html> This gives me an error and the render function isn't invoking properly and the render function is called even before the REST API returns the JSON response. Could anyone please help me to figure out where I went wrong. Any help is highly appreciated Thank you

    Read the article

  • backbonejs remove anomaly concept

    - by user1537158
    I was building a small app for adding and deleting li from ul using Backbonejs.One of the SO members cymen helped me code it, using that i tailored the code a little.currently if i add one element and delete , it works , but the second time i add an element (to ul) and go to delete it , i get Uncaught TypeError: Cannot call method 'remove' of undefined Pasting my code here , HTML : <input type="text" id="name"> <button id="add">Add</button> <ul id="mylist"></ul> JS: $(function(){ var myCollection = Backbone.Collection.extend(); var myView = Backbone.View.extend({ el:$('body'), tagName:'li', initialize : function(e){ this.collection.bind("add",this.render,this); this.collection.bind("remove",this.render,this); }, events:{ 'click #add' : 'addfoo' }, addfoo : function(){ var myname= $('#name').val(); $('#name').val(''); this.collection.add({name:myname}); }, render : function(){ $('#mylist').empty(); this.collection.each(function(model){ console.log("myView"); var remove = new myRemoveView({model:model}); remove.render(); }); } }); var myRemoveView = Backbone.View.extend({ el:$('body'), events:{ 'click .button':'removeFoo' }, removeFoo : function(){ console.log("here"); this.model.collection.remove(this.model); }, render : function(){ console.log("second view"); $('#mylist').append('<li>'+this.model.get('name') + "<button class='button'>"+"delete"+"</button></li>"); return; } }); var view = new myView({collection: new myCollection()}); }); Two things i did not understand : i) in the removeFoo function , we write this.model.collection.remove(this.model) shouldnt this have been this.collection.model.remove , something of that sort ? ii) i add a li to ul , then i delete it , when i add another li (appending to ul works perfect) but this time when i go to delete it throws me the above error : Uncaught TypeError :cannot call method 'remove' of undefined can you please help me figure out these 2 doubts in my code , btw SO member cymen's code works like a charm only my tailored code (above) is giving me errors. SO member cymen's code : JS Fiddle for his code Thank you

    Read the article

  • Using HTML 5 SessionState to save rendered Page Content

    - by Rick Strahl
    HTML 5 SessionState and LocalStorage are very useful and super easy to use to manage client side state. For building rich client side or SPA style applications it's a vital feature to be able to cache user data as well as HTML content in order to swap pages in and out of the browser's DOM. What might not be so obvious is that you can also use the sessionState and localStorage objects even in classic server rendered HTML applications to provide caching features between pages. These APIs have been around for a long time and are supported by most relatively modern browsers and even all the way back to IE8, so you can use them safely in your Web applications. SessionState and LocalStorage are easy The APIs that make up sessionState and localStorage are very simple. Both object feature the same API interface which  is a simple, string based key value store that has getItem, setItem, removeitem, clear and  key methods. The objects are also pseudo array objects and so can be iterated like an array with  a length property and you have array indexers to set and get values with. Basic usage  for storing and retrieval looks like this (using sessionStorage, but the syntax is the same for localStorage - just switch the objects):// set var lastAccess = new Date().getTime(); if (sessionStorage) sessionStorage.setItem("myapp_time", lastAccess.toString()); // retrieve in another page or on a refresh var time = null; if (sessionStorage) time = sessionStorage.getItem("myapp_time"); if (time) time = new Date(time * 1); else time = new Date(); sessionState stores data that is browser session specific and that has a liftetime of the active browser session or window. Shut down the browser or tab and the storage goes away. localStorage uses the same API interface, but the lifetime of the data is permanently stored in the browsers storage area until deleted via code or by clearing out browser cookies (not the cache). Both sessionStorage and localStorage space is limited. The spec is ambiguous about this - supposedly sessionStorage should allow for unlimited size, but it appears that most WebKit browsers support only 2.5mb for either object. This means you have to be careful what you store especially since other applications might be running on the same domain and also use the storage mechanisms. That said 2.5mb worth of character data is quite a bit and would go a long way. The easiest way to get a feel for how sessionState and localStorage work is to look at a simple example. You can go check out the following example online in Plunker: http://plnkr.co/edit/0ICotzkoPjHaWa70GlRZ?p=preview which looks like this: Plunker is an online HTML/JavaScript editor that lets you write and run Javascript code and similar to JsFiddle, but a bit cleaner to work in IMHO (thanks to John Papa for turning me on to it). The sample has two text boxes with counts that update session/local storage every time you click the related button. The counts are 'cached' in Session and Local storage. The point of these examples is that both counters survive full page reloads, and the LocalStorage counter survives a complete browser shutdown and restart. Go ahead and try it out by clicking the Reload button after updating both counters and then shutting down the browser completely and going back to the same URL (with the same browser). What you should see is that reloads leave both counters intact at the counted values, while a browser restart will leave only the local storage counter intact. The code to deal with the SessionStorage (and LocalStorage not shown here) in the example is isolated into a couple of wrapper methods to simplify the code: function getSessionCount() { var count = 0; if (sessionStorage) { var count = sessionStorage.getItem("ss_count"); count = !count ? 0 : count * 1; } $("#txtSession").val(count); return count; } function setSessionCount(count) { if (sessionStorage) sessionStorage.setItem("ss_count", count.toString()); } These two functions essentially load and store a session counter value. The two key methods used here are: sessionStorage.getItem(key); sessionStorage.setItem(key,stringVal); Note that the value given to setItem and return by getItem has to be a string. If you pass another type you get an error. Don't let that limit you though - you can easily enough store JSON data in a variable so it's quite possible to pass complex objects and store them into a single sessionStorage value:var user = { name: "Rick", id="ricks", level=8 } sessionStorage.setItem("app_user",JSON.stringify(user)); to retrieve it:var user = sessionStorage.getItem("app_user"); if (user) user = JSON.parse(user); Simple! If you're using the Chrome Developer Tools (F12) you can also check out the session and local storage state on the Resource tab:   You can also use this tool to refresh or remove entries from storage. What we just looked at is a purely client side implementation where a couple of counters are stored. For rich client centric AJAX applications sessionStorage and localStorage provide a very nice and simple API to store application state while the application is running. But you can also use these storage mechanisms to manage server centric HTML applications when you combine server rendering with some JavaScript to perform client side data caching. You can both store some state information and data on the client (ie. store a JSON object and carry it forth between server rendered HTML requests) or you can use it for good old HTTP based caching where some rendered HTML is saved and then restored later. Let's look at the latter with a real life example. Why do I need Client-side Page Caching for Server Rendered HTML? I don't know about you, but in a lot of my existing server driven applications I have lists that display a fair amount of data. Typically these lists contain links to then drill down into more specific data either for viewing or editing. You can then click on a link and go off to a detail page that provides more concise content. So far so good. But now you're done with the detail page and need to get back to the list, so you click on a 'bread crumbs trail' or an application level 'back to list' button and… …you end up back at the top of the list - the scroll position, the current selection in some cases even filters conditions - all gone with the wind. You've left behind the state of the list and are starting from scratch in your browsing of the list from the top. Not cool! Sound familiar? This a pretty common scenario with server rendered HTML content where it's so common to display lists to drill into, only to lose state in the process of returning back to the original list. Look at just about any traditional forums application, or even StackOverFlow to see what I mean here. Scroll down a bit to look at a post or entry, drill in then use the bread crumbs or tab to go back… In some cases returning to the top of a list is not a big deal. On StackOverFlow that sort of works because content is turning around so quickly you probably want to actually look at the top posts. Not always though - if you're browsing through a list of search topics you're interested in and drill in there's no way back to that position. Essentially anytime you're actively browsing the items in the list, that's when state becomes important and if it's not handled the user experience can be really disrupting. Content Caching If you're building client centric SPA style applications this is a fairly easy to solve problem - you tend to render the list once and then update the page content to overlay the detail content, only hiding the list temporarily until it's used again later. It's relatively easy to accomplish this simply by hiding content on the page and later making it visible again. But if you use server rendered content, hanging on to all the detail like filters, selections and scroll position is not quite as easy. Or is it??? This is where sessionStorage comes in handy. What if we just save the rendered content of a previous page, and then restore it when we return to this page based on a special flag that tells us to use the cached version? Let's see how we can do this. A real World Use Case Recently my local ISP asked me to help out with updating an ancient classifieds application. They had a very busy, local classifieds app that was originally an ASP classic application. The old app was - wait for it: frames based - and even though I lobbied against it, the decision was made to keep the frames based layout to allow rapid browsing of the hundreds of posts that are made on a daily basis. The primary reason they wanted this was precisely for the ability to quickly browse content item by item. While I personally hate working with Frames, I have to admit that the UI actually works well with the frames layout as long as you're running on a large desktop screen. You can check out the frames based desktop site here: http://classifieds.gorge.net/ However when I rebuilt the app I also added a secondary view that doesn't use frames. The main reason for this of course was for mobile displays which work horribly with frames. So there's a somewhat mobile friendly interface to the interface, which ditches the frames and uses some responsive design tweaking for mobile capable operation: http://classifeds.gorge.net/mobile  (or browse the base url with your browser width under 800px)   Here's what the mobile, non-frames view looks like:   As you can see this means that the list of classifieds posts now is a list and there's a separate page for drilling down into the item. And of course… originally we ran into that usability issue I mentioned earlier where the browse, view detail, go back to the list cycle resulted in lost list state. Originally in mobile mode you scrolled through the list, found an item to look at and drilled in to display the item detail. Then you clicked back to the list and BAM - you've lost your place. Because there are so many items added on a daily basis the full list is never fully loaded, but rather there's a "Load Additional Listings"  entry at the button. Not only did we originally lose our place when coming back to the list, but any 'additionally loaded' items are no longer there because the list was now rendering  as if it was the first page hit. The additional listings, and any filters, the selection of an item all were lost. Major Suckage! Using Client SessionStorage to cache Server Rendered Content To work around this problem I decided to cache the rendered page content from the list in SessionStorage. Anytime the list renders or is updated with Load Additional Listings, the page HTML is cached and stored in Session Storage. Any back links from the detail page or the login or write entry forms then point back to the list page with a back=true query string parameter. If the server side sees this parameter it doesn't render the part of the page that is cached. Instead the client side code retrieves the data from the sessionState cache and simply inserts it into the page. It sounds pretty simple, and the overall the process is really easy, but there are a few gotchas that I'll discuss in a minute. But first let's look at the implementation. Let's start with the server side here because that'll give a quick idea of the doc structure. As I mentioned the server renders data from an ASP.NET MVC view. On the list page when returning to the list page from the display page (or a host of other pages) looks like this: https://classifieds.gorge.net/list?back=True The query string value is a flag, that indicates whether the server should render the HTML. Here's what the top level MVC Razor view for the list page looks like:@model MessageListViewModel @{ ViewBag.Title = "Classified Listing"; bool isBack = !string.IsNullOrEmpty(Request.QueryString["back"]); } <form method="post" action="@Url.Action("list")"> <div id="SizingContainer"> @if (!isBack) { @Html.Partial("List_CommandBar_Partial", Model) <div id="PostItemContainer" class="scrollbox" xstyle="-webkit-overflow-scrolling: touch;"> @Html.Partial("List_Items_Partial", Model) @if (Model.RequireLoadEntry) { <div class="postitem loadpostitems" style="padding: 15px;"> <div id="LoadProgress" class="smallprogressright"></div> <div class="control-progress"> Load additional listings... </div> </div> } </div> } </div> </form> As you can see the query string triggers a conditional block that if set is simply not rendered. The content inside of #SizingContainer basically holds  the entire page's HTML sans the headers and scripts, but including the filter options and menu at the top. In this case this makes good sense - in other situations the fact that the menu or filter options might be dynamically updated might make you only cache the list rather than essentially the entire page. In this particular instance all of the content works and produces the proper result as both the list along with any filter conditions in the form inputs are restored. Ok, let's move on to the client. On the client there are two page level functions that deal with saving and restoring state. Like the counter example I showed earlier, I like to wrap the logic to save and restore values from sessionState into a separate function because they are almost always used in several places.page.saveData = function(id) { if (!sessionStorage) return; var data = { id: id, scroll: $("#PostItemContainer").scrollTop(), html: $("#SizingContainer").html() }; sessionStorage.setItem("list_html",JSON.stringify(data)); }; page.restoreData = function() { if (!sessionStorage) return; var data = sessionStorage.getItem("list_html"); if (!data) return null; return JSON.parse(data); }; The data that is saved is an object which contains an ID which is the selected element when the user clicks and a scroll position. These two values are used to reset the scroll position when the data is used from the cache. Finally the html from the #SizingContainer element is stored, which makes for the bulk of the document's HTML. In this application the HTML captured could be a substantial bit of data. If you recall, I mentioned that the server side code renders a small chunk of data initially and then gets more data if the user reads through the first 50 or so items. The rest of the items retrieved can be rather sizable. Other than the JSON deserialization that's Ok. Since I'm using SessionStorage the storage space has no immediate limits. Next is the core logic to handle saving and restoring the page state. At first though this would seem pretty simple, and in some cases it might be, but as the following code demonstrates there are a few gotchas to watch out for. Here's the relevant code I use to save and restore:$( function() { … var isBack = getUrlEncodedKey("back", location.href); if (isBack) { // remove the back key from URL setUrlEncodedKey("back", "", location.href); var data = page.restoreData(); // restore from sessionState if (!data) { // no data - force redisplay of the server side default list window.location = "list"; return; } $("#SizingContainer").html(data.html); var el = $(".postitem[data-id=" + data.id + "]"); $(".postitem").removeClass("highlight"); el.addClass("highlight"); $("#PostItemContainer").scrollTop(data.scroll); setTimeout(function() { el.removeClass("highlight"); }, 2500); } else if (window.noFrames) page.saveData(null); // save when page loads $("#SizingContainer").on("click", ".postitem", function() { var id = $(this).attr("data-id"); if (!id) return true; if (window.noFrames) page.saveData(id); var contentFrame = window.parent.frames["Content"]; if (contentFrame) contentFrame.location.href = "show/" + id; else window.location.href = "show/" + id; return false; }); … The code starts out by checking for the back query string flag which triggers restoring from the client cache. If cached the cached data structure is read from sessionStorage. It's important here to check if data was returned. If the user had back=true on the querystring but there is no cached data, he likely bookmarked this page or otherwise shut down the browser and came back to this URL. In that case the server didn't render any detail and we have no cached data, so all we can do is redirect to the original default list view using window.location. If we continued the page would render no data - so make sure to always check the cache retrieval result. Always! If there is data the it's loaded and the data.html data is restored back into the document by simply injecting the HTML back into the document's #SizingContainer element:$("#SizingContainer").html(data.html); It's that simple and it's quite quick even with a fully loaded list of additional items and on a phone. The actual HTML data is stored to the cache on every page load initially and then again when the user clicks on an element to navigate to a particular listing. The former ensures that the client cache always has something in it, and the latter updates with additional information for the selected element. For the click handling I use a data-id attribute on the list item (.postitem) in the list and retrieve the id from that. That id is then used to navigate to the actual entry as well as storing that Id value in the saved cached data. The id is used to reset the selection by searching for the data-id value in the restored elements. The overall process of this save/restore process is pretty straight forward and it doesn't require a bunch of code, yet it yields a huge improvement in the usability of the site on mobile devices (or anybody who uses the non-frames view). Some things to watch out for As easy as it conceptually seems to simply store and retrieve cached content, you have to be quite aware what type of content you are caching. The code above is all that's specific to cache/restore cycle and it works, but it took a few tweaks to the rest of the script code and server code to make it all work. There were a few gotchas that weren't immediately obvious. Here are a few things to pay attention to: Event Handling Logic Timing of manipulating DOM events Inline Script Code Bookmarking to the Cache Url when no cache exists Do you have inline script code in your HTML? That script code isn't going to run if you restore from cache and simply assign or it may not run at the time you think it would normally in the DOM rendering cycle. JavaScript Event Hookups The biggest issue I ran into with this approach almost immediately is that originally I had various static event handlers hooked up to various UI elements that are now cached. If you have an event handler like:$("#btnSearch").click( function() {…}); that works fine when the page loads with server rendered HTML, but that code breaks when you now load the HTML from cache. Why? Because the elements you're trying to hook those events to may not actually be there - yet. Luckily there's an easy workaround for this by using deferred events. With jQuery you can use the .on() event handler instead:$("#SelectionContainer").on("click","#btnSearch", function() {…}); which monitors a parent element for the events and checks for the inner selector elements to handle events on. This effectively defers to runtime event binding, so as more items are added to the document bindings still work. For any cached content use deferred events. Timing of manipulating DOM Elements Along the same lines make sure that your DOM manipulation code follows the code that loads the cached content into the page so that you don't manipulate DOM elements that don't exist just yet. Ideally you'll want to check for the condition to restore cached content towards the top of your script code, but that can be tricky if you have components or other logic that might not all run in a straight line. Inline Script Code Here's another small problem I ran into: I use a DateTime Picker widget I built a while back that relies on the jQuery date time picker. I also created a helper function that allows keyboard date navigation into it that uses JavaScript logic. Because MVC's limited 'object model' the only way to embed widget content into the page is through inline script. This code broken when I inserted the cached HTML into the page because the script code was not available when the component actually got injected into the page. As the last bullet - it's a matter of timing. There's no good work around for this - in my case I pulled out the jQuery date picker and relied on native <input type="date" /> logic instead - a better choice these days anyway, especially since this view is meant to be primarily to serve mobile devices which actually support date input through the browser (unlike desktop browsers of which only WebKit seems to support it). Bookmarking Cached Urls When you cache HTML content you have to make a decision whether you cache on the client and also not render that same content on the server. In the Classifieds app I didn't render server side content so if the user comes to the page with back=True and there is no cached content I have to a have a Plan B. Typically this happens when somebody ends up bookmarking the back URL. The easiest and safest solution for this scenario is to ALWAYS check the cache result to make sure it exists and if not have a safe URL to go back to - in this case to the plain uncached list URL which amounts to effectively redirecting. This seems really obvious in hindsight, but it's easy to overlook and not see a problem until much later, when it's not obvious at all why the page is not rendering anything. Don't use <body> to replace Content Since we're practically replacing all the HTML in the page it may seem tempting to simply replace the HTML content of the <body> tag. Don't. The body tag usually contains key things that should stay in the page and be there when it loads. Specifically script tags and elements and possibly other embedded content. It's best to create a top level DOM element specifically as a placeholder container for your cached content and wrap just around the actual content you want to replace. In the app above the #SizingContainer is that container. Other Approaches The approach I've used for this application is kind of specific to the existing server rendered application we're running and so it's just one approach you can take with caching. However for server rendered content caching this is a pattern I've used in a few apps to retrofit some client caching into list displays. In this application I took the path of least resistance to the existing server rendering logic. Here are a few other ways that come to mind: Using Partial HTML Rendering via AJAXInstead of rendering the page initially on the server, the page would load empty and the client would render the UI by retrieving the respective HTML and embedding it into the page from a Partial View. This effectively makes the initial rendering and the cached rendering logic identical and removes the server having to decide whether this request needs to be rendered or not (ie. not checking for a back=true switch). All the logic related to caching is made on the client in this case. Using JSON Data and Client RenderingThe hardcore client option is to do the whole UI SPA style and pull data from the server and then use client rendering or databinding to pull the data down and render using templates or client side databinding with knockout/angular et al. As with the Partial Rendering approach the advantage is that there's no difference in the logic between pulling the data from cache or rendering from scratch other than the initial check for the cache request. Of course if the app is a  full on SPA app, then caching may not be required even - the list could just stay in memory and be hidden and reactivated. I'm sure there are a number of other ways this can be handled as well especially using  AJAX. AJAX rendering might simplify the logic, but it also complicates search engine optimization since there's no content loaded initially. So there are always tradeoffs and it's important to look at all angles before deciding on any sort of caching solution in general. State of the Session SessionState and LocalStorage are easy to use in client code and can be integrated even with server centric applications to provide nice caching features of content and data. In this post I've shown a very specific scenario of storing HTML content for the purpose of remembering list view data and state and making the browsing experience for lists a bit more friendly, especially if there's dynamically loaded content involved. If you haven't played with sessionStorage or localStorage I encourage you to give it a try. There's a lot of cool stuff that you can do with this beyond the specific scenario I've covered here… Resources Overview of localStorage (also applies to sessionStorage) Web Storage Compatibility Modernizr Test Suite© Rick Strahl, West Wind Technologies, 2005-2013Posted in JavaScript  HTML5  ASP.NET  MVC   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • how does openvpn decide which interface to get IP addrs from

    - by bkrupa
    Using ubuntu 10.04 on both ends. We have a client and server machine on the SAME network attempting to make a vpn connection. We use the config files from here and made minimal changes. The server and client start and seem to connect without any trouble. The server looks like: Wed Feb 23 22:13:22 2011 MULTI: multi_create_instance called Wed Feb 23 22:13:22 2011 192.168.1.55:47166 Re-using SSL/TLS context Wed Feb 23 22:13:22 2011 192.168.1.55:47166 LZO compression initialized Wed Feb 23 22:13:22 2011 192.168.1.55:47166 Control Channel MTU parms [ L:1574 D:138 EF:38 EB:0 ET:0 EL:0 ] Wed Feb 23 22:13:22 2011 192.168.1.55:47166 Data Channel MTU parms [ L:1574 D:1450 EF:42 EB:135 ET:32 EL:0 AF:3/1 ] Wed Feb 23 22:13:22 2011 192.168.1.55:47166 Local Options hash (VER=V4): 'f7df56b8' Wed Feb 23 22:13:22 2011 192.168.1.55:47166 Expected Remote Options hash (VER=V4): 'd79ca330' Wed Feb 23 22:13:22 2011 192.168.1.55:47166 TLS: Initial packet from 192.168.1.55:47166, sid=69112e42 5458135b *...* Wed Feb 23 22:13:22 2011 192.168.1.55:47166 Control Channel: TLSv1, cipher TLSv1/SSLv3 DHE-RSA-AES256-SHA, 1024 bit RSA Wed Feb 23 22:13:22 2011 192.168.1.55:47166 [client1] Peer Connection Initiated with 192.168.1.55:47166 On the client side the connection looks like: Wed Feb 23 22:20:07 2011 [server] Peer Connection Initiated with [AF_INET]192.168.1.41:1194 Wed Feb 23 22:20:10 2011 SENT CONTROL [server]: 'PUSH_REQUEST' (status=1) Wed Feb 23 22:20:10 2011 PUSH: Received control message: 'PUSH_REPLY,route-gateway 10.8.0.4,ping 10,ping-restart 120,ifconfig 10.8.0.50 255.255.255.0' ... Wed Feb 23 22:20:10 2011 /sbin/ifconfig tap0 10.8.0.50 netmask 255.255.255.0 mtu 1500 broadcast 10.8.0.255 Wed Feb 23 22:20:10 2011 Initialization Sequence Completed The openvpn server has been configured to assign ip addresses in the range 10.8.0.* and the client has been given 10.8.0.50. When I run the following nmap from the client: Starting Nmap 5.00 ( http://nmap.org ) at 2011-02-23 22:04 EST Host 10.8.0.50 is up (0.00047s latency). Nmap done: 256 IP addresses (1 host up) scanned in 30.34 seconds Host 192.168.1.1 is up (0.0025s latency). Host 192.168.1.18 is up (0.074s latency). Host 192.168.1.41 is up (0.0024s latency). Host 192.168.1.55 is up (0.00018s latency). Nmap done: 256 IP addresses (4 hosts up) scanned in 6.33 seconds If I run an nmap from the server on 10.8.0.* I get nothing. If the client has two interfaces (wireless and tap device) when you look for a certain ip address, how does it decide which interface to connect on? edit I am trying to set up a vpn so that I can connect to my home network from a remote network. It seems like openvpn is connecting but none of the computers on my home network appear as network machines even after the connection is "Established". Stripped versions of the client and server config files are posted below. Thanks for any help you can offer. server.conf port 1194 proto udp dev tap ca /etc/openvpn/easy-rsa/keys/ca.crt cert /etc/openvpn/easy-rsa/keys/server.crt key /etc/openvpn/easy-rsa/keys/server.key # This file should be kept secret dh /etc/openvpn/easy-rsa/keys/dh1024.pem ifconfig-pool-persist ipp.txt server-bridge 10.8.0.4 255.255.255.0 10.8.0.50 10.8.0.100 keepalive 10 120 comp-lzo persist-key persist-tun status openvpn-status.log verb 3 client.conf client dev tap dev-node tap0901 proto udp remote ********** 1194 resolv-retry infinite nobind persist-key persist-tun ca ca.crt cert client1.crt key client1.key comp-lzo verb 3 one other thing that might be helpful, I tried to connect using the openvpn gui for windows and the connection stalls out on "obtaining configuration" and the bar just scrolls forever.

    Read the article

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