book_search.js

String.prototype.format = function() {
    var formatted = this;
    for(arg in arguments) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};

$(document).ready(function() {
	$("#form-book-search").submit(function(event){
		search_amazon(event);
	});

	$(".form-book-add").submit(function(event){
		add_book(event);
	});

	function search_amazon(event){
		event.preventDefault();
		console.log("CLICKED");
		console.log("title: " + $("#id_title").val());
		console.log("author: " + $("#id_author").val());
		$("#results").empty();
		
		$.post("/books/search/", 
			{
				csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
				title: $("#id_title").val(),
				author: $("#id_author").val()
			},
			function(data){
				if(data['success']){
					display_results(data['books_results']);
					$("#results").append("<hr/>");
					display_results(data['amazon_results']);
					return true;
				} else {
					console.log("error");
					return false;
				}
			},
			"json"
		);
		
	}

	function add_book(event){
		// how to get the book's title, ASIN#, ISBN#, etc. from the button?
		event.preventDefault();
		console.log(event.target);
	}

	function display_results(results){
		var i = 0;
		$.each(results, function(asin, details){
			console.log(asin + ' : ' + details);
			$.each(details, function(key, value){
				console.log(key + ' : ' + value);
			});
			$("#results").append(
				'<div class="book" id="{0}"><p id="book">'
				+ '<a href="' + details['url'] + '"><span id="book-cover"><img src="' + details['cover'] + '"/></span></a>'
				+ '<a href="' + details['url'] + '"><span id="book-title"><h3>' + details['title'] + '</h3></a>'
				+ '<span id="book-author"> by ' + details['author'] + '</span>'
				+ '</p>'.format(i)
			);
			// An "Add" form for each book
			$("#results").append(
				'<form class="form-book-add" id="{0}" method="post" action="/books/add/">'
				// Django requires a CSRF token here. How do I add it via Javascript?
				+ '<input type="hidden" id="book-asin" value="'+asin+'"/>'
				+ '<input type="hidden" id="book-title" value="'+details['title']+'"/>'
				+ '<input type="hidden" id="book-author" value="'+details['author']+'"/>'
				+ '<input type="hidden" id="book-cover" value="'+details['cover']+'"/>'
				+ '<input type="hidden" id="book-url" value="'+details['url']+'"/>'
				+ '<input type="hidden" id="book-isbn" value="'+details['isbn']+'"/>'
				+ '<input type="submit" id="btn-book-add" value="Add"/>'
				+ '</form></div>'.format(i)
			);
			i ++;
		});
	}
});

@wenbert for each book returned by the search, I want a button that $.post()s the book's details. http://doqdoq.com/asPic/

@wenbert updated the gist. Can I add a CSRF token via Javascript?

I-butang man jud na nimo... see: http://blog.ekini.net/2010/08/22/django-and-jquery-ajax/
naa jud:

    csrfmiddlewaretoken: $("input[name='id_csrfmiddlewaretoken").val(),

kay is_valid() man ig check sa view

pero dynamic man pag generate sa form, di man ko mka-gamit sa {% csrf_token %} sa Django template.

ma add raman sa ako-a...
See the end of this file: https://github.com/wenbert/clientarea/blob/master/templates/home/browse_files.html

            {% csrf_token %}
            {{form}}
  

sa template na man na nga form? ing-ani man pag create sa ako form:

$("#results").append(
    '<form class="form-book-add" id="{0}" method="post" action="/books/add/">'
    // Django requires a CSRF token here. How do I add it via Javascript?
    + '<input type="hidden" id="book-asin" value="'+asin+'"/>'
    + '<input type="hidden" id="book-title" value="'+details['title']+'"/>'
    + '<input type="hidden" id="book-author" value="'+details['author']+'"/>'
    + '<input type="hidden" id="book-cover" value="'+details['cover']+'"/>'
    + '<input type="hidden" id="book-url" value="'+details['url']+'"/>'
    + '<input type="hidden" id="book-isbn" value="'+details['isbn']+'"/>'
    + '<input type="submit" id="btn-book-add" value="Add"/>'
    + '</form></div>'.format(i)
);

just put the {% csrf_token %} inside the append()...
una man jud na mo-parse ang {% csrf_token %}...
before i-parse ang JS kay una ang {% csrf_token %}.... so...

$("#results").append(
    '<form class="form-book-add" id="{0}" method="post" action="/books/add/">'
    + '{% csrf_token %}'
    + '<input type="hidden" id="book-asin" value="'+asin+'"/>'
    + '<input type="hidden" id="book-title" value="'+details['title']+'"/>'
    + '<input type="hidden" id="book-author" value="'+details['author']+'"/>'
    + '<input type="hidden" id="book-cover" value="'+details['cover']+'"/>'
    + '<input type="hidden" id="book-url" value="'+details['url']+'"/>'
    + '<input type="hidden" id="book-isbn" value="'+details['isbn']+'"/>'
    + '<input type="submit" id="btn-book-add" value="Add"/>'
    + '</form></div>'.format(i)
);

have you tried that?

m-output ra og "{% csrf_token %}" sa html. lol.

ibutang ra na sa gawas uy. g.ajax btaw na nimo. no need form tags. kuha ka value direct man by id thru jquery.

weird. why d m.display.... but try putting it outside. per session mana. so bsn unsaon nimo balik basta same page same ra ang value

btw not sure if makuha nimo ang values sa dom na imu gdynamically g.generate.... lol try lang

Aw. Kung di makita ig "View Source" kay di pud mahilabtan sa jQuery?

Hmmm not sure.... try lang... but unaha sa to imu usa ka problem... solve the other one first...

On Wed, Apr 6, 2011 at 9:38 PM, john2x < ***@***.***>wrote: Aw. Kung di makita ig "View Source" kay di pud mahilabtan sa jQuery? ## Reply to this email directly or view it on GitHub: https://gist.github.com/900438

## Wenbert Del Rosario http://blog.ekini.net