0

I've a problem:

I make ajax query to the database and display information about a specific ID and displays it in HTML-formatted message return.

Here's the HTML code:

<!-- WINE -->
<div id="slides">
    <div id="information_slide" class="slide">
        <!-- container as a result of JS -->
    </div>
</div>
<!-- WINE -->

<!-- LOADING -->
<div id="loading_slide" class="slide" style="display: none;">
    Loading information about the wine ...<br/><br/><img src="images/ajax-loader.gif" />
</div>
<!-- LOADING -->

<!-- AJAX CALL BUTTON -->
<?php
    echo '<div id="'.$id['id'].'" class="menuItem">Show wine when ID = '.$id['id'].'</div>';
?>
<!-- AJAX CALL BUTTON -->

Here's the JS code:

[JavaScript]

$('.menuItem').on('click', function() {

    // ID Wine
    var id = $(this).attr('id');

    $.ajax({
        url: 'function.php',
        beforeSend: function () {
            $('#slides #information_slide').fadeOut(200, function() {
                $('#slides #loading_slide').fadeIn(200);
            });
        },
        data: {
            funkcja: 'show_wine',
            id: id
            },
        type: 'post',
        success: function(result) {
            setTimeout(function() {
                $('#slides #loading_slide').fadeOut(200, function() {
                    $('#slides #information_slide').html(result).fadeIn(400);
                });
            }, 500);
        }
    });
    // alert(id);
});

[/JavaScript]

Here's the PHP code:

[php]

<?php

    if(isset($_POST['funkcja']) && !empty($_POST['funkcja'])) {
        switch($_POST['funkcja']) {
            case 'show_wine':
                show_wine($_POST['id']);
            break;
        }
    }

    // Callback wine function
    function show_wine($id) {

        $qwerty = "SELECT * FROM `wina` WHERE id='".$id."' LIMIT 1";
        $sql = mysql_query($qwerty);

        while($id = mysql_fetch_assoc($sql)) {
            echo '
                <div id="'.$id['id'].'" class="element">
                    <form method="post" action="" class="jcart">
                        <fieldset>
                            <input type="hidden" name="jcartToken" value="'.$_SESSION['jcartToken'].'" />
                            <input type="hidden" name="my-item-id" value="'.$id['id'].'" />
                            <input type="hidden" name="my-item-name" value="'.stripslashes($id['nazwa']).'" />
                            <input type="hidden" name="my-item-price" value="'.stripslashes($cena_przecinek).'" />
                            <input type="hidden" name="my-item-url" value="" />
                            <input type="hidden" name="my-item-qty" value="1" size="3" class="item-sztuk" />

                            <input type="submit" name="my-add-button" value="to cart" class="item-button" />

                        </fieldset>
                    </form>

                    <!-- ... remaining HTML code... -->

                </div>
            ';
        }

    }
?>

[/php]

I have a result as previously described. The script shows me the information (records) a specific ID from the database - this part of the script is OK.

The problem I have at the moment when the PHP callback function (which is called Ajax) hosts a form uses also Ajax functions. This part of HTML code in response from PHP function...

<form method="post" action="" class="jcart">
    <fieldset>
        <input type="hidden" name="jcartToken" value="'.$_SESSION['jcartToken'].'" />
        <input type="hidden" name="my-item-id" value="'.$id['id'].'" />
        <input type="hidden" name="my-item-name" value="'.stripslashes($id['nazwa']).'" />
        <input type="hidden" name="my-item-price" value="'.stripslashes($cena_przecinek).'" />
        <input type="hidden" name="my-item-url" value="" />
        <input type="hidden" name="my-item-qty" value="1" size="3" class="item-sztuk" />

        <input type="submit" name="my-add-button" value="to cart" class="item-button" />

    </fieldset>
</form>

... is form of my jCart script. Button (name=my-add-button) not work.

JS script is loaded from the very beginning on page:

[html]

<head>
    <script type="text/javascript" language="javascript" src="files/jcart.js"></script>
</head>

[/html]

When i call a ajax function, load a result (html code) to the container and button with should add item to cart, page is reloading and item only is added to cart. I've tried to add return false; in a PHP script, but if there happens to be absolutely nothing.

Here is the JS code file jcart -> www.starwines.com.pl/jcart/js/jcart.js

AND here is DEMO PAGE -> www.starwines.com.pl/test.php

Please try the following: *1)* add an item by clicking the "Dodaj do koszyka" (yellow button) 2) select a different wine from the carousel, and then click "Dodaj do koszyka"

How to solve this problem?

Regards !

PS. Sorry for English language, I'm weak :)

4

1 回答 1

0

更改您的点击事件绑定代码

$('.jcart').submit(function(e) {
    add($(this));
    e.preventDefault();
});

至

$(document).on('submit', '.jcart', function(e) {
    add($(this));
    e.preventDefault();
});

会做的工作。

jQuery 上

于 2013-09-22T01:14:40.403 回答