-1

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

Improve this question
1
  • 1
    Break up the problem into small discrete steps. Define what this jQuery code is doing and you can research how to do those same things without jQuery. For example, this code is: 1) Assigning a function to a change event on an element; 2) Setting the innerHtml of an element; 3) Making an AJAX request to fetch data from the server; 4) Setting the response of that AJAX request to the innerHtml of another element. Commented Oct 14, 2013 at 13:12

1 Answer 1

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That would be toughest to do. You can either use an iFrame and set the source to be your url, or make and XMLHttpRequest, parse the html and add it to div. You can look at the code that jquery uses

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.