We Keep Coding

How to avoid Jquery parsing/cleaning up on huge ajax page?

I have a page that requests most of it's content via Ajax. The returned html consists of 2 tables, which I render on the page.
The code I am currently using:
$.post(myUrl, $('form').serialize(), function (data)
{
var $data = $(data);
$('#HeaderIndholdPanel').html($data.find('#GridView1'));
$('#SvarIndholdPanel').html($data.find('#Table1'));
}, 'html');
It does not get any easier, but does it get faster?
The second table is almost 4 MB, so that explains, why it's slow - both tables must be rendered from one request, can't be split.
However I want to optimize it.
I know that Jquery parses the html for scripts and other things. And when the table is replaced it cleans the events assigned to the elements.
Is there any way I can avoid that? It's not neseccary in my case.
I know that my html doesn't have any scripts and I don't assign any avents to it.
Should I return JSON instead and pass that to the native 'innerhtml' method?
Or do you have any better ideas?

I have found that $('#id').replaceWith(data) works much better/faster than $('#id').html(data).
This is because $('#id').html(data) takes the time to trace the object before replacing. When you command a simple replace it seems to ignore any existing value(s) and completes a straight swap.
I found this out when trying to swap out a select list that had thousands or options and using an ajax response to filter it. While watching the code I literally watched it deleted each select option one by one and then re-add it one by one.
Using .replaceWith(data), did a split/quick/1-for-1 replace.
$('#HeaderIndholdPanel').replaceWith($data.find('#GridView1'));
$('#SvarIndholdPanel').replaceWith($data.find('#Table1'));

Identity selectors in jQuery returning arrays

Suppose I have a div tag like this:
<div id="group-dialog" class="modal-dialog">
Now I want to grab it as a jQuery object (in this case so I can run .dialog()).
When I try this:
var gDialog = $('#group-dialog');
I get an array back (!!).
Why am I getting an array? Isn't the point of having an ID attribute that there's only one? I can see getting multiple p's or .my-css-thing back ...
Next question:
I have this array with 1 object in it that I now want to access as a jQuery object.
When I do this:
$(gDialog[0])
And pull it up in F12, I still have an array!! I thought I de-referenced the array already by picking the first element.
This doesn't seem to help either:
var gDialog = $('#group-dialog:first');
This is basic, but I run into this problem a lot. It seems like it used to be a lot simpler!
What is the best way to access this DOM element as a jQuery object?

Answer 1
jQuery selectors always return arrays.
Selection with id attribute is a particular use case and ideally the result should be unique. However, there is nothing preventing you from having duplicated ids in a HTML document (although this is bad practice).
Answer 2
The following code will get you the first element as a DOM object:
var gDialog = $('#group-dialog')[0];
Note: you may want to check the size of the return array first.
As far as I know, there is no way to transform this DOM element back to a jQuery object. The standard use case would be to directly used $('#group-dialog') and asume that it is found and unique.

Try using .get(). Though I'm not sure it will work with dialog()
Retrieve the DOM elements matched by the jQuery object.
var gDialog = $('#group-dialog').get();
If you're trying to grab it to use it on a dialog, you can just put
$(document).ready(function(){
$('#group-dialog').dialog({put options here})
});

Count SCEditor characters and output below?

I am using the real simple wysiwyg editor SCEditor for my website.
I am wandering how exactly I can get the current amount of characters in it's textarea and then output them below it?
I asked on the github but it seems not many people use it and the answer didn't make much sense to me, can someone clear it up for me?
The person replied with this:
var numOfCharacters = $textArea.data("sceditor").val().length;
Where: "$textArea" is a variable with a reference for the textarea DOM
element wrapped in a jQuery object.
I have no idea what that means but I'm sure some of you will.
I want to output the length just to some text below the textarea.

you need learn something about jQuery.data .
jQuery.data Store arbitrary data associated with the specified element. read more
jQuery plugins like SCeditor write their associated datas in jQuery.data of element.
for accessing this datas and management, they set their name (like 'sceditor') to it.
when you call $textArea.data("sceditor") jQuery return datas that sceditior stored in element for you.
when you call $textArea.data("sceditor").val().length you are requesting to get val(). it is text of current editor page for $textArea element and length return length of it's text.

Remove&Create VS Search&Update Jquery

Say I have this HTML mockup.
Say I need to update the information (Value header) in a regular interval, 1s. That should be done for every table in the mockup. I get the data via websocket in JSON format.
The question is: What is the best way to update the data in the tables? Removing the content and creating new DOM elements or searching the DOM elements and updating their values?

Fastest way would be to keep references to DOM elements in js - create each with
tableRefs[row][col]=document.createElement('td');
and keep a reference to it. Then just update through
tableRefs[row][col].innerHTML='yourDataHere';
I wouldn't worry about performance unless you are planning to run on ancient/low performance devices and your data is around 100 rows.

I ended up doing selector accesses via jquery. I updated the HTML mockup because I forgot to mention that I could easily identify the values I have to update by a class selector. I had this class selector before but then simplified the mockup to make a question in here. A performance test is done here. Although this answer doesn't apply to my case is totally valid.
The valid code to update the values is:
$('.values').each(function() {
if ($(this).html() != " ") {
$(this).text("UP1");
}
});
You could also narrow the jquery lookup to specific table (example table from the HTML mockup):
$('#tableWrap_group_1 .values').each(function() {
if ($(this).html() != " ") {
$(this).text("UP1");
}
});

How can I call an element from an array created by "document.getElementBytag()"?

I am trying to make a page work for my website using the mootools framework. I have looked everywhere I can think of for answers as to why this isn't working, but have come up empty.
I want to populate several arrays with different data types from the html, and then, by calling elements from each array by index number, dynamically link and control those elements within functions. I was testing the simple snippet of code below in mootools jsfiddle utility. Trying to call an element from array "region" directly returns "undefined" and trying to return the index number of an element returns the null value of "-1".
I cannot get useful data out of this array. I can think of three possible reasons why, but cannot figure out how to identify what is really happening here:
1. Perhaps this array is not being populated with any data at all.
2. Perhaps it is being populated, but I am misunderstanding what sort of data is gotten by "document.getElementBytag()" and therefore, the data cannot be displayed with the "document.writeln()" statement. (Or am I forced to slavishly create all my arrays?)
3. Perhaps the problem is that an array created in this way is not indexed. (Or is there something I could do to index this array?)
html:
<div>Florida Virginia</div>
<div>California Nevada</div>
<div>Ohio Indiana</div>
<div>New York Massachussetts</div>
<div>Oregon Washington</div>
js:
var region = $$('div');
document.writeln(region[2]);
document.writeln(region.indexOf('Ohio Indiana'));
Thanks for helping a js newbie figure out what is going on in the guts of this array.

$$ will return a list of DOM elements. If you are only interested in the text of those DOM nodes, then extract that bit out first. As #Dimitar pointed out in the comments, calling get on an object of Elements will return an array possibly by iterating over each element in the collection and getting the property in question.
var region = $$('div').get('text');
console.log(region[2]); // Ohio Indiana
console.log(region.indexOf('Ohio Indiana')); // 2
Also use, console.log instead of document.writeln or document.write, reason being that calling this function will clear the entire document and replace it with whatever string was passed in.
See an example.