jQuery for Absolute Beginners: Day 13

Ais says:

Yeah Jeff, I think that’s the case, need to ask if they’re going to upgrade to PHP5 anytime soon.
Got it work with my localhost though.

Srigi says:

Another great videotutorial by Jeff.

audio:10,
video:9 (sometimes overzoomed),
information value:100

I recomend to rename series to jQuery for advanced users now. I think you shoudn’t start PHP series and keep continuing with jQuery, with some advanced topics – offline form validation, form suggest, fancy css tabs with ajax, lightbox, plugins.

Thanks for great job, keep pushing.

A Hassan says:

This is one of the best tutorials!

svgrob says:

The more I learn about jQuery, the more I love it lol

Thanks for this awesome series! Im gonna be lookin for the PHP ones soon

binz says:

Great class, I learn a lot from you! Thank you very much! By the way, I switch call PHP to save data to call .NET / .ashx, LINQ to sql.

Joe says:

Love these tutorials.

However, on this one, I’m having a problem and I cannot see what the problem is.

I get this error in firebug:

missing } after property list
[Break on this error] data: ‘name=’ + name + ‘&email=’ + email + ‘&comments=’ comments,\n

this is my javascript:

$(function() {

$(‘#submit’).click(function() {
$(‘#container’).append(”);

var name = $(‘#name’).val();
var email = $(‘#email’).val();
var comments = $(‘#comments’).val();

$.ajax({
url: ’submit_to_db.php’,
type: ‘POST’,
data: ‘name=’ + name + ‘&email=’ + email + ‘&comments=’ comments,

success: function(result) {
$(‘#container’).append(” + result + ”);
$(‘#loading’).fadeOut(500);
}
});

return false;
});

});

I almost have no more hair to pull out.

Eric Warnke says:

It seems that the videos hosted by Viddyou won’t play for me.

craigcosmo says:

Jeff, can you you enhance this tutorial in the advanced lession,like doing validating the form, and disable the submit button after user click, and enable it again it data was not inserted.

And, in another scenario, there is a link “comment” if user clicks on that link a form will be loaded up, if they click cancel, the form goes away

And, after submitting successfully, the form will close and the link ‘comment’ disabled and the comment will be retrieved from the database and display it

And so on…

You can call it the ultimate jquery-ajax-php form.

StevenR says:

Really awesome! You convinced me to use jQuery over the other cool javascript frameworks there are.

thewackonerd says:

Love your tutorials, thanks Can I make a request?
I would like to see a tutorial on uploading an image and text to MySQL where the results are displayed under the form and the page does not have to reload. Thanks for all the great help so far in in the future.

rodel says:

@jeffrey,

i have it all working except for the fact that no record is appended to the table.

what could be the problem with the insert?

a little help will be much appreciated.

by the way you got a great series of tutorials.,

i’ll be subscribing.

thanks in advance.

greetings,

carolina says:

Hi Jerry!
Great tutorials, i´ve learned a great deal from them.
Just wanted to ask. I used your script from this tutorial and came across some issues in Internet Explorer, in particular, the contents of my site which are being loaded using jQuery just stoped loading alltogether. So you know why this could be happening?

mehdi says:

thanks very useful tutorial i using mootools previously but when i see your tutorial i found jQuery very light and easier too use . tank you again . how your windows like a mac ?!

Ben says:

@Jeffrey,

Is there a way to do this with a file upload (no database needed) Could not get it to work?

Sylver says:

Very nice tutorial series.

I am enjoying very much this intro to JQuery.

Thanks.

Ronnie Overby says:

I thought it would be neat to try this with asp.net instead of php. I was amazed at how easy it was to switch.
I created an aspx page called submit_to_db.aspx and added the following code to the Page_Load event handler:
===========================================
string name = Request.Form["name"];
string email = Request.Form["email"];
string comments = Request.Form["comments"];
using (SqlConnection conn = new SqlConnection(”Server=.;Database=my_db;Trusted_Connection=True;”))
{
SqlCommand cmd = new SqlCommand(”INSERT INTO comments (name, email, comments) VALUES (@name, @email, @comments)”, conn);
cmd.Parameters.AddWithValue(”@name”, name);
cmd.Parameters.AddWithValue(”@email”, email);
cmd.Parameters.AddWithValue(”@comments”, comments);
try
{
conn.Open();
cmd.ExecuteNonQuery();
Response.Write(”Thank you. We’ll be in touch with you shortly!”);
}
catch
{
Response.Write(”There was a problem. Please try again later.”);
}
===========================================
And in the html file where the form resides, I changed the 2 references to the php file to the aspx file.
That’s it!
Greate series!

Rolf says:

thank you!

it was the first time, I am wathing and listening someone, while he ist writing code. And I enjoyed not to be the one, who has to create the neccessary files, to look for the images or to find the errors.

greetings from germany

rahul says:

HI, Way, thank you very much for this informative presentation,
I am working on J2ee framework, i was wondering how to Fetch ECHO value in result and show it on html?
thank you

Joe A says:

I cannot get even the source material to work.

Casper says:

I find it hard to use mysql.
I’ve been searching the internet from one end to an other, and I can’t find a good tut.
I need to know what programs to use, where to find them, how to use them and so on.
Have you ever made such tut?, or could you. Cause yore really good at explaining stuff. I learn so much from you.

Thank You!
Casper.

Denis says:

I have found the problem:

$querynew = ‘SET NAMES utf8;’;
if($stmt->prepare($querynew)) {$stmt->execute();}

Type it after:
$stmt = $conn->stmt_init();

And language problems should dissapear. If not, try iconv() function.

By the way Jeffrey if you read this, could you please add sorting feature “sort by last commented” or something like that.

Great job!

Patrich says:

10/10

I relly like your tutorials

matt says:

Hi

Really stuck wondering if anyone could help with the below???

Great tutorial though!

POST http://localhost:49749/jquery/submit_to_db.php

405 Method Not Allowed
22.08s jquery.min.js (line 19)
ParamsHeadersPostPutResponseCacheHTML
Response Headers
Request Headers

The HTTP verb POST used to access path ‘/jquery/submit_to_db.php’ is not allowed.

body {font-family:”Verdana”;font-weight:normal;font-size: .7em;color:black;}
p {font-family:”Verdana”;font-weight:normal;color:black;margin-top: -5px}
b {font-family:”Verdana”;font-weight:bold;color:black;margin-top: -5px}
H1 { font-family:”Verdana”;font-weight:normal;font-size:18pt;color:red }
H2 { font-family:”Verdana”;font-weight:normal;font-size:14pt;color:maroon }
pre {font-family:”Lucida Console”;font-size: .9em}
.marker {font-weight: bold; color: black;text-decoration: none;}
.version {color: gray;}
.error {margin-bottom: 10px;}
.expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }

Server Error in ‘/jquery’ Application.

The HTTP verb POST used to access path ‘/jquery/submit_to_db.php’ is not allowed.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The HTTP verb POST used to access path ‘/jquery/submit_to_db.php’ is not allowed.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[HttpException (0x80004005): The HTTP verb POST used to access path '/jquery/submit_to_db.php' is not allowed.]
   System.Web.DefaultHttpHandler.BeginProcessRequest(HttpContext context, AsyncCallback callback, Object state) +2872346
   System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +8679186

   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +155

Version Information: Microsoft .NET Framework Version:2.0.50727.4016; ASP.NET Version:2.0.50727.4016

Jasper says:

Great series.

I love to see more of the Jquery data retrieval and data update querys.
Great job on making this series im going to keep this as a golden find!.