JavaScript - Chaining Function Calls Jquery Style
Hi, I've been playing around trying to recreate the way in which jQuery chains it's functions for it's "select" then "do" behaviour.
Note: I don't want to chain functions with jQuery, I want to chain them like jQuery. So based on the jQuery code what I have so far is (doesn't work in IE): Code: var x = function(string) { return new x.fn.init(string); }; x.fn = x.prototype = { message: '', init: function(string) { x.fn.message = string; }, log: function() { console.log(x.fn.message); } }; x.fn.init.prototype = x.fn; var start = function() { x('hello world').log(); }; document.addEventListener('DOMContentLoaded', start, false); The code works but when I watch '$' in jQuery "fn" & "prototype" show up as being "jQuery()" but in my code when I watch "x": "fn" and "prototype" are both shown as objects containing "message", "init" and "log" and in both cases "init" contains "prototype" which contains my three functions again and the nesting continues seemingly infinitely... I'm clearly missing something here. What are they doing in differently in jQuery to prevent this endless nesting loop? Similar TutorialsI am trying to display some images in, say, 500ms intervals, but I want to loop through images, so I use a for loop and setTimeouts and function calls... Code: for (i=0;i<=5;i++) { setTimeout(DisplayTheImage, 500); } (a var that increments the image like image[x] is somewhere else) but I think all I accomplish is that while the above code calls the function 5 times alright, all five function calls occur simultaneously. Right? Eh, I want the function to be called 5 times, but at five different times, namely in 500ms intervals. I thought the function would wait to finish (500 ms) then another call and so on. How can I do that? Is it possible to capture function calls? for example: alert('hello world'); is there a way to capture this function call. Why do i want to do this: 1. i need a way to test if a function exist before it is called, so i dont get undefined errors etc. 2. try/catch only works on sections of code, i need a global solutions.(can i capture functions calls on remotely loaded scripts, like google analytics etc ) Hi, I have a search function which works when I only want to have only one search per page, but as it involves a string call I'm not sure how to modify it to multiple search requests on a page. The below works fine for one call: Code: <script type="text/javascript"> function showHint(str){ if (str.length==0){ document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getName.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <label>Search by name: </label> <input type="text" id="txt1" class="input" onkeyup="showHint(this.value)" /> <br /> <p>Suggestions: <span id="txtHint"></span></p> <br /> But if I want to do mulitple I have tried changing it to: Code: <script type="text/javascript"> function showHint(File,ID){ if (str.length==0){ document.getElementById(ID).innerHTML=""; return; } if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET",File,true); xmlhttp.send(); } </script> </head> <body> <label>Search by firstname: </label> <input type="text" id="txt1" class="input" onkeyup="showHint('GetFirstName.php?q='+str,'txtHint')" /> <br /> <p>Suggestions: <span id="txtHint"></span></p> <br /> <label>Search by surname: </label> <input type="text" id="txt1" class="input" onkeyup="showHint('getLastName.php?q='+str,'txtHintSn')" /> <br /> <p>Suggestions: <span id="txtHintSn"></span></p> <br /> The above doesn't work and I am not sure what do about the showHint(str) as clearly I am not representing it properly in my attempt to modify the script. I want to have a button in a form that only calls a Javascript function, but not refresh the page, how do I do this?
I have the following javascript function: [ function addNewWindowEvent(evType, fn) { if (window.addEventListener) { this.addEventListener("load", fn, false); return true; } else if (window.attachEvent) { var onload = "onload" this.attachEvent(onload, fn); return true; } else { return false; } } ] which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no] and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks. henryv Hi all, On this page http://piximory.com/templates/locus/dark/bg2.html if you click the portfolio link in main nav you are presented with the various thumbnail images for the projects, if you select a category the thumbnails organise themselves using jquery, does anyone know what type of jquery style this is? Thanks in advance! Kyle Code: <html> <body> var j=0; var temp,temp2,temp3; <script> function scor(j) { switch(j) { case 1: alert("Απαντήσατε σωστά μόνο σε μία ερώτηση.Προσπαθήστε πάλι"); break; case 2: alert("Απαντήσατε σωστά στις δύο από τις τρείς ερωτήσεις"); break; default: alert ("Συγχαρητήρια απαντήσατε σωστά και στις τρεις ερωτήσεις"); } } </script> <meta http-equiv="content-type" content="text/hmtl; charset=iso-8859-7"> <p align="center"><font size="5">Σε μία σελίδα html πόσα είναι τα μέγιστα frames που μπορούμε να τοποθετήσουμε; </p></font> <form name="for1"> <input type="radio" name="fr1"value="1" > 5 <br> <input type="radio" name="fr1"value="2" > Όσα τα pixels<br> <input type="radio" name="fr1"value="3" > Δεν υπάρχει όριο<br> <input type="button" value="Εκχώρηση Απάντησης" onClick="getVal1()"> </form> <script type = "text/javascript"> function getVal1() { for(var i=0; i<document.for1.fr1.length; i++) { if (document.for1.fr1[i].checked) { if (document.for1.fr1[i].value==2) { j++; } } } } function getVal2() { for (var i=0;i<document.for2.fr2.length;i++) { if (document.for2.fr2[i].checked) { if (document.for2.fr2[i].value==2) { j++; } } } } function getVal3() { for (var i=0;i<document.for3.fr3.length;i++) { if (document.for3.fr3[i].checked) { if (document.for3.fr3[i].value==3) { j++; } } } } </script> <p align="center"><font size="5"> Είναι απαραίτητο σε κάθε σελίδα html να υπάρχουν τα tags head και title;</p></font> <form name="for2"> <input type="radio" name="fr2" value="1"> Ναι <br> <input type="radio" name="fr2" value="2"> Όχι <br> <input type="button" value="Εκχώρηση Απάντησης" onClick="getVal2()"> </form> <p align="center"><font size="5"> Τι κάνει το εξής tag: meta http-equiv="content-type" content="text/hmtl; charset=iso-8859-7" </p></font> <form name="for3"> <input type ="radio" name="fr3" value="1"> Δημιουργεί τις προυποθέσεις για την απόκτηση τιμών <br> <input type ="radio" name="fr3" value="2"> Ισσοροπεί τις παραγράφους σε στήλες <br> <input type ="radio" name="fr3" value="3"> Επιτρέπει την κωδικοποίηση ελληνικών χαρακτήρων στην ιστοσελίδα <br> <input type="button" value="Εκχώρηση Απάντησης" onClick="getVal3()" </form> <input type ="button" value="Υπολογισμός" onClick="scor(j)"> Apart from any logical mistakes this thing i have created might have , my question is this.Why upon pressing the last button and calling the "scor(j)" function , no alerts pop up?Thanks in advance. I'm completely stumbled by this as i have no clue as what might be wrong.But then again , my experience is extremely limited on my website: http://www.mypubspace.com/default.php I am using the buttons from JQuery UI, as you can see on the example: http://jqueryui.com/themeroller/ there is a rollover effect on the button but not on my website?! i achieved to make a chain: Code: function getId(id) { id_elem = document.getElementById(id); return { color:function(e){ id_elem.style.color = e; } }; } so this can be getId("test").color("red"); but what happens if i want to do that? Code: function getId(id) { id_elem = document.getElementById(id); return id_elem; return { ????...... how can i chain if i use return in the first place? I am using the technique below (found on codingforumns.com to chain two select boxes. How would I go about adding a THIRD set of selects to the Array? Essentially, I wish to use this functionality for a Year, Make, and Model lookup I am writing. The current version uses AJAX and makes a round-trip to the server for each stage. I want to adapt it to pull all of the data for each product into a javascript array and then parse that array in the onchange events (essentially what this script does, but I need to add it out to an additional 1 to 2 levels (I will have a total of four levels for some products - year, make, model, and submodel). How can I modify the javascript arrays (and the code that parses them) to achieve this? Code: <html> <head> <title>Populate Drop Down List</title> <script type="text/javascript"> // For: http://www.codingforums.com/showthread.php?t=152899 var SelectInformation = [ ['Main 1','Sub 1-1','Sub 1-2','Sub 1-3'], ['Main 2','Sub 2-1','Sub 2-2'], ['Main 3','Sub 3-1','Sub 3-2','Sub 3-3','Sub 3-4'] // Note: no comma on last entry ]; // Above is sample format for information from a database. function MainList(selObj) { var selElem = document.getElementById(selObj); var tmp = ''; selElem.options.length = 0; // selElem.options[selElem.options.length] = new Option(tmp,tmp); // for blank display selElem.options[selElem.options.length] = new Option('Select',tmp); for (var i=0; i<SelectInformation.length; i++) { tmp = SelectInformation[i][0] selElem.options[selElem.options.length] = new Option(tmp,SelectInformation[i].join(',')); } } function SubList(newObj,info){ var newElem = document.getElementById(newObj); var Arr = info.split(','); newElem.options.length = 0; for (var i=0; i<Arr.length; i++){ tmp = Arr[i]; //window.alert(tmp); if (i != 0) { newElem.options[newElem.options.length] = new Option(tmp,tmp); } } } function SubList2(newObj, info) { var newElem = document.getElementById(newObj); var Arr = info.split(','); newElem.options.length = 0; newElem.options.length = 0; for (var i=0; i<Arr.length; i++){ tmp = Arr[i]; if (i !=0) { newElem.options[newElem.options.length] = new Options(tmp,tmp); } } window.alert(newObj + " " + info); } </script> </head> <body onload="MainList('SBox0')"> <table> <tr> <td> <select id="SBox0" onchange="SubList('SBox1',this.value)"> <option value=""></option> </select> </td> <td> <select id="SBox1" onchange="SubList2('SBox2',this.value)"> <option value=""></option> </select> </td> <td> <select id="SBox2"> <option value=""></option> </select> </td> </tr> </table> </body> </html> I am attempting the use EasySlider to create a portfolio. Which you can view here. The EasySlider is embedded within an accordion, under the Portfolio tab. I have the first slider functioning properly, which you see by clicking on the Burts Bees tab. However, when you on to the MillionTrees and other tabs the EasySlider does not work. I know that the other tabs are being affected by the function because when you move the images under Burts Bees to a new image and switch back to Million Trees the beginning image changes. I have a feeling I am somehow using the buttons wrong, but I am not sure because I am very new to using JavaScript and jQuery. Any help would be greatly appreciated, thanks. Hi i have a code like this in my web site to slide a panel from left to right: <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> ---CSS--- #panel { width: 864px; height: 369px; position: absolute; top: 195px; left: -856px;/*-856*/ z-index: 200; background:url('../images/bg_panel.png') no-repeat; padding:20px 0 0 18px; text-align:left; } #panel-tab { width: 21px; height: 371px; position: absolute; top: 9px; left: 856px; background:url(../images/panel-arrw-show.png) no-repeat; text-decoration: none; color: #FFFFFF; text-indent:-999999px; } What i want to do is use the animate function in jquery...like this $("#panel").animate({ left: 0 }) but not sure how to use that and on page load make the panel opens and stays open.. Any help Sam not sure if I"m doing this correctly so seeing who can see or tell me if I'm doing this wrong. Say you chose an option from select box it would go into the events table and see that there's not been another event with that id so it'll return 1 and put it inside the text field called Label and when the user fills out the rest of the form it'll put 1 for the label field in the database table when the form is submitted then say the next week rolls around and the user clicks on that same option again and it goes to the events table and sees that there's an occurance of that show via the matching eventids and grabs all the labels with that matching eventid which at this point is only 1 so it would add 1 to that number and return 2 to the Label form text field. form page Code: $('#eventid').change(function() { var eventid = $("select#eventid").val(); var dataString = 'eventid='+ eventid; $.ajax({ type: "POST", url: "processes/booking.php", data: eventid, success: function(data) { $('#label').append(data); } }); }); <div class="field required"> <label for="eventid">Select Event</label> <select class="dropdown" name="eventid" id="eventid" title="Select Event"> <option value="0">- Select -</option> <option value="0">** Recurring Events **</option> <?php $query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Recurring"'; $result = mysqli_query ( $dbc, $query ); // Run The Query while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r"; } ?> <option value="0">** Singular Events **</option> <?php $query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Singular"'; $result = mysqli_query ( $dbc, $query ); // Run The Query while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r"; } ?> <option value="0">** Pay Per View Events **</option> <?php $query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Pay Per View"'; $result = mysqli_query ( $dbc, $query ); // Run The Query while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r"; } ?> </select> <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span> </div> <div class="field required"> <label for="label">Event Label</label> <input type="text" class="text" name="label" id="label" title="Label" readonly="readonly" /> <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span> </div> processes/booking.php PHP Code: $eventid = (int)$_GET['eventid']; $result = mysqli_query("SELECT * FROM `events` WHERE `event_id` = '$eventid'"); $list = mysqli_num_rows($result); $label = $list + 1; Hey All - I asked this a few days ago.. what I came up with works just fine, but I feel it doesn't take advantage of "classes". If you think I could make this better by turning it into a class or using some other notation, that would be great. Keep in mind, ALL this does is rewrite a pagination.... for a search return in a lightbox. I have this function called in the return function... Code: var srcpagParams = $H(); function buildPagi(param, currdsplyNum){ var temDsply = new Template('<strong>[#{total_display}<span id="count">#{prevImg} #{links} #{nextImg}</span>'), crnt_link = srcpagParams.set('crnt_link', param), // the page we want to see dsplyNum = srcpagParams.get('paginateNum'), // what is the number of returns per page ttl_lnks = Math.ceil( srcpagParams.get('numFound') / srcpagParams.get('paginateNum')), // total pages data_template = new Hash(); data_template.set('total_display',srcpagParams.get('numFound')); bldImg = function() { var prvB = '<a href="#content" id="pagiPrev" onclick="firesrc(this)">Prev<img src="blank.gif" /></a>'; var nxtB = '<a href="#content" id="pagiNext" onclick="firesrc(this)">Next<img src="blank.gif" /></a>'; data_template.set('prvImg',(crnt_link > 1) ? prvB : ""); data_template.set('nxtImg',(crnt_link < ttl_lnks) ? nxtB : ""); } bldLk = function(){ var holder = ""; if(ttl_lnks > 1){ var linkStr = new Template(' <a href="#content" onclick="firesrc(#{pos});"> Go to page #{pos}</a> '); $R(1,ttl_lnks).each(function(n) { var posit = {pos : n} holder += (crnt_link == n) ? " " + n + " " : linkStr.evaluate(posit); }); data_template.set('links',linkholder); } } bldRng = function(){ var currPaneRg = (dsplyNum * crnt_link) - (dsplyNum - currdsplyNum); data_template.set('range',((crnt_link - 1) * (dsplyNum) + 1 ) + " - " + currPaneRg); $('pages').update(temDsply.evaluate(data_template)).show(); } firesrc = function(cl){ var pagiPane = (typeof cl === "number") ? cl : (cl.id == "pagiNext") ? crnt_link + 1 : crnt_link - 1; var start = crnt_link * srcpagParams.get('paginateNum'); Alertsrc( $F('query') ,(pagiPane)) // pass the query to the json to return the current search request } bldImg(); buildLnk(); bldRng(); }; Since some of the data declared at the top changes depending on the return, I didn't know if I could "initialize" it in a class. But could I turn this into a class and if so - what I just use: var buildPagi = create.Class({ initialize: object.extend({ }) }) Call the function when we are passed some data: Code: buildPagi(somevalue, somevalue2) ** NOTE: I use the libraries prototype and jquery.. so use Create.Class and new Template are within the libraries... etc.. so, is there a more eloquent, or robust way to write what I did above? So, basically what i'm doing here is hovering over the h2 heading and toggling the paragraph text. What i'm having a problem doing is changing the h3 headings so that they toggle the same way...is there a way to do this within this function without ids/classes? Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hdg').hover(function() { $('div[title=latin]').toggle(); $('div[title=english]').toggle(); $('#').html('<h3>English</h3>'); }); }); </script> Hi everyone I need some help creating a function which does the same thing for the chosen elements. I have #design1 #design1servicetext and #design1servicebutton. Code: //Service hover// $('#design1').mouseenter(function (){ $('#design1servicetext').css('background-position', '0 -91px') $('#design1servicebutton').css('background-position', '0 -33px') }) .mouseleave(function (){ $('#design1servicetext').css('background-position', '0 0px') $('#design1servicebutton').css('background-position', '0 0px')}); //Service hover end// How can I create a function, in which I have to choose 3 divs to do the animation? A function like Code: animatebg('#design1','#design1servicetext','#design1servicebutton'); Can someone please help me? I've tried so many function tutorials but none of them worked for what I wanted to do. Thank you a lot in advance! I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next. The source was used from Edit fiddle - JSFiddle the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC. I am open to any suggestions. Code: <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script> <style type='text/css'> .cycle-slide { width: 100%; text-align: center; } img { max-width: 300px; } #next { float: right; } #prev { float: left; } .center { text-align: center; } </style> <script type="text/javascript">//<![CDATA[ $(window).load(function(){ var slideshow = $('.cycle-slideshow'); maxSlides = slideshow.data('cycle.opts').slideCount; slideshow.on({ 'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { UpdateTitles(); } }); function UpdateTitles(){ var currentSlide = slideshow.data('cycle.opts').currSlide; activeSlide = $(".cycle-slide-active"); activeTitle = activeSlide.data('title'); if(currentSlide == 0){ nextTitle = activeSlide.next().data('title'); prevTitle = $(".cycle-slide").eq(maxSlides).data('title'); } else if(currentSlide == maxSlides-1){ prevTitle = activeSlide.prev().data('title'); nextTitle = $(".cycle-slide").eq(0).data('title'); } else { nextTitle = activeSlide.next().data('title'); prevTitle = activeSlide.prev().data('title'); } $('h1').html(activeTitle); $('#prev').html("Previous: "+prevTitle); $('#next').html("Next: "+nextTitle); } UpdateTitles(); });//]]> </script> here is my issue... i have an object and i need to call two functions. i need the onclick="something" to call a server side function and then i need another onclick="something" to call a javascript funtion... the problem is you can only have one "onclick" (similar to having one "class")... how can I set up an onclick that will call both my serverside function and my javascript function... I realize this is not specifically serverside section of forum, so pretend I am asking how to call two separate javascript functions with different names the item in question is here Code: <asp:Button ID="btn_gen1" runat="server" Text="InterventionCentral" class="show" onclick="btn_gen1_Click" onclick="autohide" onmouseover="details_visible(1)" onmouseout="details_hidden(1)" /> just showing this to clarify that javascript does work with the asp and my mouse functions are working fine... my asp onclick works as well.. i can remove the asp and leave the js and it will work, but then all the stuff i do server side for the onclick goes away is this able to be done? this is for dev testing and i will eventually run into the same problem of needing to call two separate javascipt functions via onmouseover and also onmouseout This is the first function. Code: <html> <head> </head> <body> <script language="javascript" type="text/javascript"> function getthat****(){ num_a=Number(document.addition.entry_1.value); num_b=Number(document.addition.entry_2.value); num_c=Number(document.addition.entry_3.value); num_d=Number(document.addition.entry_4.value); num_e=Number(document.addition.entry_5.value); valNum1=num_a*num_c valNum2=num_a*num_d valNum3=num_b*num_c valNum4=num_b*num_d valNum5=valNum1-valNum4 valNum6=valNum2+valNum3 valNum7=num_e/Math.sqrt(3) valNum8=valNum7+valNum1-valNum4 document.addition.endVal1.value=valNum8; document.addition.endVal2.value=valNum6; } </script> <form name="addition"> <br> impedance (rectangular) <input type="text" name="entry_1"> + j <input type="text" name="entry_2"> ohms <br> <br> line current (rectangular) <input type="text" name="entry_3"> + j <input type="text" name="entry_4"> amperes<br><br> <br> <br> line value of receiving voltage <input type="text" name="entry_5"> volts (angle is zero degrees) (reference) <br> <br> (<input type="text" name="endVal1"> + j <input type="text" name="endVal2">) Volts <br> <input type="button" value="Product" onclick="getthat****()"> <input type="reset" value="Clear"> </form> </body> </html> And this is the second one. Code: <html> <head> </head> <body> <script language="javascript" type="text/javascript"> function PolarConvert(){ num_1=Number(document.addition.entry_1.value); num_2=Number(document.addition.entry_2.value); valNum1=Math.pow(num_1,2); valNum2=Math.pow(num_2,2); valNum3=Math.sqrt(valNum1 + valNum2); valNum4=Math.atan(num_2/num_1); valNum5=(valNum4*180)/Math.PI; document.addition.endVal.value=valNum3; document.addition.endVal2.value=valNum5; } </script> <form name="addition"> <input type="text" name="entry_1">+ j <input type="text" name="entry_2"> = <input type="text" name="endVal"> angle <input type="text" name="endVal2"><br> <input type="button" value="Convert to polar" onclick="PolarConvert()"> <input type="reset" value="Clear"> </form> </body> </html> The question is how do I combine these given that the value that would be computed in function 2 is already computed in function 1 ? Thanks a lot !!! Below I have a facebook login/logout script for my website. The login works fine. The AJAX requests the php file, waits for the "Success" response, and then reloads the page. The logout doesn't. Instead the browser goes to the PHP file with just the word "Success" printed on it. I've separated the xml request as a separate function but that doesn't appear to solve it either. Code: <script type="text/javascript"> //Ajax XML Loaders var xmlhttp; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } window.fbAsyncInit = function() { FB.init({appId: '215993265079207', status: true, cookie: true, xfbml: true}); /* All the events registered */ FB.Event.subscribe('auth.login', function(response) { // do something with response login(); }); FB.Event.subscribe('auth.logout', function(response) { // do something with response logout(); }); FB.getLoginStatus(function(response) { if (response.session) { // logged in and connected user, someone you know } }); }; (function() { var e = document.createElement('script'); e.type = 'text/javascript'; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); function fbloginClick(){ FB.login(function(response) { if (response.session) { if (response.perms) { // user is logged in and granted some permissions. // perms is a comma separated list of granted permissions } else { // user is logged in, but did not grant any permissions } } else { // user is not logged in } }, {perms:'email,user_birthday'} ); } function login(){ //Fire the PHP Facebook Auth Script loadXMLDoc('facebook_auth.php',function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { if (xmlhttp.responseText == "Success"){ window.location = "template.php"; }else{ window.location = "login_failed.php"; } } }); } function fblogoutClick(){ FB.logout(function(response) { }); } function logout(){ //Fire the PHP Logout Script loadXMLDoc('logout.php',function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { if (xmlhttp.responseText == "Success"){ window.location = "template.php"; }else{ window.location = "login_failed.php"; } } }); } </script> |