Jquery ajax implementation issue

Question

I'm working on the index.php. In the index page, my php code is generating Columns and Row(Table) in html. I am new to Jquery.

PHP generated table example

ID | Username | Status | Action 
1     Demo        No      Install button
2     Smith       No      Install button
3     Edward      No      Install button
4     Admin       No      Install button

In the Action column , I've added Install button. So , my plan is to call update.php using Jquery AJAX POST when Install button is clicked.

Update Page Having POST variable :

1) id 
2) action 
3) flag

Now, what I've done so far.

Following code is generated by my PHP code (RAW code, for understanding)

<input type='hidden' name='id' id='1' value='1'>
<a href class='blue' href='' id='1'>Install</a>
<input type='hidden' name='id' id='2' value='2'>
<a href class='blue' href='' id='2'>Install</a>
<input type='hidden' name='id' id='3' value='3'>
<a href class='blue' href='' id='3'>Install</a>
<input type='hidden' name='id' id='4' value='4'>
<a href class='blue' href='' id='4'>Install</a>

Issue is how I can generate Jquery AJAX POST url, which will send data like

update.php?id=1&action=install&flag=1

Please suggest me.

do you know about new HTML5 data-* attributes? If not - try them, it's awesome. You don't need inputs at all for task like this — Michael Livach
– Michael Livach, Commented Mar 20, 2014 at 12:21

웃웃웃웃웃 · Accepted Answer · 2014-03-20 13:19:38Z

2

Say this is your button

<input type="button" id="my_button" value="1">

$(document).ready(function () {
        $("#my_button").on('click',function () {//Your install button click
            var btInd = $(this).attr('value');
            $.ajax({
                type: "POST",
                url: "update.php",
                data: {"id":btInd,"action":"install","flag":1}, //You need to make changes if your values will change since i have hard coded the values                      
                success: function(response) {
                  alert('Success');
                }
        }); 
});

Catch the request in update.php and do the rest.

edited Mar 20, 2014 at 13:19

answered Mar 20, 2014 at 12:16

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

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

2 Comments

SSK Over a year ago

i am generating many ID(Rows / Multiple) on the single page and on the page there will be many Install buttons. How i can deal with this issue.

웃웃웃웃웃 Over a year ago

Also get the id of the button clicked and pass that value in the ajax @user2345691

Sridhar R · Accepted Answer · 2014-03-20 12:25:50Z

2

Try like this

Script

$(document).ready(function () {
        $("button").click(function () {   // install button
            var id = $(this).attr("id");
           var action = "install";
            var flag = "1";      
            $.ajax({
                type: "POST",
                url: "update.php",
                data: {"id":id,"action":action,"flag":flag},                       
                success: function(response) {
                // do something
                }
        }); 
    });
});

Sample PHP

<?php
    include('config.php');

    if($_POST["action"]=="install"))
    {
        $id = $_POST['id']; //Here posted id
        $flag = $_POST['flag'];


    }
?>

edited Mar 20, 2014 at 12:25

answered Mar 20, 2014 at 12:18

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

4 Comments

SSK Over a year ago

i am generating many ID(Rows / Multiple) on the single page and on the page there will be many Install buttons. How i can deal with this issue.

Sridhar R Over a year ago

@user2345691 yes,each install buttons have unique id,when click happens $(this).attr("id") in inside function will return corresponding button id so its not a problem to handle.

SSK Over a year ago

I've tried, can you please give me example for install button which having unique ID.

SSK Over a year ago

What is button and I'm using a href , what will be the name there ? $("button").click(function () { // install button

i'm PosSible · Accepted Answer · 2014-03-20 12:17:37Z

1

try this,

$.ajax({
    type: 'POST',
    url: 'update.php',
    data: {
        id:1,
        action:xx,
        flag:ff
    },
    success: function(response){
        console.log(response);
    }
});

for more information see this link

answered Mar 20, 2014 at 12:17

i'm PosSible

1,3932 gold badges11 silver badges30 bronze badges

Comments

웃웃웃웃웃 · Accepted Answer · 2014-03-20 13:37:59Z

1

    $.post( "update.php", { id: "John", action: "delete",flag :"abc" })
   .done(function( data ) {
   alert( "Data Loaded: " + data );
   });

edited Mar 20, 2014 at 13:37

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

answered Mar 20, 2014 at 12:18

ankit singh

3671 gold badge3 silver badges13 bronze badges

Comments

Anant Dabhi · Accepted Answer · 2014-03-20 12:17:52Z

0

you can use jquery GET method to post data using get ..

  $.get("update.php?id=1&action=install&flag=1",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });

or you can send data by

  $.get("update.php",{id=1,action=install,flag=1},function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });

answered Mar 20, 2014 at 12:17

Anant Dabhi

11.2k3 gold badges33 silver badges51 bronze badges

Comments

Joakim M · Accepted Answer · 2014-03-20 12:18:04Z

0

$("#buttonID").live('click',function(){
   $.ajax({
            url: "../update.php",
            type: 'POST',
            data: { id: myId, action: myAction ,flag: myflag},
            dataType: 'xml',
            success: function (data) {

                alert("Great success");
            }
        });
});

answered Mar 20, 2014 at 12:18

Joakim M

1,8032 gold badges15 silver badges29 bronze badges

Collectives™ on Stack Overflow

Jquery ajax implementation issue

6 Answers 6

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related