SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    .live method kills ajax

    Here is my issue. I have a php file... I click on the link, ajax generates a lightbox, I close the lightbox, then I click the link again and I am redirected to a new php file rather than loading the ajax.

    Here is my lightbox JS. Should this cause a conflict?

    Code JavaScript:
    $(function() {
          $('div#lightBoxCloseButton').live('click', function() {
            $('div.lightBoxCon').hide();
            $('div.lightBoxCover').hide();
          });
    });

  2. #2
    SitePoint Addict svcghost's Avatar
    Join Date
    Oct 2010
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something is wrong with your close function. We have to see the close function code in order to diagnose what the problem is. Hehe.

    P.S. Does the open lightbox link disappear once the lightbox is open? If it doesn't then try clicking the lightbox button once the lightbox is already open, and see if it redirects you. If it does redirect you, then we know there is a problem with the open function.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by svcghost View Post
    Something is wrong with your close function. We have to see the close function code in order to diagnose what the problem is. Hehe.

    P.S. Does the open lightbox link disappear once the lightbox is open? If it doesn't then try clicking the lightbox button once the lightbox is already open, and see if it redirects you. If it does redirect you, then we know there is a problem with the open function.
    I can't click outside of the lightbox when it is open...

    Here is the ajax. I'm assuming you are referring to the close function of the ajax code.

    <script type="text/javascript">
    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.onload = function (){
    document.getElementById('personalPartners').onclick = function(){
    loadXMLDoc("partners.php?u=<?php echo $username ; ?>&ajax=true",function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.body.innerHTML = document.body.innerHTML + xmlhttp.responseText ;
    }
    })
    return false}
    }
    </script>

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    This isn't tested, but perhaps using JQuery native methods for the onload callback and ajax will solve the issue.

    Code JAVASCRIPT:
    $(document).ready(function() {
     
    	$('#personalPartners').click(function() {
     
    		$.ajax({
    			url: 'partners.php?u=<?php echo $username ; ?>&ajax=true'
     
    			,dataType:'html'
     
    			,success:function(data,status,xhr) {
    				$('body').html(data);
    			}
     
    			,error:function(xhr,status,error) {
    				alert('An error has occurred with the request.');
    			}
    		});
     
    	});
     
    });

    If your using JQuery you might as well take full advantage of what it has to offer.

    Edit:

    Is JavaScript included in the AJAX response? If so than you need to manually eval() the contents of every script tag. innerHTML does not execute JavaScript. However, JQuery html() does.
    The only code I hate more than my own is everyone else's.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    This isn't tested, but perhaps using JQuery native methods for the onload callback and ajax will solve the issue.

    Code JAVASCRIPT:
    $(document).ready(function() {
     
    	$('#personalPartners').click(function() {
     
    		$.ajax({
    			url: 'partners.php?u=<?php echo $username ; ?>&ajax=true'
     
    			,dataType:'html'
     
    			,success:function(data,status,xhr) {
    				$('body').html(data);
    			}
     
    			,error:function(xhr,status,error) {
    				alert('An error has occurred with the request.');
    			}
    		});
     
    	});
     
    });

    If your using JQuery you might as well take full advantage of what it has to offer.

    Edit:

    Is JavaScript included in the AJAX response? If so than you need to manually eval() the contents of every script tag. innerHTML does not execute JavaScript. However, JQuery html() does.
    No javascript is included in the AJAX response. You Jquery code didn't seem to work for me. I was getting the error message / alert.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •