Sample jQuery Ajax app

[Shannon Cruey]

Hi everyone...

It seems like a recurring theme on this group is questions about the separation of 'server side' (web.py/python) and 'client' (html/javascript).  Especially for developers new to web development, the concepts can be confusing.

I've made a sample application framework using web.py and jQuery.  It demonstrates code organizational structure, has some basic web.py templating, and ajax content using jQuery.

Check it out at: https://github.com/shannoncruey/webpy-jquery-sampleapp

I'll try to update it as I find the time, specifically as new questions arise.

Hope it helps someone!
S

[Brendan Sleight]

On Friday, 14 December 2012 16:14:06 UTC, NSC wrote:

Hi everyone...

Check it out at: https://github.com/shannoncruey/webpy-jquery-sampleapp

Hope it helps someone!

Very helpful to me. As a beginner in wep.py (<4 days) it also shows some good practice with include js and css files. 

IMHO - Good addition to the cookbook examples. 

Thanks,

Brendan

[Zagfai Kwong]

No matter GET or POST, you could use web.input()

Brendan Sleight於 2012年12月26日星期三UTC+8下午7時43分41秒寫道：

[*]

> --
> You received this message because you are subscribed to the Google Groups
> "web.py" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/webpy/-/Q5sZlYyaJDUJ.
>
> To post to this group, send email to we...@googlegroups.com.
> To unsubscribe from this group, send email to
> webpy+un...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/webpy?hl=en.

Thanks, this sample app is helping me a lot!!! :-)

Re: "jquery ajax args must be a JSON string" [0]

As far as I can tell, the data setting of jQuery's .ajax doesn't need
to necessarily be a string. For instance the docs [1] say: "Object
must be Key/Value pairs."

For what I'm doing, it makes more sense to write some json and send it
like this...

var my_data = { id: "12345", tags: "tag1,tag2,tag3" }
$.ajax({
type : "POST",
url : "/my_url/",
data : my_data,
contentType : "application/json; charset=utf-8",
dataType : "json",
});

However, this is not working...
Is there something that needs to be changed in the getAjaxArg function
[2] for this to work???

Hope this makes some sense :-)

[0]
https://github.com/shannoncruey/webpy-jquery-sampleapp/blob/master/static/script/ajaxdropdowns.js#L14
[1]
http://api.jquery.com/jQuery.ajax/
[2]
https://github.com/shannoncruey/webpy-jquery-sampleapp/blob/master/main.py#L77

[Shannon Cruey]

I believe you're hitting the issue I meant to express with that not-very-helpful comment.  You said you wanna write some json, but you're still defining my_data as a javascript object.  Look at line 38 of ajaxdropdowns.js for a better documented example.

You've defined my_data as a *javascript object*, but the jQuery ajax function likely is talking about a *json object)*  (a STRING representation of your js object).

I usually use the browsers built-in json to seralize the javascript object into a string, like this:

var my_data = { id: "12345", tags: "tag1,tag2,tag3" }
$.ajax({
  type : "POST",
  url : "/my_url/",

  data : JSON.stringify(my_data),

  contentType : "application/json; charset=utf-8",
  dataType : "json",
});

Now, if you truly want to construct my_data as json, it has to be a string, so this should work too.  (Notice the quotes on my_data :-)

var my_data = '{ id: "12345", tags: "tag1,tag2,tag3" }'
$.ajax({
  type : "POST",
  url : "/my_url/",
  data : my_data,
  contentType : "application/json; charset=utf-8",
  dataType : "json",
});

Yes, this very thing bit me several times until I got my head around it.  Good luck :-)

[Scott Gelin]

For me - this comes down to necessities.  Is it a necessity to send that data as a JSON object?  If the answer is no(which I think it is), you can remove the contentType from your original ajax request, and it would fire off correctly and be received by web.py just fine.

var my_data = { id: "12345", tags: "tag1,tag2,tag3" }
$.ajax({
  type : "POST",
  url : "/my_url/",
  data : my_data,

});

 

I dropped dataType because I didn't see a callback function (complete, success, failure, etc.) handling the server response.  If you are handling the response, and expecting application/json back from the server - than you should leave that in so jQuery will parse the server response properly.

I spot tested and something like this works

jQuery.ajax({

type:"POST",

url:'/someurl',

data:{id:'12345',tags:'tag1,tag2,tag3'},

success:function(data){

  console.log(data);

  }

});

recv'd by:

class SomeUrlClass: def POST(self): buffer = 'Unable to process' data = web.input()

id = data.get('id','No Id')

tags = data.get('tags','').split(',')

return "id: %s, tags: %s" % (id, ','.join(tags))

[Shannon Cruey]

I see what you are saying.  It may be that old habits are stuck in my head.  This sample app came from code that was originally jquery and an ASP.NET backend.  I had problems with the way the server handled the default contentType.  (It's 'application/x-www-form-urlencoded; charset=UTF-8'if omitted.)  In the past year I've abandoned ASP completely and migrated all our apps to web.py.

You'll also see in this sample app I have a helper function (getAjaxArg) that checks both web.data and web.input.  In my early days learning web.py I was having an issue with my data not being in web.input().  This helper function fixed my issue at the time and I never looked back.

I have not conclusively tested it, but I suspect web.input and web.data might not be interchangable, depending on the http verb or the post content type used.

Please feel free to optimize the sample app for the betterment of all of us!  Just fork it and send me a pull request.

S

[Aaron Huang]

well, it is what i am looking for for a very long time. thanks!