I am using the Sinatra to develop a web application but I am running into long page load time issue.
The application goes through and display a lot of data so I am sure this is the cause but I was wondering if there was a way to have the main erb layout of the page load first and then after that load, the data loads on top of it.
My first thought was AJAX but I am not sure how I would implement this.
Thanks in advance.
You are correct, it may help. The old mantra of "separate that which changes from that which does not" is applicable in any part of programming.
Here's route that returns some data:
require 'json'
get "/time-now/?" do
content_type :json
{time: Time.now.to_s}.to_json
end
and here's some javascript (jQuery ajax) to call it:
$.ajax({
accepts: "application/json",
type: "GET",
url: "/time-now",
dataType: "json",
success: function(res, status, xhr) {
return [$("#time").html(res)];
},
error: function(res, status, xhr) {
return [$("#time").addClass("error")];
},
complete: function(res, status, xhr) {
return [$("#button1").show()];
}
});
(that bit of jQuery may be a little bit wrong, just warning you, it's a copy 'n paste job hacked to fit this example)
Perhaps you could stop serving user pages from Sinatra routes and use static (i.e. prebuilt) pages with javascript in them that make AJAX calls to Sinatra routes. Or a mixture of the two types. Then you've got the start of a web service data API. There are lots of javascript frameworks to help with this, (e.g. Ember, Backbone, Angular and many more) and plenty of API builders alongside Sinatra, like Grape and Weasel Diesel.
Related
I'm having some trouble in using CKEditor and send it's information to database.
It works really good, I have all functionalities but when I sent it over ajax request to PHP, it doesn't assume the text into CKEditor first time. It only works after I make the ajax request the second time. It seems that CKEditor is not realtime and only after X time it saves the information that I typed, but I can't find anything related to it.
My init:
if (jQuery('#js-ckeditor:not(.js-ckeditor-enabled)').length) {
CKEDITOR.replace('js-ckeditor');
// Add .js-ckeditor-enabled class to tag it as activated
jQuery('#js-ckeditor').addClass('js-ckeditor-enabled');
}
My Function to make the request:
$.ajax({ url: '../inc/call.php',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
cache: false,
data: formData,
type: 'POST',
beforeSend: function(){
$("#article_btn").html('<i class="fa fa-cog fa-spin"></i>');
$("#article_btn").attr("disabled", true);
},
success: function(output) {...}});
One more question, what's the best way to save this information to database?
Currently I'm using htmlspecialchars and htmlspecialchars_decode, but when using some functions (tables, colors), it really doesnt work well and don't save everything the correct way in database.
I will answer your first question:
If you are using AJAX please update textarea manually before sending data to server by calling https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-updateElement. This topic is actually known. Please see e.g. https://dev.ckeditor.com/ticket/9913#comment:2.
I am building an express project, using ejs as a view engine, and AJAX for front-end http calls.
When I post a request such this:
$.ajax({
type: 'POST',
data: {'nickname' : $('#nickname').val()},
contentType: 'application/x-www-form-urlencoded',
url: 'http://localhost:5000/create',
success: function(data) {
$('#message').text("Unkwon error");
},
error: function(data){
$('#message').text('Something went wrong, check connection!');
}
The Ajax keeps waiting for a response, which I am not willing to give, as I just want to render a view as follows :
app.post('/create', urlencodedParser, (req, res)=>{
let code = unique.generate(rooms);
res.render('chat', {'nickname' : req.body.nickname, 'code' : code}
Any ideas how can I work around this?
After some research, I found a way to do it.
Basically, I can just tell the Ajax to attach the document sent from rendering to the html body
$('body').html(data);
Surprisingly, this works event with Ejs dynamic tags.
I know it's not the best way to do it, but it's the only one I found till now.
EDIT 1:
After few months, I realized the solution is simple as just changing the Location using javascript
window.location.replace(`http://localhost:5000/newRequest`);
Now, I could handle this new request separately on the server.
EDIT 2:
After couple years now, I realized a GET request might have solved the problem in a single round trip.
I've been trying to make an Ajax call from my vbhtml page and I can't seem to get it working. I've been researching for a while now my problem but I can't seem to find an answer, maybe it is because I don't actually know exactly what to ask.
In my code i am trying to send the value that was selected in a DataGrid from DataTables.net so that i can retrieve the information related to the selection and put it in some textboxes.
Anyways, I've been getting a 403 frobidden error when doing the ajax
Here's my View code
function ShowInfos(selected) {
$.ajax({
type: "POST",
url: "/Controllers/TelephonieController.vb/Show",
data: '{nomEcran: "' + selected + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
Here's my Controller code
<System.Web.Services.WebMethod()> _
Public Shared Function Show(nomEcran As String) As String
Return "allo"
End Function
(Sorry it's a bit in french)
This is the error it gives me
POST http://localhost:4390/Controllers/TelephonieController.vb/Show 403 (Forbidden)
I've only just started with Web so I might be a total newbie with this, but i have checked on the Web and people have been saying to take out ContenType or DataType and I've done both, I even tried sending and empty String with the Data but I can't seem to get it to work.
A bit off topic sort of, I tried an other way of doign ajax which is exactly this : http://msdn.microsoft.com/en-us/library/dd381533(v=vs.100).aspx?cs-save-lang=1&cs-lang=vb#code-snippet-2
the problem is I can't seem to understand how I should send or could send a javascript variable to the controller.
If someone has a better way of doing things than what I am doing right now feel free to comment so I can learn.
As you are using asp.net mvc3, you can try #Url.Action(...
url: "#Url.Action('Telephony','Show')",
You just need to provide controller and action name. Dont know why are you using TelephonieController.vb in url this isnt web form.
Though i dont have experience in vb, but still feels that vb would work like c#
I have code that does POST attachments to Couch docs using jquery.form.js. That's all good, but I really need to allow the user to enter multiple files in the form, let's say 5 files for now, then in code iterate the five files in the form, creating one new Couch doc and attachment for each file. This is veeeery difficult if not impossible using only jQuery. It could be done using Couch "inline attachments" but then you would need a server-side (PHP probably) script to Base64 encode the binary image data. This really isn't an option for me because this is a Couchapp.
So the following code doesn't work, it generates an "invocation" error in jQuery. My assumption is that you can't simply add the reference to a binary file in the data attrib...
var url= _.couchUrl() + me.photoArgs.db +"/" +
couchDoc._id + "/attachment?rev=" + couchDoc._rev;
$.ajax({
type: "PUT",
url: url,
headers: {
"Content-Length": file.size,
"Content-Type": file.type
},
data: file,
success: function (response) {
console.log("Attachment was uploaded");
me.fileCnt--;
if (me.fileCnt == 0) console.log("Attachment(s) uploaded");
},
error: function (response) {
_.flashError('Attachment ajaxSubmit failed',me,response);
}
});
The code is clipped from inside a larger function. I've logged the url and the file, they both have correct data so they're not the issue.
Does anyone think the above should work? If so, what am I doing wrong?
Thanks a lot for your advice :-)
You have two options there:
Use inline attachments. You don't have to use PHP to decode base64 data: just add to your CouchApp /_utils/script/base64.js file (yes, it ships with CouchDB Futon) as CommonJS module and you'll be fine.
Use Multipart API (scroll a bit down for an example). I haven't much experience with jQuery to quick make a working prototype, but this question you may found helpful.
Update: found good working example how to upload multiple binary attachments to CouchDB using multipart API.
I am currently trying to convert a controller action into Ajax requests in order to let the page load in sections rather than all at once. Before I started making changes, the page loaded in about 8 seconds (it has to process a lot of information).
Since I've changed it to loading up Partial Views via ajax, the page now takes about 35 seconds to load up the same information.
The process is as follows:
The initial request processes and then returns a viewmodel (a generic list) as json
I then use the returned data to create two partial views
I just wonder if there is a better way of laying out the jquery to get it to work faster. I'm aware the amount of data being passed could be a factor - although I can't find the exact size of the object in the debugger, when I dump the json out to a text file it is about 70kb.
jQuery
$.ajax({
type: 'GET',
dataType: "json",
url: '#Url.Action("GetMapDetails")',
success: function (data) {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '#Url.Action("GetMapItems")',
data: JSON.stringify({
list: data
}),
success: function (result) {
$("#mapContainer").html(result);
}
});
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '#Url.Action("GetAreaPoints")',
data: JSON.stringify({
list: data
}),
success: function (result) {
$("#areaPointsContainer").html(result);
}
});
}
});
Controller
public JsonResult GetMapDetails()
{
List<ViewModel> vm = new List<ViewModel>();
//create viewmodel here
return Json(vm.ToArray(), JsonRequestBehavior.AllowGet);
}
public ActionResult GetMapItems(List<ViewModel> list)
{
return PartialView("_MapItemsPartial", list);
}
public PartialViewResult GetAreaPoints(List<ViewModel> list)
{
return PartialView("_AreaPointsPartial", list);
}
If anyone can offer some optimization advice, that would be great thanks
You could look into rendering partial views into strings. That way you could return both HTML strings from GetMapDetails, and you'd be able to achieve the same result in one AJAX call instead of three.
If would also rid you the need of serializing the viewmodel back and forth, so there might be some performance gain there.
Install the Stackexchange Miniprofiler and hook it into your database requests as well, this will help you find which bit is taking the most time. I suspect it could well be your data and processing on the server (depending on how you have written your controller you could be hitting your data load+process 4 times in the AJAX version, resulting in the 4 times page load).
If this is true then the problem is not going to be fixed by AJAXing your page but caching the processed data on the server (to keep it up to date your choices are a short cache duration or have the process that updates your data remove the cache, the correct answer depends on what your data is).
Since I think that your goal is to be able to load partial views only when they are needed, putting them all in one markup string isn't going to work.
The performance problem you are having is probably due to the fact that ajax-calls are indeed more performance expensive then to load a result stream from a server.
Caching will only help when you retrieve the same data into the same page - not your case either.
From what it seems to me, you should load up the initial view to the user, and immediately start background pre-loading of the views you are probably going to need soon. Just placing them onto the DOM as an indivisible elements, so one requested, they will be immediately loaded. Of course you pre-load only those which you are most likely to need soon.
Other, probably more effective way, would be to use an MVVM framework on the client, like KnockoutJS. Define your views in a simple html markup, without the actual need for the server to render the partial view with the model. This would allow an html to transfer faster. Separate REST calls from your client would be retrieving only the model data from the server in JSON format, and you will apply data binding to the view (lightweight html you've loaded previously). This way the burden of heavy-rendering will be on the client and the server will be able to service more clients in a long run + you are most likely to get the performance gain.
Also try to use $.ajax cache option to true to improve further calls jQuery ajax method
I assume that infomation don't change fast then it would improve the performance.
For example I work with statistics pages loading asynchronously 7-8 plots there cache saves me a lot of time.
From jQuery Api:
On the other hand if the posted data content changes fast it's not recommended to cache it but also take into account that EVERY browser caches that request in it's own cache. To avoid browsers caching use timestamps on every request as query strings just as $.ajax does automatically.