submit post data with ajax is only called once

Question

I have problem with this code:

function sendData(nr) {
    var data = $("#myform"+ nr).serialize();

    // debug regeltje
    console.log(data);

    jQuery.ajax({
        url: "inc/update.php",
        data: data,
        type: "POST",
        cache: false,
        success:function(data)
        {
            if(data=='success') {
                $("#container").load(window.location + " #container");
            //  alert(data);
            } else {
                $("#container").load(window.location + " #container");
            }
        }
    });
}

the first time I call this function it is working fine. But the second time it isn't. Debug Console gives no result.

This is my update.php file

<?php
session_start();
include("config.php");
include("function.php");
include("class.User.php");
$Func = new Func($db);
if(isset($_SESSION['userData'])) {
    $User = new GUser($db,$Func, $_SESSION['userData']['oauth_uid']);
}

//echo var_dump($_POST);
if(isset($_POST['color'])) {
    $query = $db->query('UPDATE user_fleet SET train_row_color = "'.$db->real_escape_string($_POST['color']).'" WHERE id = "'.$db->real_escape_string($_POST['id']).'"');
}

After I refresh the whole page then it's working fine for only one time again.

Why is this happening?

I call the sendData from fleet.php

<tr style="background-color: #'.$res['train_row_color'].';">
            <form method="post" action="" id="myform'.++$i.'">
            <td>
                <select class="test" name="color" onchange="sendData('.$i.');">
                    <option value="0"></option>
                    <option value="ff0000" style="background-color: #ff0000"></option>
                    <option value="3000ff" style="background-color: #3000ff"></option>
                    <option value="36ff00" style="background-color: #36ff00"></option>
                    <option value="e400ff" style="background-color: #e400ff"></option>
                    <option value="fff000" style="background-color: #fff000"></option>
                </select>
            </td>

This is inside a while loop.

True Google Inspect and Network i see this

As you can see the second screen is not showing the form.

From where you are calling `sendData()`. Try using `$('body').on('click', '.buttonClass' function() { /*You ajax here*/ });` — Sinto, Aug 01 '17 at 07:31
Try `$('body').on('change', '.test' function() { /*You ajax here*/ });` An example: https://stackoverflow.com/q/4247264/4229270 — Sinto, Aug 01 '17 at 07:38
Gives an error. Uncaught SyntaxError: missing ) after argument list. — Thomas de Vries, Aug 01 '17 at 07:44
I missed a comma separation: `$('body').on('change', '.test', function() { /*You ajax here*/ });` — Sinto, Aug 01 '17 at 07:47
That still didnt solved the problem. Its like the form is submitted. After the success the div is reloaded. But the form is not beeing sended again. — Thomas de Vries, Aug 01 '17 at 07:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150698/discussion-between-sinto-and-thomas-de-vries). — Sinto, Aug 01 '17 at 08:07

score 0 · Answer 1 · answered Aug 01 '17 at 07:45

0

Remove call function from HTML tag

            <select id="yourID" class="test" name="color">

Do function call with javascript

$("#yourID").on('change',function(){
sendData($(this).val();
});

answered Aug 01 '17 at 07:45

Osama

2,912
1
12
15

If i use this. The form is not beeing send at all. – Thomas de Vries Aug 01 '17 at 08:06
Console.log data inthe sendData function to check if it is called? If yes so change then remove cashe false line from ajax method – Osama Aug 01 '17 at 08:12

submit post data with ajax is only called once

1 Answers1