How do you update a div in another div?

Question

How do you update a div in another div?

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I have this code but it does not work for me, it does not update, I want to update a div in another div but I do not know how you can help me:

<!doctype html>
<html>
    <head>
        <title>Document Title</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script>
            $('.clickable').on('click', function(){
                var data_id = $(this).data('id');
                $.ajax({
                    url: 'ajax.php',
                    type: 'POST',
                    data: {id: data_id},
                    success: function(data){
                        $('#more-info').html(data.html);
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        $('#more-info').html('');
                        alert('Error Loading');
                    }
                });
            });

            });
        </script>
    </head>
    <body>
        <div id="item-one" class="clickable" data-id="123">Click me</div>
        <div id="item-two" class="clickable" data-id="456">Click me</div>
        <div id="more-info"></div>
    </body>
</html>

code PHP:

<?php
$id = $_POST['id'];

echo $id;
?>

jquery php ajax

asked by Shareiv 25.10.2017 в 16:43

source

2 answers

1

Good afternoon,

Your code almost works perfectly:

<!doctype html>
<html>
    <head>
        <title>Document Title</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <div id="item-one" class="clickable" data-id="123">Click me</div>
        <div id="item-two" class="clickable" data-id="456">Click me</div>
        <div id="more-info"></div>
      <script>
      $(document).ready(function(){
            $('.clickable').on('click', function(){
                var data_id = $(this).data('id');
                $.ajax({
                    url: 'ajax.php',
                    type: 'POST',
                    data: {id: data_id},
                    success: function(data){
                        $('#more-info').html(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        $('#more-info').html('');
                        alert('Error Loading');
                    }
                });
            });

            });
        </script>
    </body>
</html>

I'm missing the .ready, which in itself are the closing tags "});" and what's left over if you do not use .ready

Greetings,

answered by 25.10.2017 в 17:12

Bash script in which you enter numerical value and execute with that value How can I show each client their orders from mysql?

score 3 · Accepted Answer

to see .... all you want is to update the div that has the ID "more-info" ?? I think I understood your question well. Here modify your code:

<!doctype html>

....

</head>
<body>
    <div id="item-one" class="clickable" data-id="123">Click me</div>
    <div id="item-two" class="clickable" data-id="456">Click me</div>
    <div id="more-info"></div>
</body>

 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
        $('.clickable').on('click', function(){
            var data_id = $(this).data('id');
            $.ajax({
                url: 'ajax.php',
                type: 'POST',
                data: {id: data_id},
                success: function(data){
                    $("#more-info").html(data);//$('#more-info').html(data.html);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    $('#more-info').html('');
                    alert('Error Loading');
                }
            });
        });


    </script>

1) you try to update your div in this way:

$('#more-info').html(data.html);

I do not know if that's a way of doing it, but the way I do it is this:

$("#more-info").html(data)

with that line, it is enough for your div to be updated according to the result that your php called "ajax.php" generates.