Develop Reference

JQuery: Append/After difficulties

I have a simple input line and want to append whatever has been entered each time somebody pushes the OK button. Sounds simple so far, still I am unable to get it working
HTML:
<p>
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<p id="status">Ok</p>
<br>
JQuery:
$(document).ready(function(){
$('#status').on('click', function(){
var input = $('input[name=todo]').val();
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').after('#status');
});
});
I also tried my luck with append or appendTo, but both times unsuccessfully.
Just in case here is the JSFiddle: http://jsfiddle.net/NRWzE/

.after() works, but you need to set it up correctly, according to documentation it should be:
.after( content [, content ] )
So the right way is:
$("#status").after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');

Try use jquery insertAfter:
$(document).ready(function () {
$('#status').on('click', function () {
var input = $('input[name=todo]').val();
$('<br><b id="taskz">' + input + '</b> - <b id="statusz">Ok</b>').insertAfter('#status');
});
});

It looks like you meant to use:
$('#status').after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
(see after docs)
or, alternatively insertAfter:
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').insertAfter('#status');

Try this:
$('#status').click(function(){
var input = $('input[name=todo]').val();
$('#status').append('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
});

There are a few things going on, but the big thing is that you need to research more how after, append and appendTo work. Here's the basic syntax difference in the methods that share a name but one has To on the end:
Newcontent.appendTo(existingElement) returns newElements.
existingElement.append(newContent) returns existingElement.
Additionally, after puts the new element as a sibling of the reference element, whereas append puts the new element as a child. This is an important difference.
So, try this script then:
var taskid = 1;
$('#valueform').on('submit', function(){
var input = $('#todo').val();
$('<br><span id="task' + taskid.toString() + '">' + input
+ '</span> - <span id="status' + taskid.toString()
+ '">Ok</span>').appendTo('#status');
taskid += 1;
$('#todo').focus().select();
return false;
});
$('#todo').focus().select();
See a Live Demo at JSFiddle
Here's the supporting HTML:
<form id="valueform">
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<input type="submit" value="OK" id="okbutton">
</form>
<p id="status"></p>
There are some other concerns:
I recommend you study which HTML elements are allowed within which HTML elements.
Instead of putting a <b> tag on each item, use CSS. Additionally, if there is semantic importance for the bolding, then use <strong> instead. <b> also should probably not take an id because it is a presentation tag, not a content tag. When thinking of presentation vs. semantics, one must consider screen readers or browsers that cannot render bold text--in that case, <strong> will allow them to emphasize the text in another way if needed.
Get familiar with the jQuery documentation. Careful reading of what exactly each function does, the object it works on, the parameters expected, and the values returned will enable you to get past barriers in the future without having to ask here.
It looked to me like you wanted to put the new content inside of the #status paragraph, not after it. So I wrote my script that way. If you put it after the way you wrote it, then the most recent status will be on top--but then you have non block-level content (starting with your <br>) outside of any block-level element. So you should be appending <p> elements, or you should put your content inside the existing <p>.
Note: I added a form and made the button type submit instead of button to get easy Enter-key handling. It doesn't have to be this way.

Uncaught TypeError: Cannot set property 'value' of null

I'm trying to pass the entered text to the controller using an ajax request. But i'm getting athe error "Uncaught TypeError: Cannot set property 'value' of null " when I tried to execute JS file..
Here is the HTMLcode:
<form action="">
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
<input type="button" class="searchbox_submit1" name="submit" value="text" onClick="javascript:getSearchText();">
</form>
Here is the JS code:
function getSearchText() {
var searchText = document.getElementByName("search").value;
h_url=document.getElementById("u").value;
var theURL = h_url+'search_all/' + deptid + '/' + searchText + '/1';
$.ajax({
url : theURL,
fail: function(){
},
success : function() {
},
error:function(){
}
});
}
Please help me to fix this.

You don't have an element with the id u.That's why the error occurs.
Note that you are trying to get the value of the input element with the name 'u' and it's not defined in your code.

The problem may where the code is being executed. If you are in the head of a document executing JavaScript, even when you have an element with id="u" in your web page, the code gets executed before the DOM is finished loading, and so none of the HTML really exists yet... You can fix this by moving your code to the end of the page just above the closing html tag. This is one good reason to use jQuery.

In case anyone landed on this page for a similar issue, I found that this error can happen if your JavaScript is running in the HEAD before your form is ready. Moving your JavaScript to the bottom of the page fixed it for my situation.

The problem is that you haven't got any element with the id u so that you are calling something that doesn't exist.
To fix that you have to add an id to the element.
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
And I've seen too you have added a value for the input, so it means the input is not empty and it will contain text. As result placeholder won't be displayed.
Finally there is a warning that W3Validator will say because of the "/" in the end. :
For the current document, the validator interprets strings like according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.
In conclusion it says you have to remove the slash. Simply write this:
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item...">

I knew that i am too late for this answer, but i hope this will help to other who are facing and who will face.
As you have written h_url is global var like var = h_url; so you can use that variable anywhere in your file.
h_url=document.getElementById("u").value;
Here h_url contain value of your search box text value whatever user has typed.
document.getElementById("u");
This is the identifier of your form field with some specific ID.
Your Search Field without id
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
Alter Search Field with id
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
When you click on submit that will try to fetch value from document.getElementById("u").value; which is syntactically right but you haven't define id so that will return null.
So, Just make sure while you use form fields first define that ID and do other task letter.
I hope this helps you and never get Cannot set property 'value' of null Error.

guys This error because of Element Id not Visible from js Try to inspect element from UI and paste it on javascript file:
before :
document.getElementById('form:salesoverviewform:ticketstatusid').value =topping;
After :
document.getElementById('form:salesoverviewform:j_idt190:ticketstatusid').value =topping;
Credits to Divya Akka .... :)

