Datatable (without pagination) > missing parameters in form submit - ruby-on-rails

#3 EDIT => CAUSE FOUND!
So I found that what is causing the issue is Datatable. Even if I'm not using pagination, Datatable is limiting the number of rows the form can POST.
jQuery('#tblStats').DataTable( {
dom: 'ft',
ordering: false,
jQueryUI: true,
scrollY: "400px",
deferRender: true,
scroller: true,
scrollCollapse: true,
language: {
search: "<%= t('app.bouton.filter') %>",
infoEmpty: "<%= t('app.datetables.sZeroRecords') %>"
}
});
Any ideas on how to avoid that limit and continue using Datatable?
I've already tried this but still the same:
https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/
Thanks!
INITIAL MESSAGE
I'm having a hard time trying to figure out why I have some missing parameters when submitting a form.
Inside the form there is a table that is dynamically populated. 10 parameters are sent for each row. The submit works fine with small data but it seems to have a limit at 1898 parameters. Some times the parameters of the first 5 or 6 rows are missing and some times are the parameters of the last rows. This is totally random. But the limit seems to be always the same: no more than 1898 parameters are sent.
I get no error at all. The parameters are just not sent. This is happening in production server as well than in development server. The servers are different and the OS is different as well.
Rails version is 2.3.18. Ruby version is 1.8.7.
Does anyone have any idea of what's going on?
Thanks in advance for your help!
#1 EDIT
Following the advice of Oshanz I have found passenger's config file. In my case:
$>/home/alberto/.rvm/gems/ree-1.8.7-2012.02#dev/gems/passenger-4.0.37/resources/templates/standalone/config.erb
In the file there is a parameter "client_max_body_size" inside the http{}. It has a default value of 1048m. Even if this seems big enough I have changed it to 2048m.
Unfortunately this didn't work and the result is still the same.
#2 EDIT
So I'm still having the problem.
As I commented below I'm using a form_remote_tag with a dynamically populated table inside. This will submit using XMLHttpRequest in the background instead of the regular reloading POST arrangement.
This generates:
<form action="/wizi_comm/stats" method="post" onsubmit="Element.hide('err');Element.show('spinner');; new Ajax.Request('/wizi_comm/stats', {asynchronous:true, evalScripts:true, onComplete:function(request){Element.hide('spinner');Element.show('mainBd');}, parameters:Form.serialize(this)}); return false;">
I have also tested using form_tag and the result is the same. Some parameters are just not sent.
<form action="stats" method="post">
I have check passenger's config files with no luck. I do really need some ideas here:
Do you think this is due to a configuration somewhere?
Do you think I should change the way I'm submitting the form?
Thanks in advance for your help!

SOLUTION
I did some tests with Datatable's based solutions as rows().data(). I was still missing some rows. I was also getting some errors from the API.
At this point I think that other JS libraries on the project are interfering with jQuery. I will study this when I will have the time.
What I finally did is to remove Datatable's initialisation on the table and to use a pure CSS solution to do the scroll. If someone is interested, my solution is based on this:
Pure CSS solution scroll table
table.scroll {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead tr { display: block; }
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 140px;
border-right: 1px solid black;
}
table.scroll thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
table.scroll thead tr th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}
table.scroll tbody { border-top: 2px solid black; }
table.scroll tbody td:last-child, thead th:last-child {
border-right: none !important;
}
Thanks again for your help !

Related

How to increase a php var without refreshing the page?

can somebody help me to solve this prob :
I've a page width some div ID (Section of page #1 #2 ...) and a link (NEXT), how i can do to increase this link each time the user click on without refreshing the page ?
sample if link was 1 .. link become 2 etc ..
Any ideas ?
AJAX if you need to pull data from the server again on the click.
Standard JavaScript if you just want to do the number increment locally in the browser without anything fancy.
I would use an ajax for that just to send a request to php script what would generate a whole <a> tag and insert it in html. So onload of the page you set counter on 1 for example and everytime you click the 'next' you trigger onclick event (call a function on this event) increase your counter by 1 and send this value to server where script is generating for you tag or something similar... add it to the html, so you can update your link in html without refreshing the page. On parallel you can delete, hide or show other elements if you need.
I hope that will give you some idea. I would tell you more if i would be able to see your code, so far it is as i see your situation. Sorry if i didn't get it right; )
<html>
<head>
<style>
div {
display: block;
width: 100px;
height: 800px;
background-color: red;
}
a {
font-size: 3em;
position:fixed;
top: 0;
right:0;
}
</style>
</head>
<body>
<div id="section1">one</div>
<div id="section2">two</div>
<div id="section3">three</div>
next
<script>
var i = 1;
function increaseLink() {
i++;
var link = document.getElementById("linkId");
link.innerHTML = "click";
link.setAttribute('href', "#section"+ i);
return false;
}
</script>
</body>
</html>
Is that what you need? You do not need php or ajax to achieve this.
In the browser script: Listen onClick event on links and send AJAX-request to php-script when links is clicked.
In the server script: Update field on database or other storage.

