ajax or Ubmit work in a page loaded in . load()

Asked

Viewed 42 times

-1

ola pessoal tenho duas paginas mostra.php que contém alguns informações e a pagina index.php am loading the page shows.php on the index.php page with load as follows

  $(document).ready(function(){
         var linkado = "<?php echo $_GET['link'];?>"
    $("#carrinho").load('mostra.php?link='+linkado);
 });

in the page shows.php has a form with a Submit button but this button does not work, some follows the page shows:

<?php

error_reporting(0);
ini_set(“display_errors”, 0 );

    ?>

        <?php
    session_start();
    if (!isset($_SESSION['carrinho'])) {
        $_SESSION['carrinho'] = array();
    } //adiciona produto
    if (isset($_GET['acao'])) {
        //ADICIONAR CARRINHO
        if ($_GET['acao'] == 'add') {
            $id = intval($_GET['id']);
            if (!isset($_SESSION['carrinho'][$id])) {
                $_SESSION['carrinho'][$id] = 1;
            } else {
                $_SESSION['carrinho'][$id]+= 1;
            }
        } //REMOVER CARRINHO
        if ($_GET['acao'] == 'del') {
            $id = intval($_GET['id']);
            if (isset($_SESSION['carrinho'][$id])) {
                unset($_SESSION['carrinho'][$id]);
            }
        } //ALTERAR QUANTIDADE
        if ($_GET['acao'] == 'up') {
            if (is_array($_POST['prod'])) {
                foreach ($_POST['prod'] as $id => $qtd) {
                    $id = intval($id);
                    $qtd = intval($qtd);
                    if (!empty($qtd) || $qtd <> 0) {
                        $_SESSION['carrinho'][$id] = $qtd;
                    } else {
                        unset($_SESSION['carrinho'][$id]);
                    }
                }
            }
        }
    }
    $bdv = $_GET['link'];

    ?>

            <body>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="title">Edit Profile</h5>
                            </div>
                            <div class="card-body">
                                <div class="container">
                                    <table id="cart" class="table table-hover table-condensed">
                                        <thead>
                                            <tr>
                                                <th style="width:50%">Produto</th>
                                                <th style="width:10%" class="text-center">Quantidade</th>
                                                <th style="width:8%">Preço</th>
                                                <th style="width:22%" class="text-center">Subtotal</th>
                                                <th style="width:10%"> Remover</th>
                                            </tr>
                                        </thead>
<!-- ESTE FORM QUE ESTOU ME REFERINDO -->
                                        <form name="post" id="cartadd" method="post">
                                            <tbody>
                                                <?php
    if (count($_SESSION['carrinho']) == 0) {
        echo '
            <tr>
              <td colspan="5">Não há produto no carrinho</td>
            </tr>
          ';
    } else {
        include "controller/conn/conncard.php"
    ?>
                                                    <?php
        $total = 0;
        foreach ($_SESSION['carrinho'] as $id => $qtd) {
            $sql = "SELECT *  FROM cadprod WHERE id_prod= '$id'";
            $qrs = mysqli_query($conn1, $sql) or die(mysqli_error($conn1));
            $lns = mysqli_fetch_assoc($qrs);
            $nome = $lns['nome_prod'];
            $preco = number_format($lns['preco_prod'], 2, ',', '.');
            $valor = $lns['preco_prod'];
            $sub = number_format($lns['preco_prod'] * $qtd, 2, ',', '.');
            $total+= $lns['preco_prod'] * $qtd;
                            echo '<tr>
                            <td data-th="Product">
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <h4 class="nomargin">' . $nome . '</h4>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center"> <input type="text" class="form-control text-center" name="prod[' . $id . ']" value="' . $qtd . '" /></td>
                                <td data-th="Quantity">R$ ' . $preco . '</td>
                                <td data-th="Subtotal" class="text-center">R$ ' . $sub . '</td>
                                <td class="actions" data-th="">
                                    <a  href="mostra.php?link=' . $bdv . '&acao=del&id=' . $id . '" class="pegaHref btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></a>                        
                                </td>
                            </tr>';
        }

         $subtotal = number_format($total, 2, '.', ',');

    }
        ?>
                                            </tbody>

                                            <tfoot>
                                                <tr class="visible-xs">
                                                    <td class="text-center"><strong>R$ <?php echo $subtotal; ?></strong></td>
                                                </tr>
                                                <tr>
                                                    <td><a href="cardapio.php?link=<?php echo $bdv; ?>" class="btn btn-primary btn-md"><i class="fa fa-angle-left"></i> Continuar comprando</a></td>
                                                    <td colspan="2" class="hidden-xs"></td>
                                                    <td>
                                                        <button id="submitform" type="submit" name="submit" class="btn btn-primary">atualizar carriho</button>
                                                    </td>
                                                    <td class="hidden-xs text-center"><strong>R$ <?php echo $subtotal; ?></strong></td>

                                                </tr>
                                            </tfoot>
                                        </form>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </body>

            <script>
               $(".pegaHref").click(function() {

        var href = this.href;

        $("#carrinho").fadeOut(500, function() {
            $("#carrinho").load(href).fadeIn().delay(500);

        });
        return false; // Impede a mudança de página  
    });


            </script>

have tried some ways as ajax example to make it work

$('#submitform').on("click", function() {

            event.preventDefault();
            jQuery.ajax({
                type: 'POST',
                data: $("form[name='post']").serialize(),
                url: "mostra.php?link=<?php echo $_GET['link'];?>&acao=up",
                success: function(resultado) {

                    $("#carrinho").fadeOut(500, function() {
                        $("#carrinho").load("mostra.php?link=<?php echo $_GET['link'];?>").fadeIn().delay(500);
                    });
                }
            });
        });

when I open the page shows php and put the libraries there the code works normally but when I open it shows.php in . (load) of the index page it stops working, nor the Submit button with action works anyone could explain to me where I am missing?

  • Where is that part $('#submitform').on("click", function() {? You’ve tried it before $(".pegaHref").click(function() {, in the same block <script>?

  • I tried but it didn’t work

  • Not the solution to the problem, but loading the page with . load(), remove the tags <body> and </body> page loaded. What has to be returned is only the HTML of the elements without page structure tags, such as the <body>.

1 answer

1


It doesn’t work because you’re putting the tag form in the wrong place, enter closing tag </thead> and the opening tag <tbody>:

</thead>
<!-- ESTE FORM QUE ESTOU ME REFERINDO -->
<form name="post" id="cartadd" method="post">
<tbody>

You cannot put any element between the tags of a structure table. With this, the browser will close the tag form as soon as it is opened, as it shows this tool print "inspect elements":

inserir a descrição da imagem aqui

See that tag form is closed after opening, and the Submit button will have no effect as it is outside the form.

To solve this, place the entire table inside the form:

<form name="post" id="cartadd" method="post">
   <table>
    ....conteúdo da tabela
   </table>
</form>

Another thing: remove the requested page tags <body> and </body>. Although there are no problems in that (because the browser itself fixes, otherwise they would get two <body> on the page), it is not necessary to load page structure tags into AJAX (the .load() is an AJAX), only the HTML content you want to load (div, table, form, etc...).

Browser other questions tagged

You are not signed in. Login or sign up in order to post.