CODEWITHSUNDEEP
javascriptphpjqueryajax
Harry Vega
Harry Vega

Reputation: 31

Onclick event with PHP, ajax and jQuery not working

I want to use an onclick event with PHP in order to accomplish the following. I would like to use ajax to avoid the page being refreshed. I want to create buttons on event click.

I don't know how to join the div buttons with the ajax result.

Here is my PHP file: Button.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dymanic Buttons</title>
        <script type= "text/javascript" src ="jquery-2.1.4.min.js"></script>    
        <script type= "text/javascript" src ="test.js"></script>
    </head>
    <body>
        <div>
            <input type="submit" class="button" name="Add_Button" value="Add Button"</>
            <input type="submit" class="button" name="Modify_Button" value="Modify    Button"</>
            <input type="submit" class="button" name="Delete_Button" value="Delete    Button"</>
        </div>

test.js contains this:

$(document).ready(function () {
    $('.button').click(function () {
        var clickBtnValue = $(this).val();

        var ajaxurl = 'ajax.php',
            data = {
                'action': clickBtnValue
            };
        $.post(ajaxurl, data, function (response) {

            alert("action performed successfully");

        });
    });

});

And the other php that is ajax.php

<?php 

if (isset($_POST['action'])){
  switch($_POST['action']){
      case 'Add_Button':
  Add_Button();
  break;
  }

}
function Add_Button(){
    echo '<input type="submit" class="button" name="Test_Button" value ="Test Button"</>';
    exit;
}
?>

Upvotes: 0

Views: 879

Answers (3)

Harsha Kuchampudi
Harsha Kuchampudi

Reputation: 153

You probably want to make sure that each component of your code is working first. The problem may be in your AJAX call, it should be similar to the following:

/** AJAX Call Start **/
    // AJAX call to dict.php
    $.ajax({

        /** Call parameters **/
        url: "ajax.php", // URL for processing
        type: "POST", // POST method
        data: {'action': clickBtnValue}, // Data payload

        // Upon retrieving data successfully...
        success: function(data) {}
});

Also, make sure you are using the correct routing to your PHP file and that your PHP file is returning a valid response.

EDIT: As per the jQuery Docs, I am fairly certain that the problem is within your AJAX call, specifically your $.post() setup. Please refer here for the proper setup is you want to keep your AJAX call structured as is instead of the way I suggested.

As per the jQuery Docs:

$.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

Upvotes: 0

user3444714
user3444714

Reputation:

You can add the result of request to your div with this:

$.post(ajaxurl, data, function (response) {

   $("div").append(response);
   alert("action performed successfully");

});

Note the value of your button is "Add Button", not "Add_Button"

Upvotes: 0

Darren
Darren

Reputation: 13128

You're calling the <input>'s value, instead of it's name which you set it as.

Change your clickBtnValue to this:

var clickBtnValue = $(this).attr('name');

Since it has Add_Button/Modify_Button/etc.

To append the new button to your div, start by giving it an id, so that we can continue to call it:

<div id="my-buttons">

Now in your ajax request, simply jQuery.append() the html to the div:

$.post(ajaxurl, data, function (response) {
    $('div#my-buttons').append(response);
});

Upvotes: 1

Related Questions