Develop Reference

JS: temporarily disable page rendering (possible?)

I'm tryin to sort a big html table using JS. It takes a lot of cpu% to rearrange all the rows of this table. I think the big part of this problem is: every time my script moves a pair of rows, the browser starts refreshing the table
So, I'm searching for any way to temporarily tell the browser something like "wait, I'm sorting this table, dont waste CPU for rendering until I'll finish, plz?"
Basically, I need something lke "Memo1.lines.beginupdate / Memo1.lines.endupdate" in delphi >.<

alert(string) stops rendering, and not asyncronous calls, but not loading. You may prompt "too many cells to load, please wait" you may got the desired behavior.
note that, in order to work, string should be a non empty string after trim so a white space is not valid.

You can disable most of the background rendering by disabling displaying of the parent element. Since the parent element is not displayed, client's renderer has nothing to render and also does not recompute sizes. Be aware that when you are updating the content, you will loose focus if it was present wihtin the parent Element.
To achieve something like Memo1.lines.beginupdate and Memo1.lines.endupdate use this:
originalStyleDisplay = myMemo1Div.style.display;
myMemo1Div.style.display = 'none';
try {
mySorting();
} catch() { }
myMemo1Div.style.display = originalStyleDisplay;

preserve client side HTML markup and retain after postback

I am building a user search filter where we can specify a number of criteria's, one per each row of a HTML table.
I am building a dynamic table using jquery on the client side, the table starts off with one row(default) on page load with a "+" image on the last <td> which when clicked I am appending a new row to the table, and this can repeat for any number of rows as shown below. Once the search button is clicked, I am bringing back results based on criteria selected. But I also need to preserve the current criteria table after postback(due to search button).
Any ideas on how to do this? I have tried putting all of the HTML for the table in a hiddenfield but I get a RequestValidationError for obvious security reasons. I have the individual selected values in each row saved in hidden variables which I am using in code behind to build the search and bring the results, do I need to rebuild the table on the client side using the values I have? Is that the only option? I also tried converting the HTML for the table into text and putting it in hidden variable, but I am not able to convert it back into HTML after the postback, it is rendering as text inside the table, below is the code for it, any help/input is appreciated.
HTML:
<input type="hidden" runat="server" value="0" id="hdnCriteriaTable" />
jQuery:
on button click, before postback(client side):
jQuery("[id*=hdnCriteriaTable]").val(jQuery("#dynamicCriteriaTable tbody").html().replace(/</g, "<").replace(/>/g, ">"));
on page load after postback(client side):
if (jQuery("[id*=hdnispostback]").val() == "1")
{
//commented out lines below are different ways I tried to make it work.
//the one with hardcoded td's is the one that renders perfectly as HTML inside the table
jQuery("#dynamicCriteriaTable>tbody").empty();
var criteriaTableHTML = jQuery("[id*=hdnCriteriaTable]").val().replace("&lt;", /</g).replace("&gt;", />/g).replace(""", "\"");
jQuery.parseHTML(criteriaTableHTML);
//jQuery("#dynamicCriteriaTable>tbody").append(jQuery("[id*=hdnCriteriaTable]").val().replace("&lt;", /</g).replace("&gt;", />/g).replace(""", "\"").toHtml());
//jQuery("#dynamicCriteriaTable>tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>")
jQuery("#dynamicCriteriaTable>tbody").append(criteriaTableHTML);
//alert(jQuery("#dynamicCriteriaTable").html());
//jQuery("#dynamicCriteriaTable").toHtml();
}
This is how HTML is being rendered inside the table:

If I were you, I would rebuild the table from the values; it's clean, and you can always write a function that automates the build.
However, if you want to pass it in toto as HTML, you'll need to escape your tags somehow. I would start by replacing < and > with < and >, respectively, and if that still give you a requestValidationError, use another pair of delimiters.

Limiting the number of characters in a contenteditable div to store in a database