"Download our App" notification on mobile devices

Can someone please enlighten me how those notifications work? I was searching some infos about it but no luck. Don't know if I name it right.
On some pages there is this popup to download site's mobile application. It contains X close button and Download App button. For iOS devices it always looks the same, so I figured it's not custom made. Does it come somehow from app store?
Here is the picture: http://oi60.tinypic.com/2dmhymc.jpg
This is called a "Smart App Banner" and can easily be added to your site using an extra meta tag:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
You can include three comma-separated parameters in the content attribute:
app-id Required
Your app's unique identifier. To find your app ID from the iTunes Link Maker, type the name of your app in the Search field, and select the appropriate country and media type. In the results, find your app and select iPhone App Link in the column on the right. Your app ID is the nine-digit number in between id and ?mt.
affiliate-data Optional
Your iTunes affiliate string, if you are an iTunes affiliate. If you are not, find out more about becoming an iTunes affiliate at http://www.apple.com/itunes/affiliates/.
app-argument Optional
A URL that provides context to your native app. If you include this, and the user has your app installed, she can jump from your website to the corresponding position in your iOS app. Typically, it is beneficial to retain navigational context because:
If the user is deep within the navigational hierarchy of your website, you can pass the document’s entire URL, and then parse it in your app to reroute her to the correct location in your app.
If the user performs a search on your website, you can pass the query string so that she can seamlessly continue the search in your app without having to retype her query.
If the user is in the midst of creating content, you can pass the session ID to download the web session state in your app so she can nondestructively resume her work.
You can generate the app-argument of each page dynamically with a server-side script. You can format it however you'd like, as long as it is a valid URL.
Note: You cannot display Smart App Banners inside of a frame. Banners won’t appear in the iOS Simulator.
Source and more info
Here is a styled dropdown banner that I designed that detects mobile platforms.
HTML
<div id="note">
<p>It is recommended that you use landscape mode for a better experience (Turn your phone sideways).</p>
<a id="close">[Dismiss]</a>
Javascript
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
document.getElementById("note").style.visibility = "block";}
close = document.getElementById("close");
close.addEventListener('click', function() {
note = document.getElementById("note");
note.style.display = 'none';
}, false);
CSS
#note {
visibility: hidden;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: white;
position: absolute;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #000000;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;}
#-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }}
#-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-50px); }
10%, 90% { -moz-transform: translateY(0px); }}
.cssanimations.csstransforms #note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;}
.cssanimations.csstransforms #close {
display: none;}

Asp.Net MVC 4 Generic Element