It seems to be this function
h_url=document.getElementById("u").value;
You can help yourself using some 'console.log' to see what object is Null.

h_url=document.getElementById("u") is null here
There is no element exist with id as u

Add defer to your script tag, if it's in header. It will allow your script to execute after the DOM is loaded.
<script src="script.js type="text/javascript"></script>
It should look like this:
<script src="script.js type="text/javascript" defer></script>

FORM looks empty according to DOM-inspector

I have an issue with an web app im working on. The input-fields in the form is added by jQuery. My form looks like this in the HTML-editor:
<form id="profile" method="post" action="Profile/UpdateProfile">
<tr><td><b>Namn:</b></td><td><parameter name="Name" class="transform">#ViewBag.Name</parameter></td></tr>
<tr><td><b>Address:</b></td><td><parameter name="Address" class="transform">#ViewBag.Address</parameter></td></tr>
<tr><td><b>Postaddress:</b></td><td><parameter name="ZIP" class="transform">#ViewBag.ZIP</parameter></td></tr>
<tr><td><b>Personnummer:</b></td><td><parameter name="Pnumber" class="transform">#ViewBag.Pnumber</parameter></td></tr>
</form>
But it appears like this in the DOM-inspector:
<form id="profile" method="post" action="Profile/UpdateProfile"></form>
<tbody><tr><td><b>Namn:</b></td><td><parameter name="Name" class="transform">Anton Gildebrand</parameter></td></tr>
<tr><td><b>Address:</b></td><td><parameter name="Address" class="transform"></parameter></td></tr>
<tr><td><b>Postaddress:</b></td><td><parameter name="ZIP" class="transform">0</parameter></td></tr>
<tr><td><b>Personnummer:</b></td><td><parameter name="Pnumber" class="transform"></parameter></td></tr>
</tbody>
It may look weird that i have no inputs, but when the user presses an edit-button, the "parameter"-tag transforms into textinputs using this javascript:
$('#' + id + ' .transform').each(function (index) {
var val = $(this).html();
$(this).html('');
var tag = $(this).parent().html();
var newTag = tag.replace('<parameter', '<input type="text" value="' + val + '"');
newTag = newTag.replace('</parameter', '</input');
$(this).parent().html(newTag);
});
As you can see the "parameter"-tags isn't wrapped by the form in the DOM-inspector, and nothing is posted (i debugged using Fiddler) to the server. How do i solve it?

