Onclick event with PHP, ajax and jQuery not working

Question

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;
}
?>

in ajax.php change case 'Add_Button': => 'Add Button':

Nick Maroulis
– Nick Maroulis

2015-06-22 01:10:13 +00:00
Commented Jun 22, 2015 at 1:10 — Nick Maroulis
– Nick Maroulis, Commented Jun 22, 2015 at 1:10

Darren · Accepted Answer · 2015-06-22 01:02:44Z

1

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);
});

answered Jun 22, 2015 at 1:02

Darren

13.1k4 gold badges44 silver badges81 bronze badges

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

Comments

user3444714 · Accepted Answer · 2015-06-22 01:02:50Z

0

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"

answered Jun 22, 2015 at 1:02

user3444714

6 Comments

Harry Vega Over a year ago

If a want to use this with specific div, may I can add another name and an ID to the div? for example: $.post(ajaxurl, data, function (response) { $("result").append(response); alert("action performed successfully"); }); <div class ="result"></div>

user3444714 Over a year ago

It is recommended so you have a target div instead of all divs.

Harry Vega Over a year ago

Exactly what I want however, how I can tell to my jQuery code that I want to use this for an specific div?

user3444714 Over a year ago

$("div#my_id").append(response); If you have a div with the id my_id or $("div.my_class").append(response); If you have a div with the class my_class

Harry Vega Over a year ago

it works, now im trying to look for a command that is capable to delete the button that the code create, any idea?

|

Harsha Kuchampudi · Accepted Answer · 2015-06-22 01:09:32Z

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 );
});

Collectives™ on Stack Overflow

Onclick event with PHP, ajax and jQuery not working

3 Answers 3

Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Related