seo Question posted in
Some basic information to get you started with this can be found here.

Cant click on button with is loaded with ajax – SEO

I am loading a content into a #result div. In that content, there is a button.
After the contrnt was loaded with ajax, i cant click on that button, i dont get the alert. (the page doesnt see it? :))

<script type="text/javascript">
$(document).ready(function(e) 
{

    $('#printButton').hide();

    $('#submitButton').click(function(e)
    {
        var kat = $('#kategoria').val();
        $.ajax({
            type: 'POST',
            url: 'files/get_arlista_kategoria.php',
            data: { kat: kat },
            dataType: "html",
            cache: false,
            beforeSend: function(){
                $('#preloaderImage2').show();
            },
            success: function(data)
            {
                var result = $.trim(data);
                $('#result').html(result);
                $('#printButton').show();
            },
            complete: function(){
                $('#preloaderImage2').hide();
            }
        });
    });

    // This click doesnt work
    $('#savePrices').click(function(e)
    {
        alert("Its oké");
    });

});

</script>

How can i work with this button and the input after the ajax loaded it? I want to update the product prices.

And here is the php file, this generates the html content:

<?php
include_once("../../files/connect.php");
include_once("../../files/functions.php");
if(!empty($_POST))
{
    $kategoria = mysqli_real_escape_string($kapcs, $_POST['kat']);

    $sql = "SELECT termek_id, termek_nev, termek_akcio, termek_normal_ar, termek_akcios_ar, mertekegyseg_nev FROM termek
             LEFT JOIN webshop_mertekegyseg ON webshop_mertekegyseg.mertekegyseg_id = termek.termek_egyseg

            WHERE

            termek_id IN (SELECT kat_kapcs_termek_id FROM `termek_katgoria_kapcsolo` WHERE kat_kapcs_kategoria_id IN ($kategoria) ) ORDER BY termek_nev ASC";



    $get = mysqli_query($kapcs, $sql) or die(mysqli_error($kapcs));
    $num = mysqli_num_rows($get);
    if($num > 0 )
    {
        echo '<form method="post">';
        echo '<table class="form manufacturer-seo-form table table-hover">';
        echo '<thead style="font-weight:bold;">
                  <tr>
                    <td style="text-align: left;">ID</td>
                    <td class="left">Megnevezés</td>
                    <td style="text-align: left;">Egység</td>
                    <td>Bruttó ár</td>
                    <td>Akciós ár</td>
                    <td style="text-align: center;">Akciós</td>

                  </tr>
                </thead>';
        echo '<tbody>';
        while($i = mysqli_fetch_assoc($get))
        {
            ?>
                <tr id="sor<?php echo html($i['termek_id']); ?>">
                    <td style="text-align: left;"><?php echo html($i['termek_id']); ?></td>
                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="termek-szerkesztes.php?id=<?php echo html($i['termek_id']); ?>"><?php echo html($i['termek_nev']); ?></a></td>
                    <td style="text-align: left;"><?php echo $i["mertekegyseg_nev"] ?></td>
                    <td><input type="text" name="normal_ar" value="<?php echo html($i['termek_normal_ar']); ?>" /></td>
                    <td><input type="text" name="akcios_ar" value="<?php echo html($i['termek_akcios_ar']); ?>" /></td>
                    <td style="text-align: center;">
                        <select name="termek_akcio" class="input input-select" style="padding:5px 10px">
                            <?php
                            $ertek = intval($i['termek_akcio']);
                            $values = array("1" => "Igen", "0" => "Nem");
                            foreach($values AS $k => $v)
                            {
                                $selected = $ertek == $k ? ' selected="selected"':'';
                                echo '<option ' . $selected . ' value="' . $k . '">' . $v . '</option>';
                            }
                            ?>
                        </select>
                    </td>
                  </tr>
            <?php
        }
        echo '</tbody>';
        echo '</table>';
        echo '<div class="text-center"><button class="btn saveButton" type="button" id="savePrices">Módosítások mentése</button></div>';
        echo '</form>';
    }
    else
    {
        echo '<span style="display:block;margin:20px 0 20px 5px;"><b>A kiválasztott kategóriában nincsenek termékek.</b></span>';
    }
}
?>
Tags:

2

Answers


  1. 0

    You assign the click event function before the element (button) actually exists. Therefore there is no element to bind the click event to. You can bind the click event to the document instead:

    $(document).on('click', '#savePrices', function(e) {
    alert(...);
});

    Completely untested though …

    Login or Signup to reply.
  2. 0

    The onclick assignment ($('#savePrices').click(...)) is run once when the web page has loaded. But your pricing buttons are not there yet.

    Run it again when the AJAX .success is executed:

    <script type="text/javascript">
$(document).ready(function(e) 
{

    $('#printButton').hide();

    $('#submitButton').click(function(e)
    {
        var kat = $('#kategoria').val();
        $.ajax({
            type: 'POST',
            url: 'files/get_arlista_kategoria.php',
            data: { kat: kat },
            dataType: "html",
            cache: false,
            beforeSend: function(){
                $('#preloaderImage2').show();
            },
            success: function(data)
            {
                var result = $.trim(data);
                $('#result').html(result);

                // assign onclick
                $('#savePrices').click(function(e)
                {
                    alert("Its oké");
                });

                $('#printButton').show();
            },
            complete: function(){
                $('#preloaderImage2').hide();
            }
        });
    });

});

</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search