Updating table with database query on jQuery AJAX form submit

Question

Here is what I have...

function checkDB(code, userid)
    {
      $("#notice_div").html('Loading..'); 
      $.ajax({
      type: "POST",
      url: "<?php bloginfo('template_url'); ?>/profile/check_code.php",
      data: { code: code, userid: userid},
      //data: 'code='+code+'&userid='+userid,
      datatype: "html",
      success: function(result){

           if(result == 0)
            {
                $('#success').html( code + ' has been redeemed!');
                // alert('success');//testing purposes
            }
            else if(result == 2)
            {
                $('#err').html(  code + ' already exists and has already been redeemed....');
                //alert('fail');//testing purposes
            }else if(result == 1){
                $('#err').html(  code + ' redeem code doesnt exist');      
            }
            $("#notice_div").html(''); 
            //$('#originalquery').hide();
            //$('#mainquery').fadeIn('slow');
            //$("#originalquery").replaceWith($('#mainquery', $(html)));

            //alert(result);        
          }
      })

    }

This is on the same page as this:

   <?php

$sql="SELECT * FROM wp_scloyalty WHERE userid = '$user_id'";
$result=mysql_query($sql);
?> 
<table id="poo" style="margin:10px 0px 0px 0px;" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td><strong>Product</strong></td>
    <td><strong>Code</strong></td>
    <td><strong>Value</strong></td>
</tr>
<?php while($rows=mysql_fetch_array($result)){ ?>  
<tr>
    <td><? echo $rows['product']; ?></td>
    <td><? echo $rows['code']; ?></td>
    <td><? echo $rows['value']; ?></td>
</tr>  
<? } ?>
</table>


            <form method="post" class="sc_ajaxxx" id="sc_add_voucherx" name="sc_ajax" action="" onsubmit="checkDB(document.sc_ajax.sc_voucher_code.value, <?php echo $user_id; ?>); return false;">

            <button id="submit-code" type="submit" >Submit</button>

        </form>

This is the HTML...

When the ajax request is submitted, I want the table to automatically show the newly added information. I know why its not working but not sure how to get it to refresh. I assume refreshing the div isnt really possible as I would like it to be.. Im thinking about making a new query and bringing it in on success function?

Thanks :)

EDIT

The table query:

 <?php

$sql="SELECT * FROM wp_scloyalty WHERE userid = '$user_id'";
$result=mysql_query($sql);
?> 
<table id="poo" style="margin:10px 0px 0px 0px;" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td><strong>Product</strong></td>
    <td><strong>Code</strong></td>
    <td><strong>Value</strong></td>
</tr>
<?php while($rows=mysql_fetch_array($result)){ ?>  
<tr>
    <td><? echo $rows['product']; ?></td>
    <td><? echo $rows['code']; ?></td>
    <td><? echo $rows['value']; ?></td>
</tr>  
<? } ?>
<div id="newCode"></div>
</table>

What does your html div look like? What happens now on successful submission? I assume you verified that your code is getting called? Javascript should be able to update the div without refreshing the page. — Alan Moore
– Alan Moore, Commented Feb 17, 2012 at 16:57
Ive added the HTML form you submit. On submission there are just two divs which give a message depending on what result comes bk fromt the page. The div I want updating automatically isnt really involved with the ajac at all... its just a query on the same page.. — JamesG
– JamesG, Commented Feb 17, 2012 at 17:05

SachinGutte · Accepted Answer · 2012-02-17 17:03:05Z

1

so basically you want to pull the record from database based on $user_id and the resulting generated table needs to be shown on requesting page with ajax? Right?

show the newly added information

where's it being added anyway?

edited Feb 17, 2012 at 17:03

answered Feb 17, 2012 at 16:55

SachinGutte

7,0655 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

JamesG Over a year ago

yep thats right. It all works so far, I just have to refresh the page manually to view the newly added values

SachinGutte Over a year ago

and where is new record being added? so in that case, you have to echo the table being generated on php page back to calling page as response. Do your if else condition checking, if it's not between 0 to 2 ( that means you've generated table successfully on php page ), operate on DOM with jQuery and append or inserAfter certain block.

JamesG Over a year ago

The new record is going straight to the database... not really being shown anywhere as I was hoping it would just show with the original query on the client-side page. I think I understand what youre saying... basuically in the server side page (where the current record is being updated) I am echoing a new table row, and bringing that back in the result to the client side page, then just adding that to the end of the displaying table using jquery? Is this what you mean?

SachinGutte Over a year ago

Yes ! But the code you've posted here doesn't add any record.

JamesG Over a year ago

Si Ive added the table in the post. Ive basically told the success function to add the result as html at the end and add it to the div id newCode. I think this is what you mean yeah? If so then ill just fiddle with it a little... im sure i can get it working from that :)

|

Collectives™ on Stack Overflow

Updating table with database query on jQuery AJAX form submit

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related