This is my current system:
I have a contenteditable div where users can insert text, images, links etc.
The HTML from that div is inserted into a database.
If the div has a data which exceeds the length of the field in the database the data is truncated.
I want to add a limit to the contenteditable div so that the data entered by the user will never be truncated however I don't know how to implement a limit to the div since the actual HTML is counted in the field space not just what the user sees like the text.
I'm not asking how to actually limit the number of characters since I already found another question which solves this, but I want to know how to limit data in a user friendly way without my validation saying something like "Your data must be at most 500 characters" when most of the characters could be made up of HTML which the user cannot see.
Are there any solutions to such an issue on the front end side or the database side? Thanks.

It's hard to say without seeing your actual code, but could you not show a character count but programmatically exclude your html from the count? You could have a function with a structure similar to the following pseudo-code:
div. Bind keydown event{
var total = how many characters are in the div?
if(are there any of the character sequences that match excluded html patterns?){
var numCharacters = how many characters are in each excluded sequence?
var calcCharacters = total - numCharacters
}else{
var calcCharacters = total
}
characterCountIndicator. update value(calcCharacters);
}

Finding div(s) inside of a div in jQuery

My fiddle does not work like it does on my machine locally. I can actually drag the elements. Nevertheless, it can work as a visual for what I am trying to acheive.
I can already drag and drop the units to the divs below the pool but I want to be able to save their location. To be more specific: I want to send an ajax request back to a php file with the location of the units, the container it was dragged into so I can save it my categories table I have in a database so when the page is loaded back it will load the units in their respected categories which I am referring to as containers.
I just do not know how to get the data I want. Here is a rough pseudo code of what I am attempting
var array_for_container1[]; //to hold the units in the first container
var array_for_container2[]; //to do the same
//etc
//loop through each container and get the units inside
//place each unit into the array it needs to be in
//send to php with ajax request
Now I am creating the containers dynamically so I will have to somehow have an array to hold the units for each of them. Basically I'll have to find out how many containers there are so I can get a number of arrays to create and the number of containers to loop through. If anyone has suggestions on how to do that I would greatly appreciate it, however, that isn't the goal of this post. My goal in this post is to know what units are in which containers

Well, with this FIDDLE, I've simplified your code just down to the html.
Then I've written a little script that goes through all of the labels, counts them and puts their html contents into an array.
The number of labels and the array are then printed out into two test divs.
Here is the js:
var counter = 0;
var contentarray = new Array();
$('label').each(function(index){
contentarray[counter] = $(this).html();
counter = counter +1;
});
$('.output1').html(counter);
$('.output2').html(contentarray);
Seems to work.

Getting data from iframe with JavaScript

I have a simple page with iframe. In this frame there are a three input fields, which user fill in. How to get this data in every input field with js?
Here is js:
<script type="text/javascript"> var ticket = window.frames[0].document.getElementById('ticket').ticket; alert(ticket); </script>
And i have inside frame:
<input type='text' name='ticket' id='ticket'...
Nothing happens when I fill all 3 inputfield and press ok. How to save this data, which filled in this input fields to .txt file, than I can grab this txt by php and fill into database.

I'm not convinced that iframes are accessible via the window.frames property. You could try something like this:
var frame = document.getElementsByTagName("iframe")[0]
, form = frame.contentDocument.forms[0];
alert("OK: ticket=" + form.ticket.value);
Storing the form values in the database is another issue entirely. It might be easiest to avoid JavaScript entirely and simply make the form within the iframe perform a POST to your own PHP handler which can save the contents as needed.

I spent a lot of time trying to figure out how to exchange data from between text boxes in two Iframes. (I am the author of both iframes). After a lot of wasted time and looking for solutions on the internet the solution was, of course, incredible easy. Everyone on the internet is doing MUCH more complicated things. For those of you who want to do something simple!
I have a main page with two Iframes (ID = ifr1 and ifr2). Each frame had a text box (ID = tb1 (in ifr1)). In javascript you can get the contents of tb1 in iframe ifr2 by simply using
parent.ifr1.tb1.value or parent.ifr1.document.getElementByID(‘tb1’).value.
To change the value, obviously"
parent.ifr1.tb1.value=”whatever” or parent.ifr1.document.getElementByID(‘tb1’).value=”whatever”
You can also access a variable from ifr1 from ifr2 by using
parent.ifr1.var_in_ifr1 where var_in_ifr1 is defined in the script of ifr1
var var_in_ifr1=”whatever”