Turbolinks 3 and render a partial - ruby-on-rails

I'm excited about turbolinks3(it allows you to render only a partial and not reload all the body)
You can read more about it from here: https://github.com/rails/turbolinks/blob/master/CHANGELOG.md
It's amazing but I've a problem:
In browsers that doesn't support pushState(example ie8/9), I don't know how manage the behavior.
It give me this error on IE8:
Could not set the innerHTML property. Invalid target element for this operation.
My Controller code is:
def create
#post = Post.find(params[:post_id])
if #post.comments.create(comment_params)
render '_comment', change: [:comments, :super_test], layout: false, :locals => { comment: #post.comments.last }
else
render json:'error'
end
end
A 'solution' could be that I do:
redirect_to #post, change: [:comments, :super_test]
But then the problem is that it reply with a lot of data that I don't need!(and the response time is bigger) So I reallt want find another solution.
How I can resolve this problem ?
I've thought about 2 solution:
1) Use history.js / modernizr for polyfill the pushState on old browsers
But I've tried but I always get the same error(like if I don't have
modernizr)
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Sat, 25 Apr 2015 17:28:52 UTC
Message: Could not set the innerHTML property. Invalid target element for this operation.
Line: 26
Char: 30464
Code: 0
URI: https://stark-forest-5974.herokuapp.com/assets/application-83a3aa4fd4a1ee124da87760bfdca86febd4fc1cb8a13167c892a15ce3caa53d.js
2) Find a way for check if the request is done by turbolinks/pjax or not...and use conditional render or redirect_to
But I've not idea on how I can do it, because turbolinks doesn't send
a specific header like does jquery-pjax
Any suggestions ? I really appreciate it!
PS: Please don't suggest me backbone/angular/ember/react, I already know them(backbone), but I want try turbolinks.

Your first instinct is right, with IE8 you'll need modernizr. the problem is neither you code or turbolinks here, it's IE8.
PS: Turbolinks doesn't actually replace JS frameworks, you can perfectly use it with one of them if you want. I did use it with React and Angular. Turbolinks just avoids re-loading the same thing several times (wich feels already magic).

Related

obtaining a reference to IHTMLCanvasElement

How Can I get a DOM reference to the canvas Handle. I'm using Delphi, IE11 and the corresponding MSMHTML Type library,I suspected it's along the lines of
canvasHandle := (HTMLDoc3.getElementById('canvas') as IHTMLCanvasElement);
the Html:
<canvas id="canvas">
....
</canvas>
however this throws an exception 'Interface not supported'
TWebBrowser control, by default uses IE7 standards/rendering mode.
You need to tell the control to use latest standards.
There are a few ways of doing this.
Here are two of the ways known to me:
Either you specify FEATURE_<some feature> for your application in the registry (.e.g. FEATURE_BROWSER_EMULATION also a nice article here).
Add a "meta http-equiv-'X-UA-Compatible' content= edge" to the <head> block of a webpage to force Windows IE to use the latest standards.
This will enable your HTML5 functionality working without the need for registry tweaks.

when & how dust.render will get call

I have written dust js I call render function from my jquery local function.
Anyone please example how dust render get back. Do I need to call in onload function or not?
dust.render("tmp_skill", json_object, function(err, html_out) {
//HTML output
$('#page').html(html_out);
console.log(html_out);
});
your code is ok, you can call the render method at any time. if you call it in the onload, you have to compile and load that template (tmp_skill) in the dust cache previously.
the steps to render dust are:
1) compile the template
2) load it to the dust cache with a name.
3) render the template
SO
var compiled = dust.compile("Hello world {name}", "tmp_skill");
dust.loadSource(compiled);
dust.render("tmp_skill", json_object, function(err, html_out) {
//HTML output
$('#page').html(html_out);
console.log(html_out);
});
Anything you need you can read our wiki. you will find a lot of documentation and examples here: https://github.com/linkedin/dustjs/wiki
I suppose this question is related to your previous question, How to write dustjs in php code without nodejs
I tested your code and it works just fine.
do check your browser's console to see if there are errors after loading the page.
also, do use the linkedin fork of dust: https://github.com/linkedin/dustjs - it's much more actively developed.

JqGrid DataBinding exception while exporting to excel file

