Converting .load (jquery) to pure javascript [clos

Here is my code with jquery :

<tr>
  <td>
    <form name="group" id="form1" method="post">
      <select name="group" id="group">
        <option value="" disabled selected>Choose your group..</option>
        <?php foreach ($userGroups['data'] as $groups) {
           echo "<option value=\"".$groups['id']."\">".$groups['name']."</option>";
        }?>
      </select>

    </form>
  </td>
</tr>
<tr>
  <td id="fetchmember"> 
    <script type="text/javascript">
      $('#group').on('change',function(){
        var id_group = this.value;
        $('#fetchmember').html('<center><img src="ajax-loader.gif"></center>');
        $('#fetchmember').load('fetchmember.php?group='+id_group);
        });
    </script>
  </td>
</tr>

fetchmember.php :

<?php
include 'facebookauth.php';
    $groupId = $_GET['group'];
    $groupmember = $facebook->api('/'.$groupId.'/members');
    $membergroup = $groupmember['data'];

    foreach ($membergroup as $membergroups) {
        echo "<li>".$membergroups['name']."</li>";      
    }

?>

How to create .load in pure javascript? I have to convert all of my jquery code to pure javascript code, but I have no idea to load fetchmember.php?group='+id_group with pure javascript. Anyone could give me advice?

Thank you so much

Not extact transalation but little help to get you going

 //selector , use document.getElementById    
    $('#group') => document.getElementById('group');

//to set the html
    $('#fetchmember').html => document.getElementById("fetchmember").innerHTML="'<center><img src="ajax-loader.gif"></center>'";


//to bind the click
    document.getElementById('group').addEventListener('click', function() {
      console.log('bind click');
    });

For jquery load(), I think you can use an iframe and set it's source(the easy way, if fetchmember.php returns HTML).

Or you can look at the load() method in JQuery and try converting it in to pure js. Here you will use pure XMLHttpRequest instead of Jquery.Ajax()

jQuery.fn.load = function( url, params, callback ) {
    if ( typeof url !== "string" && _load ) {
        return _load.apply( this, arguments );
    }

    var selector, response, type,
        self = this,
        off = url.indexOf(" ");

    if ( off >= 0 ) {
        selector = url.slice( off, url.length );
        url = url.slice( 0, off );
    }

    // If it's a function
    if ( jQuery.isFunction( params ) ) {

        // We assume that it's the callback
        callback = params;
        params = undefined;

    // Otherwise, build a param string
    } else if ( params && typeof params === "object" ) {
        type = "POST";
    }

    // If we have elements to modify, make the request
    if ( self.length > 0 ) {
        jQuery.ajax({
            url: url,

            // if "type" variable is undefined, then "GET" method will be used
            type: type,
            dataType: "html",
            data: params
        }).done(function( responseText ) {

            // Save response for use in complete callback
            response = arguments;

            self.html( selector ?

                // If a selector was specified, locate the right elements in a dummy div
                // Exclude scripts to avoid IE 'Permission Denied' errors
                jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) :

                // Otherwise use the full result
                responseText );

        }).complete( callback && function( jqXHR, status ) {
            self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] );
        });
    }

    return this;
};

For $(document).ready(), write a self executing function at the end of your body. Something like this

<body>
 Custom HTML HERE

<script>
// self executing function 
(function() {
   // write all your js here

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

Converting .load (jquery) to pure javascript [clos

问题:

回答1:

收藏的人(0)

Converting .load (jquery) to pure javascript [clos

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