Forums

Ajax and Blocks

Permalink 1 user found helpful
Hi, I've been experimenting with ajax in a simple block. I can have it work so if I click a link it returns whatever it should from controller.php

view.js
$(function() {
   $('a.submit').each(function() {
      $(this).click(function() {         
         var url = $(this).attr('href') + '&ajax=1';
         var elem = $(this).parent();
         $.get(url, function(r) {
            $('div.status').before(r).remove();
         });         
         return false;
      });
   });
});
Link in view.php
        <?php $action = $this->action('test'); ?>
Viewing 15 lines of 17 lines. View entire code block.


That all works fine, I put that together from Andrews tutorial with the like me block.

What I want to do though, is have the Ajax stuff returned to the browser when I submit a form not use the link.

I think something needs to change in view.js, but i haven't been able to get it to work. Can someone point me in the right direction?

Thanks
Peter
pvernaglia
 
jordanlev replied on at Permalink Reply
jordanlev
Just put a form on the page and use the $action variable as the form's action -- for example:
<form action="<?php echo $this->action('test'); ?>" method="post">
   ...
</form>


BTW, the "Building with Concrete5" forum is a better place for questions like this -- you'll get a quicker answer there because that's where developers tend to look more.

Hope that helps!

-Jordan
pvernaglia replied on at Permalink Reply
pvernaglia
I tried that, it returns a new page with the info generated from controller.php but not using ajax like it will with the link
jordanlev replied on at Permalink Reply
jordanlev
Ok, just change the javascript so it applies to your form instead of to your link.

Give your form an id, like this:
<form id="ajaxform" action="<?php echo $this->action('test'); ?>" method="post">

Then change your javascript to this:
$(function() {
   $('#ajaxform').submit(function() {
      var url = $(this).attr('action') + '&ajax=1';
      $.get(url, function(r) {
         $('div.status').before(r).remove();
      });
      return false;
   });
});


See this page for more info on using the form .submit() event:http://api.jquery.com/submit/

-Jordan
pvernaglia replied on at Permalink Reply
pvernaglia
Thanks, that's getting me almost where I want to be. When I add the id to the form my $_POST info does not get processed in controller.php. Would that be getting lost somewhere between view.js and controller.php?

Thanks for your help and the link to the submit info!
jordanlev replied on at Permalink Reply
jordanlev
How are you trying to access the $_POST variables? Usually I use $this->post('FIELD_NAME')

You can also just look to the $_POST array and see if there's anything in there -- if not, are you sure that you have form fields inside the form you're submitting that would contain the data?
pvernaglia replied on at Permalink Reply
pvernaglia
I'm using the $_POST array and echoing back some text to test the ajax stuff. If I use a Form like this:

<form action="<?php echo $this->action('test'); ?>" method="post">


Then I getmy text and all the $_POST info back on a new page. But when I add the id="ajaxform" 


<form action="<?php echo $this->action('test'); ?>" method="post" id="ajaxform">


The ajax function works and I get my text back the way I want, but the $_POST is empty. I'm using this for view.js:

$(function() {
  $('#ajaxform').submit(function() {
     var url = $(this).attr('action') + '&ajax=1';
     $.get(url, function(r) {
        $('div.status').before(r).remove();
     });
     return false;
  });
});


but the $POST info seems to get lost with this.

Thanks
jordanlev replied on at Permalink Reply
jordanlev
Perhaps you need to change the $.get to $.post?

(Sorry I don't have a definitive answer for you, as I've never tried to do this myself)