I am trying to export JqGrid to excel so i follow this instruction and i use it like at below.
var grid = new JqGridModelParticipiant().JqGridParticipiant;
var query = db.ReservationSet.Select(r => new
{
r.Id,
Name = r.Doctor.Name,
Identity = r.Doctor.Identity,
Title = r.Doctor.Title.Name,
Total = r.TotalTL,
Organization = r.Organization.Name
});
grid.ExportToExcel(query,"file.xls");
And i get below exception on the line of " grid.ExportToExcel(query,"file.xls");"
Data binding directly to a store query (DbSet, DbQuery, DbSqlQuery) is
not supported. Instead populate a DbSet with data, for example by
calling Load on the DbSet, and then bind to local data. For WPF bind
to DbSet.Local. For WinForms bind to DbSet.Local.ToBindingList().
As far as i understand that it expect to have ObservableCollection that is on DbSet.Local member. But i am working on projected query so i can't do that.
What is the solution for this problem.
In the answer I posted the demo which shows how to implement export to Excel (real *.XLSX file instead of HTML fragment renamed to *.XLS used here).
The method used for exported to the Excel in jqSuite (the demo) produce HTML fragment like
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/excel; charset=utf-8
Server: Microsoft-IIS/7.0
X-AspNetMvc-Version: 2.0
content-disposition: attachment; filename=grid.xls
X-AspNet-Version: 2.0.50727
X-Powered-By: ASP.NET
Date: Fri, 29 Jun 2012 14:24:54 GMT
Connection: close
<table cellspacing="0" rules="all" border="1" id="_exportGrid" style="border-collapse:collapse;">
<tr>
<td>OrderID</td><td>CustomerID</td><td>OrderDate</td><td>Freight</td><td>ShipName</td>
</tr><tr>
<td>10248</td><td>VINET</td><td>1996/07/04</td><td>32.3800</td><td>Vins et alcools Chevalier</td>
</tr><tr>
<td>10249</td><td>TOMSP</td><td>1996/07/05</td><td>11.6100</td><td>Toms Spezialitäten</td>
</tr><tr>
<td>10250</td><td>HANAR</td><td>1996/07/08</td><td>65.8300</td><td>Hanari Carnes</td>
</tr><tr>
...
</table>
instead of creating of real Excel file. The way is very unsafe because at the opening the "Standard" type of data will be always used. For example if you would export the data like
<td>10249</td><td>TOMSP</td><td>1996/07/05</td><td>11.02.12</td><td>Toms Spezialitäten</td>
the text "11.02.12" will be automatically converted to the date 11.02.2012 if German locale are used as default:
The name "Toms Spezialitäten" from will be wrong displayed as "Toms Spezialitäten".
It can be especially dangerous in case of large table where some small part of data in the middle of grid will be wrong converted. In one project I displayed information about Software and some software versions will be wrong converted to the Date type.
Because of such and other close problems I create real Excel file on the server using Open XML SDK 2.5 or Open XML SDK 2.0. In the way one have no problems described above. So I recommend you to follow the approach described in my old answer.

Page resize fails after updating dom content dynamically

I'm developing a mobile application using jqm and phonegap.
I've created a multi-page html file. There are two jqm pages with ids 'myPage1' and 'myPage2' inside single html file.'myPage1' contains a list of items.On click of list item i've to issue an ajax call and show the response data on 'myPage2'.
After getting response from ajax call i'm calling jqm changePage function like:
$.mobile.changePage('#myPage2', {
transition : "slide",
reverse : false,
changeHash : true
});
On pagecreate event i'm making some changes in DOM which causes page display size to increase. Everything works perfectly fine on pc browser but on android the page size remains same as screen size i.e. i cannot scroll down to see full page content.
I've tried calling $('#myPage2').page() and $(document).resize() after updating DOM but all in vain.
The problem only occurs when changing page using jqm ajax based page loading. If i create a separate html file, declare 'myPage2' in it and instead of calling $.mobile.changePage, use rel='external' as link attribute in 'myPage1' list item, the problem resolves. I don't even have to call $('#myPage2').page().
But i want to use jqm Ajax based page loading as i want to leverage jqm page transitions.
Following are my config details:
Jquery verison - 1.6.2
Jquery Mobile Version - 1.0 Beta 2
Android version - 2.2.2
Android Browser : Mozilla/5.0 (Linux; U; Android 2.2.2; hd-us; eeepc Build/FRG83G) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Any pointer would be really helpful as my work is gated due to this.
Thanks in advance.
Ajay
instead of .resize(); or .page(); try the new trigger option:
.trigger('create');
Here are the release notes for Beta2:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

error on firefox: $.widget is not a function

I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function

Resources