[`element.ownerDocument`](https://developer.mozilla.org/en/DOM/element.ownerDocument) will give you a reference to the document to which any DOM element belongs.

Yes, the `document` object is the parent of the `&lt;HTML&gt;` element (at least in Firefox).  Find it like this:

    function FindDoc(el) {
    	while(el.parentNode) {
    		el = el.parentNode;
    	}
    	return el;
    }



firstElementChild
The first child that is an element node 
[Traversal module.][1]


  [1]: http://www.quirksmode.org/dom/tests/traversal.html#firstElementChild

Im trying to get a list of line items to a webpage using JSON, which will then be manipulated and sent back to the server by ajax request using the same JSON structure that arrived (except having had a field values changed). 

Receiving data from the server is easy, manipulation even easier! but sending that JSON data back to the server for saving... suicide time! PLEASE can someone help!

**Javascript**

    var lineitems;

    // get data from server
    $.ajax({
        url: &#39;/Controller/GetData/&#39;,
        success: function(data){
            lineitems = data;
        }
    });
    
    // post data to server
    $.ajax({
        url: &#39;/Controller/SaveData/&#39;,
        data: { incoming: lineitems }
    });

**C# - Objects**

    public class LineItem{
        public string reference;
        public int quantity;
        public decimal amount;
    }

**C# - Controller**

    public JsonResult GetData()
    {
        IEnumerable&lt;LineItem&gt; lineItems = ... ; // a whole bunch of line items
        return Json(lineItems);
    }
    
    public JsonResult SaveData(IEnumerable&lt;LineItem&gt; incoming){
        foreach(LineItem item in incoming){
            // save some stuff
        }
        return Json(new { success = true, message = &quot;Some message&quot; });
    }

The data arrives at the server as serialized post data. The automated model binder tries to bind `IEnumerable&lt;LineItem&gt; incoming` and surprisingly gets the resulting `IEnumerable` has the correct number of `LineItems` - it just doesnt populate them with data.

**SOLUTION**

Using answers from a number of sources, primarily `djch` on another stackoverflow post and `BeRecursive` below, I solved my problem using two main methods.

*Server Side* 

The deserialiser below requires reference to `System.Runtime.Serialization` and `using System.Runtime.Serialization.Json`

	private T Deserialise&lt;T&gt;(string json)
	{
	    using (var ms = new MemoryStream(Encoding.Unicode.GetBytes(json)))
	    {
	        var serialiser = new DataContractJsonSerializer(typeof(T));
	        return (T)serialiser.ReadObject(ms);
	    }
	}
	
	public void Action(int id, string items){
	    IEnumerable&lt;LineItem&gt; lineitems = Deserialise&lt;IEnumerable&lt;LineItem&gt;&gt;(items);
	    // do whatever needs to be done - create, update, delete etc.
	}

*Client Side*

It uses json.org&#39;s stringify method, available in this dependecy https://github.com/douglascrockford/JSON-js/blob/master/json2.js (which is 2.5kb when minified)

    $.ajax({
        type: &#39;POST&#39;,
        url: &#39;/Controller/Action&#39;,
        data: { &#39;items&#39;: JSON.stringify(lineItems), &#39;id&#39;: documentId }
    });

Posting JSON Data to ASP.NET MVC

In my .vimrc I have:

    set shiftwidth=4
    set tabstop=4
    set expandtab

set to use 4 spaces instead of tab when I hit the Tab button. But when I hit backspace after a Tab, I need to backspace all 4 spaces. Is there a way to have it so when I go to backspace a &quot;tab&quot; it can delete all 4 spaces?

Spaces as tabs and backspace behavior in Vim

Let&#39;s assume I have a jQuery object of a DIV element in body. I&#39;d like to obtain document object by traversing. Can it be possible ?

Note: window.document is not a option in my case.

Thank you.

Get document object from a child element

Let's assume I have a jQuery object of a DIV element in body. I'd like to obtain document object by traversing. Can it be possible ?
Note: window.document is not a option in my case.
Thank you.

If I defined an object in JS with:

    var j={&quot;name&quot;:&quot;binchen&quot;};

How can I convert the object to JSON? The output string should be:

    &#39;{&quot;name&quot;:&quot;binchen&quot;}&#39;

Convert JS object to JSON string

HTTP basic authentication credentials are stored until the browser is closed, but is there a way to remove the credentials before the browser is closed?

I read about a [trick with HTTP 401 status code][1], but it seems to [work not properly][2] (see comment to answer). Maybe the [mechanism trac uses is the solution][3].

Can the credentials be deleted with JavaScript? Or with a combination of JavaScript and the status 401 trick?


  [1]: https://stackoverflow.com/questions/449788/http-authentication-logout-via-php/449914#449914
  [2]: https://stackoverflow.com/questions/449788/http-authentication-logout-via-php/449813#449813
  [3]: http://trac-hacks.org/wiki/TrueHttpLogoutPatch

http basic authentication &quot;log out&quot;

Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don&#39;t have access to the source.

Something like: `http://www.example.com/mypage.aspx?javascript:printHelloWorld()`

I know if you put `javascript:alert(&quot;Hello World&quot;);` into the address bar it will work.


I suspect the answer to this is no but, just wondered if there was a way to do it.


Call Javascript function from URL/address bar

In JavaScript/jQuery, how can I scale a varying-length line of text inside a fixed-width Div so that the one line always fits inside the Div (as one line)?

JavaScript Scale Text to Fit in Fixed Div

I recently stumbled upon the `Object.create()` method in JavaScript, and am trying to deduce how it is different from creating a new instance of an object with `new SomeFunction()`, and when you would want to use one over the other.

Consider the following example:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var test = {
      val: 1,
      func: function() {
        return this.val;
      }
    };
    var testA = Object.create(test);

    testA.val = 2;
    console.log(test.func()); // 1
    console.log(testA.func()); // 2

    console.log(&#39;other test&#39;);
    var otherTest = function() {
      this.val = 1;
      this.func = function() {
        return this.val;
      };
    };

    var otherTestA = new otherTest();
    var otherTestB = new otherTest();
    otherTestB.val = 2;
    console.log(otherTestA.val); // 1 
    console.log(otherTestB.val); // 2

    console.log(otherTestA.func()); // 1
    console.log(otherTestB.func()); // 2

&lt;!-- end snippet --&gt;

Notice that the same behaviour is observed in both cases.  It seems to me that the primary differences between these two scenarios are:

 - The object used in `Object.create()` actually forms the prototype of the new object, whereas in the `new Function()` from the declared properties/functions do not form the prototype.  
 - You cannot create closures with the `Object.create()` syntax as you would with the functional syntax.  This is logical given the lexical (vs block) type scope of JavaScript.

Are the above statements correct? And am I missing something?  When would you use one over the other?  


EDIT: link to jsfiddle version of above code sample: [http://jsfiddle.net/rZfYL/][1]


  [1]: http://jsfiddle.net/rZfYL/

Understanding the difference between Object.create() and new SomeFunction()

So according to the [jQuery Ajax docs][1], it serializes data in the form of a query string when sending requests, but setting `processData:false` should allow me to send actual JSON in the body.  Unfortunately I&#39;m having a hard time determining first, if this is happening and 2nd what the object looks like that is being sent to the server.  All I know is that the server is not parsing what I&#39;m sending.

When using [http client][2] to post an object literal `{someKey:&#39;someData&#39;}`, it works. But when using jQuery with `data: {someKey:&#39;someData&#39;}`, it fails.  Unfortunately when I analyze the request in Safari, it says the message payload is `[object Object]` ... great...  and in Firefox the post is blank...

When logging the body content on the Java side it literally gets `[object Object]` so how does one send REAL JSON data??

Has anyone had experience with a Java service serializing JSON data in the request body, with the request sent from jQuery?  

BTW here is the full $.ajax request:

    $.ajax({
    	contentType: &#39;application/json&#39;,
    	data: {
    		&quot;command&quot;: &quot;on&quot;
    	},
    	dataType: &#39;json&#39;,
    	success: function(data){
    		app.log(&quot;device control succeeded&quot;);
    	},
    	error: function(){
    		app.log(&quot;Device control failed&quot;);
    	},
    	processData: false,
    	type: &#39;POST&#39;,
    	url: &#39;/devices/{device_id}/control&#39;
    });

  [1]: http://api.jquery.com/jQuery.ajax/
  [2]: http://ditchnet.org/httpclient/


jQuery posting valid json in request body

I have the following:

	$(document).ready(function()
	{
		$(&quot;#select-all-teammembers&quot;).click(function() {
			$(&quot;input[name=recipients\\[\\]]&quot;).attr(&#39;checked&#39;, true);
		});					
	});

I&#39;d like the `id=&quot;select-all-teammembers&quot;` when clicked to toggle between checked and unchecked. Ideas? that aren&#39;t dozens of lines of code?

Toggle Checkboxes on/off

I have a regular text-box:  

    &lt;input type=&quot;text&quot;&gt; 

 I use jQuery to handle key-related events:  

    $(&quot;input:text&quot;).keydown(function() {
        // keydown code
    }).keypress(function() {
        // keypress code
    }).keyup(function() {
        // keyup code
    });

The user focuses on a text-box and presses various keys on his keyboard (the usual ones: letters, numbers, SHIFT, BACKSPACE, SPACE, ...). I need to detect when the user presses a key that is going to increase the length of the text-box value. For example, the &quot;A&quot; key will increase it, the &quot;SHIFT&quot; key wont.  

I remember watching a lecture by PPK where he mentioned the difference between those two. It has something to do with the event - keydown vs. keypress - and possibly with the event properties - key, char, keyCode.

***Update!***  

I need to know this information within the keydown or keypress handlers. I cannot wait for the keyup event to occur. 

***Why I need this:***  

I have a text-box which size dynamically changes based on the user input. You can have a look at this demo: http://vidasp.net/tinydemos/variable-size-text-box.html  

In the demo, I have a keydown and keyup handler. The keyup handler adjusts the text-box size based on the input value. However, the keydown handler sets the size to be 1 character larger then the input value. The reason I do this is that if I didn&#39;t, then the character would overflow outside the text-box and only when the user would let go of the key, the text-box would expand. This looks weird. That&#39;s why I have to anticipate the new character - I enlarge the text-box on each keydown, ergo, before the character appears in the text-box. As you can see in the demo, this method looks great. 

However, the problem are the BACKSPACE and ARROW keys - they will also expand the text-box on keydown, and only on keyup the text-box size will be corrected.    

***A work-around:***  

A work-around would be to detect the BACKSPACE, SHIFT, and ARROW keys manually and act based on that:  

    // keydown handler
    function(e) {
    	var len = $(this).val().length;
    	if (e.keyCode === 37 || e.keyCode === 39 ||
            e.keyCode === 16) { // ARROW LEFT or ARROW RIGHT or SHIFT key
    		return;
    	} else if (e.keyCode === 8) { // BACKSPACE key
    		$(this).attr(&quot;size&quot;, len &lt;= 1 ? 1 : len - 1);
    	} else {
    		$(this).attr(&quot;size&quot;, len === 0 ? 1 : len + 1);
    	}
    }

This works (and looks great) for BACKSPACE, SHIFT, ARROW LEFT and ARROW RIGHT. However, I would like to have a more robust solution.

How to detect if the pressed key will produce a character inside an &lt;input&gt; text-box?

I&#39;m trying to loop over ALL elements on a page, so I want to check every element that exists on this page for a special class.

So, how do I say that I want to check EVERY element?

How can I loop through ALL DOM elements on a page?

Can I add arbitrary properties to JavaScript DOM objects, such as `&lt;INPUT&gt;` or `&lt;SELECT&gt;` elements?  Or, if I cannot do that, is there a way to associate my own objects with page elements via a reference property?

Can I add arbitrary properties to DOM objects?



&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;selected&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;29&lt;/li&gt;
        &lt;li&gt;16&lt;/li&gt;
        &lt;li&gt;5&lt;/li&gt;
        &lt;li&gt;8&lt;/li&gt;
        &lt;li&gt;10&lt;/li&gt;
        &lt;li&gt;7&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

I want to count the total number of `&lt;li&gt;` elements in `&lt;div id=&quot;selected&quot;&gt;&lt;/div&gt;`. How is that possible using jQuery&#39;s `.children([selector])`?


jQuery count child elements

How can the cursor be focus on a specific input box on page load?

Is it posible to retain initial text value as well and place cursor at end of input?

    &lt;input type=&quot;text&quot;  size=&quot;25&quot; id=&quot;myinputbox&quot; class=&quot;input-text&quot; name=&quot;input2&quot; value = &quot;initial text&quot; /&gt;

Focus Input Box On Load

Just question: Is there any way to completely remove all events of an object, e.g. a div?

EDIT: I&#39;m adding per `div.addEventListener(&#39;click&#39;,eventReturner(),false);` an event.

    function eventReturner() {
        return function() {
            dosomething();
        };
    }



EDIT2: I found a way, which is working, but not possible to use for my case:

    var returnedFunction;
    function addit() {
        var div = document.getElementById(&#39;div&#39;);
        returnedFunction = eventReturner();
        div.addEventListener(&#39;click&#39;,returnedFunction,false); //You HAVE to take here a var and not the direct call to eventReturner(), because the function address must be the same, and it would change, if the function was called again.
    }
    function removeit() {
        var div = document.getElementById(&#39;div&#39;);
        div.removeEventListener(&#39;click&#39;,returnedFunction,false);
    }

Content Type	Original Author	Original Content on Stackoverflow
Question	Ozgur	View Question on Stackoverflow
Solution 1 - Javascript	casablanca	View Answer on Stackoverflow
Solution 2 - Javascript	palswim	View Answer on Stackoverflow
Solution 3 - Javascript	Andrew Collins	View Answer on Stackoverflow

Get document object from a child element

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Spaces as tabs and backspace behavior in Vim

Posting JSON Data to ASP.NET MVC

Attributions