Wrap the form around the entire table.
You can't put forms inside a table element but outside a table cell. The result you see if the browser trying to perform error recovery. It is usually a good idea to make use of a validator (although you need to run it on the markup you intend to generate if you are generating it using JS).
(Also, use css for layout and use label elements instead of bold elements).

dynamically added input fields not submitting

here's the jsFiddle. i'm sorry if it doesn't work properly; damn things rarely do for me... i hate jsFiddle, but it gets the code to you faster...
the php document it goes to simply does this:
<pre><?php
print_r($_POST);?>
</pre>
the rows add to the DOM just fine. but the values do not submit to the $_POST array.
what am i missing?
and yes i've read this and this and they don't help.
using Mootools, btw, so please don't bother with any jQuery answers.

In your code I see an HTML syntax error. Can you check this line:
<input class="catCell" name"catlist" id="catList" type="text" tabindex="345"
value="none or name" onChange="markFilled('catList', this.value);">
The syntax error is on name attribute, that is essential to get form submission work...

Having your form element inside a table element can also be a cause of this issue

$('nextStep').addEvent('click', function(e) {
console.log('BAM! form intercepted!');
$('clientDataForm').send();});
basicly all i did is add }); to the end..
and amazingly, it works!
here:
http://jsfiddle.net/36yC5/9/

Most of these errors coming from the wrong structure of HTML.
Cases:
1. Form element start within the table OR Form close before the table end
<table><form>
<tr><td><input type="text" name="fname"></td></tr>
<tr><td><input type="text" name="lname"></td></tr>
</form></table>
This will not work
<form><table>
<tr><td><input type="text" name="fname"></td></tr>
<tr><td><input type="text" name="lname"></td></tr></table></form>
This will work (Observe the form begin before the table and ends after the table)
Form start OR end inappropriate place
Not specifying "name" attributes

xml() function in jQuery

There is already the html() function in jQuery.
The problem I am having with this function is that, in its returned html string, all the self-closing / are stripped off from the elements. For example,
<div>
<input type="text" name="textbox1" value="" />
</div>
Becomes:
<div>
<input type="text" name="textbox1" value="">
</div>
I know this is normal for this function since this is valid in html.
But I would like to have a function that returns valid xml so that the / is still there in the returned string.
It seems jQuery itself does not provide such a function, so I wonder if anyone knows of any plugin that can make this possible.
Thanks in advance.

I think you are misconceiving how browsers interpret HTML. They don't keep a copy of your source file and modify it according to your Javascript. Rather, a browser reads your HTML and parses it into a DOM representation. This corrects any mistakes you may have made in your HTML. When you try to get the HTML of an element, the element is converted to a string according to the current DOCTYPE. Since you probably have an HTML doctype (it's quite hard to get a browser to genuinely treat your document as XHTML), you get HTML returned to you.
Doing this in Javascript is almost certainly not the way to go.

I think this is what I need.
Thank you very much for everyone's reply.
http://code.google.com/p/jquery-clean/
UPDATE 1: I thought this plugin would work but actually it does not. The way I use it is that, I pass it the html string returned by html() and let it fix the tags which do not properly self-close.
However, the way it corrects the tags is not what I need (seems like a bug).
For example, passing it the following html:
<div><input type="text" id="txt1" name="txt1"><label for="txt1">TextBox1</label></div>
It gives:
<div><input type="text" id="txt1" name="txt1"><label for="txt1">TextBox1</label></input></div>
Rather than:
<div><input type="text" id="txt1" name="txt1" /><label for="txt1">TextBox1</label></div>
UPDATE 2: The bug I mention above is already fixed. This plugin works now. If you want to test it out, feel free to paste your html in this page and see if it works for you:
http://www.antix.co.uk/Content/Demos/jQuery-htmlClean/Test.htm

You could try using the native .innerHTML property (you cen get the native element using .get() in jQuery).