CODEWITHSUNDEEP
javascriptphpjqueryajax
shanto
shanto

Reputation: 125

How to load content using Ajax

I want to load my database content using ajax and jquery. I already write a javascript and it works correctly but I can't write correctly for ajax jquery. Anyone please give me some example?

my javascript code:

<script language="javascript">
    function getfilter(str){

    document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";

    if (str==""){
        document.getElementById("result").innerHTML="";
        return;
    }
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("result").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","Views/pfolioresult.php?q="+str,true);
    xmlhttp.send();
}
</script> 

<div class="sprocket-mosaic-header">
    <div class="sprocket-mosaic-filter">
        <ul>
            <li class="all active" data-mosaic-filterby="all" onclick="getfilter(this.id)" id="all" >All</li>
            <li class="android" data-mosaic-filterby="android" onclick="getfilter(this.id)" id="android" >Android</li>
            <li class="iOS" data-mosaic-filterby="iOS" onclick="getfilter(this.id)" id="ios" >IOS</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>


<div id="result">
    ok
</div>

Upvotes: 0

Views: 6023

Answers (5)

zzlalani
zzlalani

Reputation: 24364

Do this

function getfilter(str){

    document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";

    if (str==""){
        document.getElementById("result").innerHTML="";
        return;
    }

    $.ajax({
        url: "Views/pfolioresult.php",
        type: "GET",
        data: { q : str },
        success: function ( responseText ) {
            $("#result").html( responseText );
        }
    });
}

Learn it from here: https://api.jquery.com/jQuery.ajax/

Upvotes: 1

shanto
shanto

Reputation: 125

<script>
function getfilter(str){



    if (str==""){
        document.getElementById("result").innerHTML="";
        return;
    }

    $.ajax({
        url: "Views/pfolioresult.php?q="+str,
        type: "GET",
    //  data: serializedData,
        success: function ( responseText ) {
$("#result").html(responseText); 
        }
    });
}
</script>

This code works correctly but suppose i have 10,000 data in database .This code show all data at once after load but how it possible that data show one by one depent on load time that means when one item load then it show and other continuously show

Upvotes: 0

Anil Sharma
Anil Sharma

Reputation: 2962

You can simply use Ajax and Jquery for data load. You can use 

function getfilter(str){
  $.ajax({
     type: "POST",
        //path to  php page to get  data
    url:"pathto/getdata.php",
    data: "id="+str,
    success:function(result){

      //here is your success action
      //get data on div  
        $("#result").html(result);
    });
 }

We can do this by calling a function onclick as illustrated above or you can use JQuery's onclick event.

Now Get Id in you getdata.php page using $_POST['id'] and return your database data to ajax success and do whatever you want to do.

Upvotes: 2

AaBa
AaBa

Reputation: 471

Try this

<script language="javascript">
        function getfilter(str){

            document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";

            if (str == ""){
              $( "#result" ).html( "" )
              return;
              } 

            var request = $.ajax({
               type: "POST",
               url: "Views/pfolioresult.php",
               data: { id: str }
            });

            request.done(function( msg ) {
               $( "#result" ).html( msg );
            });

           request.fail(function( jqXHR, textStatus ) {
               alert( "Request failed: " + textStatus );
           });
  }

Upvotes: 0

Fizk
Fizk

Reputation: 1114

Since you're using jQuery, the easiest would be to use .load()

http://api.jquery.com/load/

Upvotes: 0

Related Questions