• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
I'm going insane (AJAX)

#1
[eluser]solid9[/eluser]
Hi guys,

<b>header</b>
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;barterswapping.com&lt;/title&gt;

&lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url('css/style.css'); ?&gt;" media="screen" /&gt;
&lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url('css/topmenu.css'); ?&gt;" media="screen" /&gt;
&lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url('css/header.css'); ?&gt;" media="screen" /&gt;
&lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url('css/body.css'); ?&gt;" media="screen" /&gt;
&lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url('css/footer.css'); ?&gt;" media="screen" /&gt;
[removed][removed]
[removed][removed]
&lt;/head&gt;

<b>controller</b>
Code:
&lt;?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Ajax_post extends CI_Controller {
public $data = array(
                   'username' => '',
                   'header_message' => '',
                   'member_menu' => '',
                   'comments' => ''
    );

public function __construct() {
  parent::__construct();

  $this->load->helper('form');
  $this->load->helper('html');
  $this->load->helper('url');
  $this->load->model('ion_auth_model');
  $this->load->model('bs_model');
  $this->load->library('ion_auth');
  $this->load->library('form_validation');
  $this->load->library('email');
  $this->load->library('pagination');
  $this->load->library('table');
  $this->load->library('comment');

  $this->data['header'] = $this->load->view('header', null, TRUE);
  $this->data['footer'] = $this->load->view('footer', null, TRUE);
  
  $this->data['leftnav'] = $this->load->view('body_leftnav', null, TRUE);
  $this->data['midnav'] = '';
  $this->data['rightnav'] = $this->load->view('body_rightnav', null, TRUE);
  
  //setting default values
  $this->session->set_userdata($this->data['header_message'], '');
  $this->session->set_userdata($this->data['username'], '');
}
  
  function index()
  {
    
    $this->load->view('ajax_post_view');
  }
  
  function post_action()
  {
  
    if(($_POST['username'] == "") || ($_POST['password'] == ""))
    {
      $message = "Please fill up blank fields";
      $bg_color = "#FFEBE8";
    }elseif(($_POST['username'] != "admin") || ($_POST['password'] != "asdf")){
      $message = "Username and password do not match.";
      $bg_color = "#FFEBE8";
    }else{
      $message = "Username and password matched.";
      $bg_color = "#FFA";
    }
    
    $output = '{ "message": "'.$message.'", "bg_color": "'.$bg_color.'" }';
    echo $output;
  }
  
  function post_action2()
  {
  
    if(($_POST['name'] != "") || ($_POST['email'] != ""))
    {
      $message = "Data captured:";
      $bg_color = "#FFEBE8";
  
   echo 'name: ', $_POST['name'];
   echo '<br>email: ', $_POST['email'];
    }
    
    $output = '{ "message": "'.$message.'", "bg_color": "'.$bg_color.'" }';
    echo $output;
  }
  
}

<b>view</b>
Code:
<center>
&lt;?php
echo $member_menu;
?&gt;  
</center>

<table border="0">
<tr>
  <td align="left">
   <b>Published by: </b> &lt;?php echo $users->username; ?&gt;
  </td>
</tr>
<tr>
  <td align="left">
  <h3>Offering</h3>
  </td>
</tr>
<tr>
  <td align="left">
   <div class='show_offer'>
   &lt;?php echo $swap->offering; ?&gt;
   </div>
  </td>
</tr>
<tr>
  <td align="left">
  </td>
</tr>
<tr>
  <td align="left">
  <h3>Seeking</h3>
  </td>
</tr>
<tr>
  <td align="left">
   <div class='show_offer'>  
   &lt;?php echo $swap->seeking; ?&gt;
   </div>
  </td>
</tr>  
</table>

<br><br>
<center><h3>Post a comment</h3></center>
<div id="main">

&lt;?php
/*
$comments = array();
$result = mysql_query("SELECT * FROM comments ORDER BY comid ASC");

while($row = mysql_fetch_assoc($result))
{
  $comments[] = new Comment($row);
}
*/
//Output the comments one by one:
foreach($comments as $c){
  echo $c->markup();
}

  
?&gt;

<div id="form_message"><h2>Message Here</h2><br></div>

<div id="addCommentContainer">
&lt;form name="addCommentForm" id="addCommentForm" method="post"&gt;
     <div>
      &lt;input type="hidden" name="swapid" value="&lt;?php echo $swapid ?&gt;"&gt;
      
         <label for="name">Name &nbsp;&nbsp;&nbsp;&nbsp;</label>
         &lt;input type="text" name="name" id="name" /&gt;&lt;br>
            
            <label for="email">Email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            &lt;input type="text" name="email" id="email" /&gt;&lt;br>
            
            <label for="body">Comment </label>
            &lt;textarea name="comment" id="comment" cols="20" rows="5"&gt;&lt;/textarea><br>
            
            &lt;input type="submit" value="Submit" name="offer_submit" id="offer_submit" /&gt;
        </div>
    &lt;/form&gt;
    <br><br>
</div>
</div>

<b>js</b>
Code:
$(document).ready(function(){
  
$("#offer_submit").click(
     function(){
         var name=$("#name").val();
         var email=$("#email").val();
      
         $.ajax({
         type: "POST",
         url: "http://barterswapping.com/ajax_post/post_action2",
         dataType: "json",
         data: "name="+name+"&email;="+email,
         cache:false,
         success:
           function(data){
             $("#form_message").html(data.message).css({'background-color' : data.bg_color}).fadeIn('slow');
           }
        
  });

     return false;
});
  

});

<b>
The problem here is when I press the submit button it reload the whole page,
which I'm expecting not to. Since this is AJAX.
And it's not displaying back the captured data.

I hope someone will help me.
</b>

Thanks in advanced.

#2
[eluser]CroNiX[/eluser]
Because you aren't preventing the form from being submitted normally in your jQuery click event. Ajax has nothing to do with the problem.

http://api.jquery.com/event.preventDefault/

#3
[eluser]solid9[/eluser]
@CroNix
I'll check that.\

thanks.

#4
[eluser]solid9[/eluser]
@CroNix

Cool it works.
The remaining problem now is not displaying the captured data back on the same page.

By the way I tested the codes below, and it worked.
http://barterswapping.com/ajax_post/

But when I applied it in my project it doesn't work.

Thanks in advanced.

#5
[eluser]CroNiX[/eluser]
What data does your ajax function receive back? Have you checked it using console or something? It's also generally better to use json_encode() rather than hand crafting the json string.

#6
[eluser]solid9[/eluser]
Here is the newly modified JS,

Code:
$(document).ready(function(){


$("#offer_submit").click(
     function(){
      event.preventDefault();

      
         var name=$("#name").val();
         var email=$("#email").val();
      
         $.ajax({
         type: "POST",
         url: "http://barterswapping.com/ajax_post/post_action2",
         dataType: "json",
         data: "name="+name+"&email;="+email,
         cache:false,
         success:
           function(data){
             $("#form_message").html(data.message).css({'background-color' : data.bg_color}).fadeIn('slow');
           }
        
  });

     return false;
});
  

});


#7
[eluser]solid9[/eluser]
My view has the form fields namely <b>name and email</b>

When the user press the submit button it should display back the user entered values (name & email) in the same page again.

This is really very basic I tested it but doesn't work under my project.
I think it's not redirecting to the right method in the class.



#8
[eluser]InsiteFX[/eluser]
I checked it and it is posting the data but it is not displaying it back o that is where your problem is!

In your php code you need to do a json_decode

#9
[eluser]solid9[/eluser]
@InsiteFX

thanks dude I'll check that.


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.