The curious case of a textarea

May 19, 2011

I came across this little problem today, where I wanted the modified content of a textarea.

This is the textarea:

<textarea id="area">Some text</textarea>

I wanted to edit it, and then alert the result. But guess what, the alerted text said “Some text” and not “Edited text”

The following code was tried:

alert($('#area').text());
alert($('#area').html());
alert(document.getElementById('area').innerHTML);

The answer was really simple after some minutes of trying, but the question why still remains.

This does the trick:

alert(document.getElementById('area').value);
alert($('#area').val());

Leave a Comment » | JavaScript, jQuery | Permalink
Posted by John Larsen

Problem with getting JSON from PHP using AJAX

March 3, 2011

I got this problem when I wanted to get back a json produced in PHP. Naturally, I used this header:
header('Content-Type: application/json; charset=utf-8');

It did not work, and that’s the one that everybody said I should use. So I tried different. I tried this:
header('Content-type: text/plain; charset=utf-8');

And it worked! In FireFox, in Chrome, in IE 8 on my computer, but it failed on IE 8 on my co-workers computer. WTF? Yep. Somehow it failed, and it needed a fix.

Since it failed, I can tell you that in AJAX the return value was not the expected one. I used jQuery and expected the dataType: “json” to work. jQuery does the evaluation of the data and creates a JSON object. But not this time. It failed. In IE8 the header seemed to be ignored and the value returned was wrapped in <html><body></body></html> – and yes, it seemed to be a common error somehow, except that none of the solutions mentioned that seemed to work for others worked for me. I even tried some really simple code, and it failed – but I managed to get it to work if the filename actually was .json – but then I could not use PHP. Or could I? The solution was this, with two headers in PHP:

header('Content-type: text/plain; charset=utf-8');
header('Content-Disposition: inline; filename=response.json');

And then do the

echo json_encode($array);

And voila, it worked.

1 Comment | AJAX, JavaScript, jQuery, PHP | Permalink
Posted by John Larsen

Sexy Code

February 5, 2011

Why does JavaScript get all this attention and rethinking these days? Wherever I turn my browser there is a lot about jQuery, node.js, prototype etc. Why cannot the same techniques be applied server-side, on PHP? Aint PHP sexy? JavaScript was not sexy at a point until someone made something with it and it became fantastic and easy. How did that happen? Are JavaScript developers more creative? Is it a better and more flexible language? Is it because its front end and handles interaction?

Well. I’m going to try to code sexy when I do PHP. Right now I’m writing this html parser that is neat and cool. I want to be a part of server-side language revolution with PHP. It has potential! I don’t want to hear about Ruby on Rails, .Net or Python – lets empower PHP, and get rid of all that crappy code out there.

I’ve programmed a database class multiple times, and its an evolution. This happens in every aspect of my code all the time, and that’s really a journey. Here are the database example:

First it was spaghetti.
Second time I made it in a config file.
Third time I switched out mysql with mysqli and made some functions.
Fourth time I made the database a class.
Fifth time I accessed it through a controller and DAO classes.
Sixth time around I made it a singleton and reused the connection.
Seventh time I added pconnect and it became persistent.
Eight time, then the database object extended the mysqli class.
Ninth improvement was to make a ORM expand the connection.
Tenth evolution was to make an easier access for the creation of advanced queries.
Eleventh time, I made the ORM chainable and combined more advanced queries to it.
Twelfth thing was to improve the to interact with different kinds of result sets.
Thirteenth, in the end, the chainable database singleton class extending mysqli got wrapped in a function for easy access.

How do you like this kind of code:
echo query('tablename')->columns('id, name, regdate')->where('id > 155')->orderby('name')->asc()->toarray()->html();

And the future still brings more:
– The code to support multiple different databases
– Extends the support for joins and relations
– Add better template engine to the output presentation
– Make the mess faster

That is what I’m currently working with…

Leave a Comment » | Best Practice, JavaScript, jQuery, Objects, Patterns, PHP | Permalink
Posted by John Larsen

Readonly dropdowns

January 21, 2011

As a developer you probably meet this problem at one point – how to make the dropdown select a readonly element. This works just find with other inputs where you can say readonly=”readonly”, but a <select> does not have this option – it has only the disabled=”disabled”, but this will not post the element.

My solution is a little bit of jQuery (this can be done in plain javascript too, but it’s a bit longer code), that disables all off the <option> tags that are not selected – then the <select> still is available for post with the current selected <option> tags and with the rest disabled so that the <select> can be viewed but not changed (Read Only).

The code for readonly:
$("#selectid option").not(":selected").attr("disabled", "disabled");
The code for resetting:
$("#selectid option").not(":selected").attr("disabled", "");

Hope this helped.
Do you have a better/easier solution? Please share.

Leave a Comment » | HTML, JavaScript, jQuery | Permalink
Posted by John Larsen

Sticky Note with CSS and JavaScript

December 29, 2010

I wanted to se how easy it was to make one of those yellow sticky notes with CSS and a little bit of bonus javasrcipt. Current version is a bit flawed – but works, is easily modded, and shows the idea.

To see the demo, click here

This can be made more simple by removing some JavaScript functionality. For instance, It’s really an overload to include jQuery and jQueryUI for the small stuff it adds, when it can be done in some simple lines of good old JavaScript – but if you have included the libraries already, then use them. This should work cross browser as well.

Features:
– Hidden by default, opens by click
– Different styles to different points
– Lines made in CSS
– Linetrough points by click
– Gap at top and bottom + close button at top
– Draggable

Lacks:
– Toggle on/off by click not implemented
– Some smaller bugs
– No real modifying functionality (like adding/removing/editing)

Leave a Comment » | CSS, HTML, JavaScript, jQuery | Permalink
Posted by John Larsen

Rebinding in jQuery

August 14, 2010

There is one problem in jQuery that really took a while to figure out(and I’m probably not the first one this happens to), but when I got it – I’ll hopefully never forget it. It’s about ajax part of it, when you have for instance a button with and click event attached to it, and want the same event to be attached to the button returned by ajax. I thought, yea, it should be automatic, but guess what? It was not. The event did not work on the new button added to the page dynamically and I did not get why.

My code was like this:
$(".button").click(function(){
//Do stuff
})

The same as this:
$(".button").bind("click", function(){
//Do stuff
})

The solution was kind of simple, you have to rebind the event to the button that returns from backend. The hard way to do it is to copy the code, or make a method with the code, that is run once the page loads and when the new button arrives to bind it again. But that is just wrong, so I’m glad jQuery had a better answer.

The answer is the .live() method that works exactly the way .bind() does but also in the future:
$(".button").live("click", function(){
//Do stuff
})

I think it’s also possible to use the method .delegate(), where you can delegate the listener to a selector in a specific context like this:
$("body").delegate(".button", "click", function(){
//Do stuff
})

Leave a Comment » | AJAX, JavaScript, jQuery | Permalink
Posted by John Larsen

960 gridder and jQueryUI

March 17, 2010

When I coded today I did not understand why jQuery UI elements did not work. I tried everything, and I was sure my code was right. So, finally I began to systematically make the file I was editing as simple as possible to get to the bottom of the error.

Guess what? jQuery UI function worked when I disabled the 960 Gridder I’m using on my current project. Bummer. That was 4 hours of debugging right there. But I learn.

Did I find out exactly what caused the bug? No, I didn’t want to try to do that. And, tho worst thing, I did not have the use of the jQuery UI function after all.

Well, Thats it. If you have the same problem, remember: 960 may be the cause.

4 Comments | CSS, JavaScript, jQuery | Permalink
Posted by John Larsen