I need some sort of transactional client/server/client processing - My expected solution is Ajax Send. If Ajax Error were to be called, it would call Ajax Send again to retry.
Does anyone know of potential pitfalls that this might create when it comes to client memory usage? I'm using jQuery 1.8 (I need to recode to upgrade to 1.9 and am holding off on that for a month or so).
I believe the function I need to use is .queue though am open to alternative suggestions. My attempts to resolve this so far have failed, hence why I am here :)
InitData()
Contains an ajax call and successfully retrieves data via JSON and stores it locally with .data()
I have tested and can confirm the data is read, saved and available.
DrawScreen()
Draws table #sui and dynamically applies cells, buttons, text boxes.
Problem:
I got a chicken/egg sort of thing - the data cannot be displayed if the screen has not completed its draw, and when drawn, it cannot display data that it does not yet have... Sometimes my data is read faster from my local hosted database than drawing the screen (the amount of data at this moment is small, and the database is hosted with apache on the same laptop that has the browser).
I welcome all help! Various attempts prove to be unreliable solutions, including variations of $(document).ready() and $(document).load()
$(document).ready( function()
{
InitData();
DrawScreen();
}
How can I create an event that is executed only when the above two functions have completed? Do I use .queue() or something else? I have made it work by inserting delays, but I think this is a dirty workround...
I hope this question does not rub folk up the wrong way however I have been developing an application that has both desktop and tablet audience - until now I have developed using jQuery and jQueryUI. The tablet dependancy has until now utilised Dialog and Buttons and for the most part, delivered what I want.
My concern is as my dependancy increases (meaning I use features beyond Dialog and Buttons) that I will find myself applying band-aids to my tablet target code which might not otherwise be required if I had developed using jQuery Mobile.
Is there something I am missing? Does jQuery Mobile 'compete' for part of the jQuery UI's audience or are there real added advantages of one over the other?
I created a ticket last night in jQuery forum but moved it to here as I think it is more related. The subject was "How to measure DOM size?" and it raises questions that would effect app writers (be it for intranet or hand held devices).
My initial tests came back with some scary results, but further analysis reversed those thoughts and told me that overall, its a non-issue but I still thought I would share my results. (I discovered that some UI effects clean up better than others).
For reference, my developement environment Firefox 18, jQuery 1.8.3 and jQuery UI 1.9.2
For those new to jQuery let me give you a brief insight: When using jQueryUI, the DOM, or the HTML page that your browser has is manipulated. The page can grow or shrink depending on your scripted actions. For example, using Dialog or Tabs means your page will dynamically grow as your jQuery related functions get called, because the functions dynamically add a combination of HTML/CSS code to give the browser UI (user interface) the attractive pop up or tab functionality.
When switching from one tab to another, the DOM increments only once, by 1. Thus, click five tabs, your DOM is still only +1.
AutoComplete behaved differently. My application has six tabs, containing a total of eight autocomplete input fields. I found the results varied depending on the number of results suggested. Thus, an autocomplete on employee names that offered me three suggestions, DOM +6. A seperate autocomplete on another tab means the DOM grew again, +2 for each suggested option. The suggested options for one input field did not replace legacy code left over from other autocomplete suggestions of another input field. This meant if I used all auto complete fields, and they all offered me two suggestions, the DOM would grow by +16 (two for each suggestion across eight autocomplete fields).
Dialog increments the DOM by 16 - however I remove my Dialog when the close button is clicked using remove() and the DOM appears to increment by +1 only. How many developers think of removing what they just dynamically created I ask myself?
The garbage collection appears to be pretty good compared to some code I have seen elsewhere and I raise my hat in appreciation to the development teams across the globe.
For those interested in simulating my tests on their own development environment, this is what I have done:
function EventDev()
{
var x=0, y=0;
$("*").each( function()
{ if( $(this).attr("oddball")==1 )
{ ++x; }
else
{++y;}
});
alert("== EventDev ==\nx="+x+"\ny="+y);
}
$(document).ready(function(){
$("#devtest").click( EventDev );
$("*").attr("oddball",1);
});
Above, at line 14, when the document (html page) is fully loaded, an event at line 15 is assigned to a link in my page that has an ID="devtest". When the link is executed, EventDev() is executed (this allows me to take a score when ever I want).
The last action I do during document.ready status is to add "oddball=1" to every tag in my page. Some developer addons for browsers like Firefox allow you to View Generated Source. If you do this, you will find your page has "oddball=1" everywhere, including <body>, <script>, <table>, <div> etc etc. This means that any HTML that gets added after this point is new dynamic code and thus will not have the "oddball=1" argument.
Again... for the record: The garbage collection appears to be pretty good compared to some code I have seen elsewhere and I raise my hat in appreciation to the development teams across the globe.
I regularly keep an eye on the size of my DOM using $(*).length however it is not as accurate as I would like it to be. Is there another method I can use? I want to, in effect, count every character that exists within my HTML document (dynamically created from the client or served from the server).
Why?
When I use jquery ui it dynamically adds/removes to the document weight. When writing an application that requires few page reloads, I am afraid of legacy data stacking up. It is true that we are talking about bytes, but legacy changes to the DOM can add an extra 25% or more to the DOM. For example, using jquery tabs and creating dynamic buttons or tables - these buttons/tables might not be required and thus sit but hidden from view. It does not take long to double the size of the originally web served version of the page too... leading to a larger cache size and eventually effect performance...
I have worked with software teams where small issues turned big over 18months and eventually led to replacing what was well liked/accepted service with a newer, lesser accepted but also less fat/complicated service. Alot of the issues were unfortunately sourced by management as focus/bonus/energy was directed at newer features and almost zero effort towards bugs. I want to avoid problems such as this where possible going forward... and thus, I want to make sure that I remove legacy code from my page.
I believe I keep an eye and clean up during menu changes, but I would feel happier if I could "measure" the DOM between menu option changes (thus, "weigh in and weigh out" and compare the difference at the start/end of a menu option).
Ideas? Hopefully there is a simple answer and not having to walk thru the DOM.
The above makes the assumption that I have two other functions called DialogYes() and DialogNo() - Their purpose in life makes no change to my observation.
When the above dialog opens, I am presented with a 500px x 500px box.
If I change dialogPlaceHolder from div to span, thus
<span id="dialogPlaceHolder">this is my message text</span>
I get a box that fits snugly around my message text. The dialogOpts works otherwise as expected (meaning my smaller snug fitting Dialog box has buttons and any other settings I define there.
I prefer to use span as opposed to div tags, since div tags can incur a new line on the browser even if their contents are not displayed. So my question to you fine chaps and chapessessesss is, is this a bug, or is there a good reason as to why the Dialog behaves differently when I use a span tag instead of a div tag?
Folks, I am using .data() to store some data. It fails during my intended action. My syntax is, I believe correct because the same command/syntax works fine when it is placed elsewhere in the code. Thus, in the example below I would expect the alert to give me "123" but instead, it gives me "undefined". If I place the store request else where (inside the GetDefaults() function but external to the $.ajax request, it works. If I place it before GetDefaults() it also works. But when executed as part of a ajax success, it fails. Note, my recall.php does return successful (I have tested by placing another alert box in there just to be safe).
So - what gives? What am I not seeing? What am I doing wrong? Or have I discovered a bug?