Вот мой код с 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>"; } ?>
Как создать .load в чистом javascript? Мне нужно преобразовать весь мой код jquery в чистый код javascript, но я не имею понятия загружать fetchmember.php?group='+id_group с чистым javascript. Кто-нибудь может дать мне совет?
огромное спасибо
Не выдающаяся трансаляция, но мало помогает вам
//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'); });
Для jquery load() , я думаю, вы можете использовать iframe и установить его источник (простой способ, если fetchmember.php возвращает HTML).
Или вы можете посмотреть на метод load () в JQuery и попробовать преобразовать его в чистые js. Здесь вы будете использовать чистый XMLHttpRequest вместо 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; };
Для $(document).ready() напишите функцию самоиспускания в конце вашего тела. Что-то вроде этого
<body> Custom HTML HERE <script> // self executing function (function() { // write all your js here })(); </script> </body>