Django jQuery AJAX Self Replacing Script

39 views
Skip to first unread message

That guy

unread,
Dec 30, 2012, 8:16:17 PM12/30/12
to django...@googlegroups.com
Hello,


I've been having trouble implementing a self-replacing script. I admit that I am terribly confused.

I am trying to implement two buttons such that if you click on one, a POST request is sent to the server; the server validates that you indeed went to this webpage and sends back a HttpResponseRedirect to a page containing an incomplete web-page/a page that has only the portions I want updated after the button is clicked. Once my orginal jQuery request receives that new page, it will replace the elements on current the page with the new one it just received.

My jQuery looks like:

<script id="self_replacing">
$(document).ready(function() {  
  $('#button1').click(function(){
    $.post("/", { 
      unique_id : "{{ unique_id }}",
      csrfmiddlewaretoken: '{{ csrf_token }}'
    },
    function(data){
       var js_portion = $('<div/>').html(data).find('self_replacing')
       var html_portion = $('<div/>').html(data).find('pic_content')
       $('pic_content').replaceWith(html_portion)
       $('self_replacing').replaceWith(js_portion)
    });
  });
});
</script>

Incomplete Page:

<script id="self_replacing">
$(document).ready(function() {  
  $('#button1').click(function(){
    $.post("/", { 
      unique_id : "{{ unique_id }}",
      csrfmiddlewaretoken: '{{ csrf_token }}'
    },
    function(data){
       var js_portion = $('<div/>').html(data).find('self_replacing')
       var html_portion = $('<div/>').html(data).find('pic_content')
       $('pic_content').replaceWith(html_portion)
       $('self_replacing').replaceWith(js_portion)
    });
  });
});
</script>
<div id="pic_content">
      .
      .

</div>

Do I have the right idea? When I watch my requests through the FireBug console, the traffic begins scaling upward everytime the button is clicked.

For instance at the start, it beings with 1 click = 1 POST then 1 click = 2POST, and then 1 click = 3 POST. I'm not too sure why this is happening. Is there something wrong with my jQuery script?

Note: The jQuery script needs to be updated after each POST too.


Thank You for any help you can provide :)

That guy

unread,
Dec 30, 2012, 8:53:56 PM12/30/12
to django...@googlegroups.com
EDITs made to orginal but same issue.


On Sunday, December 30, 2012 5:16:17 PM UTC-8, That guy wrote:
Hello,


I've been having trouble implementing a self-replacing script. I admit that I am terribly confused.

I am trying to implement two buttons such that if you click on one, a POST request is sent to the server; the server validates that you indeed went to this webpage and sends back a HttpResponseRedirect to a page containing an incomplete web-page/a page that has only the portions I want updated after the button is clicked. Once my orginal jQuery request receives that new page, it will replace the elements on current the page with the new one it just received.

My jQuery looks like:

<script id="self_replacing">
$(document).ready(function() {  
  $('#button1').click(function(){
    $.post("/", { 
      unique_id : "{{ unique_id }}",
      csrfmiddlewaretoken: '{{ csrf_token }}'
    },
    function(data){
       var js_portion = $('<div/>').html(data).find('self_replacing')
       var html_portion = $('<div/>').html(data).find('pic_content')

       $('#pic_content').replaceWith(html_portion)
       $('#self_replacing').replaceWith(js_portion)
    });
  });
});
</script>

Incomplete Page:

<script id="self_replacing">
$(document).ready(function() {  
  $('#button1').click(function(){
    $.post("/", { 
      unique_id : "{{ unique_id }}",
      csrfmiddlewaretoken: '{{ csrf_token }}'
    },
    function(data){
       var js_portion = $('<div/>').html(data).find('self_replacing')
       var html_portion = $('<div/>').html(data).find('pic_content')

       $('#pic_content').replaceWith(html_portion)
       $('#self_replacing').replaceWith(js_portion)

    });
  });
});
</script>
<div id="pic_content">
      .
      .

</div>

Bill Freeman

unread,
Jan 1, 2013, 3:30:51 PM1/1/13
to django...@googlegroups.com
1.  Have you displayed what you are getting back in, say, an alert box, to confirm that you are getting back an answer, and that it's what you expect?
2. Simply replacing that part of the ntml structure that was in a script tag probably (I'm not sure) won't do you any good, since I believe that code was parsed and executed (defining functions, storing in globals) was done at page load, and that script tag won't be executed again.  You probably have to exec code coming back that redefines a global.  Further, just redefining a named function may not server to change what is attached to existing handlers, since the function name may have been evaluated when the handler was set, leaving a function object attached there, rather than something that will go through the variable holding the new function, so you may have to re-set handlers, or use ones that call functions that call your redefined functions.  But I'm beyond the limits of what I've tried in JavaScript.  So instrument things and try, try, again.

Bill
Reply all
Reply to author
Forward
0 new messages