Sorry for the generic title, but i dont know how to call the element i want to create. Thats what i need... i tried to post image, but i dont get necessary privileges yet. So ill try to describe it.
Here on stackoverflow, on the question's page, after each title and summary there are some boxes displaying the tags from the questions.
I want the exactly same look, but instead of links, those boxes should act the same way as a Radio Button List. I can only choose one of then at a time and when pick one, the selected one ill get different style added to him. After submitting the form i should be able to recover de selected item in the controller.
I'm using Asp.Net MVC4 and the options that make the element will come from a controller.
Sorry for the question without code or something that i allready make. But i have this necessity and i dont even know if this sort of style or element have an specific name or keyword D.
Do you guys know from where to start with something (tutorials with similar final result ?) ?
Thanks for the help and sorry for the bad english.
Code After Looking at the proposed answers' link
CSS Code
input[type=radio] { display: none;}
.rbLista span { font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Sans-serif;
font-size:12px; background: RGB(217,217,217); border: 1px solid RGB(217,217,217); }
.rbLista span:hover { border: 1px solid RGB(54,52,53); background: RGB(54,52,53); color: white; }
.rbLista input[type=radio]:checked + span { background: #D71712; color: #fff; border: 1px solid #D71712; }
.rbLista input[type=radio]:checked + span:hover { background: #D71712; }
and View Code
<section class="rbLista">
#foreach (var item in Model.ChamadoDetalhe.Transitos)
{
<label>
#Html.RadioButtonFor(x => x.NovoTransito.Transito, #item.Text, new { #id = item.Text, #text = item.Text })<span>#item.Text</span>
</label>
}
#Html.ValidationMessageFor(x => x.NovoTransito.Transito)
</section>
You could try something like this. Here's a working demo.

Using qTip2 with Ruby on Rails

I found this wonderfull tooltip called qTip2. Loving it so far but has gotten myself into a problem using it.
I was able to install and get qTip2 running with my Rails 3.1 setup. However I'm running into a problem when I'm using qTip2's ajax functionality.
qTip2 ajax request requires a link to the script to be executed before displaying it in the tooltip content div (which is automatically generated by qTip2). You can look at the code I'm referring to here.
http://www.craigsworks.com/projects/qtip2/demos/#ajax
The problem with it is that it does not really go well with RoR. An ajax request declared using RoR is more explicit, where I can explicitly tell rails which div id I would like to update.
Given the following circumstances I needed to do the following things:
the tooltip content must be dynamic
I needed to use the qTip2 ajax functionality so that I could create a custom layout for the tooltip content.
I did try the followings though:
Put the html snippet to be loaded to the content div in the public folder. The content loaded with the right format but I can't have dynamic content. html.erb files didn't seem to work in this folder. Is there any alternative to this folder that would work but with dynamic content?
Tried to use qTip2 ajax request with RoR but was not successful. What I did was I tried to explicitly define the ajax update id in the .js respond file (going through the controller and views etc.). But figuring out the exact id that was generated by qTip2 plugin was a little too overwhelming for me.
here is what I have
html
<a id="editor1" href="/deals_details.html.erb">
javascript
$(document).ready(function()
{
$('#editor1').each(function()
{
$(this).qtip(
{
content: {
text: '<img class="throbber" src="/assets/throbber.gif" alt="Loading..." />',
ajax: {
/*once: false*/
url: $(this).attr('href')
},
title: {
text: 'qTip2 Test',
button: true
}
},
position: {
at: 'center',
my: 'center',
viewport: $(window),
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
}
})
})
// Make sure it doesn't follow the link when we click it
.click(function(event) { event.preventDefault(); });
});
CSS
.ui-tooltip-wiki{
max-width: 440px;
}
.ui-tooltip-wiki .ui-tooltip-content{
padding: 10px;
line-height: 12.5px;
}
.ui-tooltip-wiki h1{
margin: 0 0 7px;
font-size: 1.5em;
line-height: 1em;
}
.ui-tooltip-wiki img{ padding: 0 10px 0 0; }
.ui-tooltip-wiki p{ margin-bottom: 9px; }
.ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }
Please help me!! :) Apology if this post looks stupid, this is my first question on stackoverflow.
I think you're making it too complicated. The qTip ajax functionality simply requests a URL, and the return value is HTML content within a div tag. If you look at the source of the demo you mentioned, you'll see a request for http://www.craigsworks.com/projects/qtip2/data/burrowingowl.php. If you look at what that produces, it is simply a div tag with some content (the style looks different because it is further transformed by the page's CSS).
So the question becomes: can you provide your dynamic content in a div in response to a URL in Rails? Of course! Perhaps you want to set up a SnippetController with a show action and then using pretty standard Rails conventions/routes your URL might be /snippet/show/[ID] and you simply have the view produce the required div content.

jQuery iframeFix on a Sortable

On my CMS I have a list of thumbnails (Sortable). The thumbnails work great and now I'm writing a plug-in to drag-them to a tinyMCE window.
As the tinyMCE window has an iFrame it doesn't work that well.
jQuery has an option for Draggables called iframeFix that works exactly as I need. However that list must be a Sortables. I've looked quite extensively on Google and found no-one with my requirements. Has anyone here on StackOverflow done it?
Apply the iframeFix to a Sortables?
If not... I'm on my way to a jQuery plug-in.
Thank you in advance!
I've done it.
You need to have a DIV on top of the iFrame to let the Draggable/Sortable flow without problems. So I used jQuery to create a DIV right on top of the iframe. Then it show's it when you grab the element and destroys it when you drop it. Works like a charm. If anyone is in need of something like that let me know.
update (by popular request):
On my specific scenario I use the following DIV:
<div id="iframeDivFixer" class="ui-draggable-iframeFix" style="background-color: rgb(255, 255, 255); display: none; width: 665px; height: 665px; position: absolute; opacity: 0.001; z-index: 1000; left: 362px; top: 290px; background-position: initial initial; background-repeat: initial initial;"></div>
And, as soon as I grab the thumbnail javascript is used to set the display property to block. The process is reversed when you release the dragabble.
A seriously old question here, but there's another way to do it using css - pointer-events:none; which is supported on all the currently supported browsers (IE11 and above - caniuse.com)
$("#sortable").sortable({
start: function() {
$("iframe").css("pointer-events", "none");
},
stop: function() {
$("iframe").css("pointer-events", "");
},
});

Resources