CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user3488008
user3488008

Reputation: 55

Replace the div content with ajax

I am trying to replace the div content dynamically ajax call.Following is the code which i tried.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<a  class="reply_doc" data-doc_value="1">111</a><br>
<a href="#" class="reply_doc" data-doc_value="2">222</a><br>
<a href="#" class="reply_doc" data-doc_value="3">333</a><br>
<script type="text/javascript">
$(document).ready(function(){
  $(".reply_doc").click(function () {
    var a = $("a.reply_doc").attr("data-doc_value"); //<-- Add this
    if (a != "") {
    $.ajax({
        type: "POST",
        url: "sortingajax.php",
        data: "doc_reply=" + a,
        success: function (b) {
            alert(a+' ok. '+b)
            $('#ResponseDiv').html(b);
            console.log(b);
        }
    });
  }
 });
});
</script>
<div id='ResponseDiv'>
        This is a div to hold the response.
</div>
</body>
</html>

sortingajax.php

<?php
include('connection.php');
$countsql='SELECT * FROM XML WHERE';
$countsql1=mysql_query($countsql);
$numrows = mysql_num_rows($countsql1);  
$countArray2=array();

while($row = mysql_fetch_array($countsql1)) {
    // Append to the array
    $countArray2[] = $row;
    //echo $row['PID']."<BR />";
}

?>
<?php
foreach($countArray2 as $array)
{
?>
        <div class="search">

        I am in US.
        </div>
        <?php

 $i++; } ?>

In the first page.when i click on a link and there it will call sortingajax.php with ajax call.After that it should replace ResponseDiv content with sortingajax.php content.

Please tell me where i am doing wrong as i m not that aware of ajax calls...

Upvotes: 0

Views: 218

Answers (3)

Hardik Vyas
Hardik Vyas

Reputation: 500

    follow this Simple Example Of add or remove element using ajax/jQuery

-Example:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>     
<div id="files">
             <div>
                <input type="text" name="description[]" class="form-control" placeholder="File Description"/> <br/>
                    <input type="file" name="files[]" /> 
                </div>
            </div>
     </div>
    <div style="margin: 5px; cursor: pointer;" class="text-center">
             <a id="addFile"><strong>+ Add Another File</strong></a>
    </div> 

    <script>
     $(document).ready(function() {
             $("#addFile").click(function() {
                 $("#files").append("<div>Your Contain</div>");
            });
        });
    </script>

if you want to remove element.. then use this simple code $("#Id Of Element").remove()

Upvotes: 0

Mitul Shah
Mitul Shah

Reputation: 1566

You have leave query partial. please fill condition after WHERE otherwise remove WHERE from query in sortingajax.php

  1. You are sending data in var doc_reply but you are not used this variable in sortingajax.php file.

  2. Why are you used two different loops ?

  3. Mysql is deprecated. Use Mysqli instead of it.

Upvotes: 0

Jite
Jite

Reputation: 5847

Your ajax code looks correct, the php code on the other hand looks a bit wrong. First off, stop using the deprecated mysql_* api and switch to either PDO or mysqli.
The mysql_* api is deprecated and will be removed from php soon. 

SELECT * FROM XML WHERE

^ This is not a correct mysql query, you need to add something to check for after the WHERE keyword, or just skip it if you want to select all the rows from the XML table.
Due to this query failing, you will not have any data to print, and your ResponseDiv should be empty after the call has been done.

Upvotes: 2

Related Questions