Re: OnChange or OnBlur event in javascript to run python function in Django and return the results???

896 views
Skip to first unread message

Mario Gudelj

unread,
Dec 12, 2012, 11:28:51 PM12/12/12
to django...@googlegroups.com
Hey,

First you need to add some id to that field and then use a jQuery selector to get the value from it on blur or input:

$('#some_id).on("blur", function(){
   //make your ajax call here
});

To make the Ajax call you can use jQuery's .post() or .get(). I guess post method would make a bit more sense in this case. Look up http://api.jquery.com/jQuery.post/

So your JS looks something like this now:

$('#some_id).on("blur", function(){
    $.post('your-url/', function(data) {
           $('.result').html(data); // do whatever you want with the returned data
     });
});

You need to know how you want to process your data in JS, because you can return a string or JSON. 

At Django's end you need to create your url in the view and create a view that captures that post.

Your view could look like this:

@csrf_exempt
def your_view(request):
    if request.is_ajax() and request.method == 'POST':
        captured_post_parameter = request.POST.get('you_field_name')
        # blah blah - do your logic here
        # you can return either HttpResponse(response) or use simplejson to return json response

That's really all there is to it. I hope it helps!

-mario




On 13 December 2012 14:06, Murtaza <mpita...@google.com> wrote:
Hello All,

I have developed an internal tool with Django and Python in the backend, now it seems like I have hit a road block. 

I am very new to Javascript. And the site has to be very dynamic and it needs to be able to do something like the following:

In the input box, 

  1. The user has entered data 

  2. When the user moves out from the box, it runs an onBlur or onChange or some event function which calls a python code that takes some arguments, and takes other data from the page and Inserts that data in the database and saves. 

  3. It does that with out changing the url/refreshing the page or anything just staying on the same page.

Any ideas how to accomplish this with Python and Django. 

Thanks, any help is appreciated.
Murtaza Pitalwala


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

Jian Chang

unread,
Dec 13, 2012, 3:27:08 AM12/13/12
to django...@googlegroups.com

Yes, you need ajax

Murtaza Pitalwala

unread,
Dec 13, 2012, 11:16:48 AM12/13/12
to django...@googlegroups.com, mario....@gmail.com
Mario, 

Thanks very much for the reply. I should have said either javascript or jquery and it seems like jquery is the way to go. Let me test this now and I will get back to you if I have any further questions. 

Thanks,
Murtaza Pitalwala
--
Thanks, 
Murtaza Pitalwala | email: mpita...@google.com | Cell: (510) 697-8292 

Murtaza Pitalwala

unread,
Dec 13, 2012, 8:28:00 PM12/13/12
to django...@googlegroups.com, mario....@gmail.com
Hello Mario, 

I am trying to test the code .. and this is what I have done .. and I am getting this error 'instancemethod' object is unsubscriptable'. 

So what I am trying to accomplish here is that .. as soon as as a user stop typing in the input box and click anywhere outside the box it should just take whatever string is in the box and send it to the django function as a request.GET.get parameter. Once I have the value and the data, I can then insert it in the DB .. without ever click on the submit button and refreshing the whole page..  It would be great if you could help me out here. Thanks.... 

My HTML looks like this .. 
<html>
<head>
<title>Testing</title>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

$("#foo").change(function() { 
    $.ajax({
      type: 'GET',
      url: '/test/',
      data: {
          'SomeData': $("#SomeData").val()
      },
      success: function(data) {
          alert("Got response from server ...", data);
      }
    });
});

</script>
</head>
<body>

<form action="/test" method="GET">
<input type="text" id="foo" />
<input type="text" id="SomeData" value="something"/>
</form>

Data From Page : {{DataFromPage}}
</body>
</html>


My django view is 

def testing(request):
  DataFromPage = request.GET.get['SomeData']
  DataFromPage = "nothing"
  if DataFromPage:
     c = {
         'DataFromPage': DataFromPage,
         }
  else:
     DataFromPage = "Nothing"
     c = {
         'DataFromPage': DataFromPage,
         }
  
  return render_to_response('testing.html', c)


Thanks,
Murtaza Pitalwala

Mario Gudelj

unread,
Dec 13, 2012, 9:00:56 PM12/13/12
to Murtaza Pitalwala, django...@googlegroups.com
I'm sorry dude. I don't have much time to troubleshoot your code. But this should work:

$('#foo').on("change", function(){
                var foo = $(this).val();
               $.get('/test/'+'?foo='+foo, function(data){
                   $('#SomeData').val(data);
               });
            });

The URL in this case will look like this:

/test/?foo=value_of_field_foo

Your view testing should grab that value and process it.

Also, you should return HttpResponse(DataFromPage) instead of render_to_response('testing.html', c) since you're simply returning a string.

Make sure your view "testing" maps to /test/

Cheers,

-mario
Reply all
Reply to author
Forward
0 new messages