Hello and welcome to our community! Is this your first visit?
Register
Results 1 to 10 of 10

Thread: Ajax Help

  1. #1
    Pen
    Pen is offline
    Enthusiast

    Join Date
    Mar 2009
    Posts
    1,282

    Ajax Help

    Ok, so I'm trying to use Ajax to load a php file into a certain div, how might I do that?
    Here's the coding:

    index.php
    Code:
    <!DOCTYPE HTML>
    <head>
    <link href="stylesheets/index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    function loadlogin()
    {
    	if (window.XMLHttpRequest)
    	{//coding for IE 7+, Opera, Safari, Chrome, Firefox
    	xmlhttp = XMLHttpRequest();
    	}
    	else 
    	{//IE 6 or 5
    	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    xmlhttp.onreadystatechange=function();
    	{
    	if (xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
    		document.getElementbyId("login").innerHTML=xmlhttp.responseText;
    	}
    	}
    xmlhttp.open("GET","login.php",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <div id="global">
    <div id="header">
    	
    	<div id="logo" align="center">
        	
        	<div class="logo_head">
            	<div class="head">
                	<div class="header_logo">[img]images/Header_logo.png[/img]</div>
                </div>
            </div>
            
            <div id="logo_subhead">
            	<div class="subheader">
                	<div class="subhead_textarea">
                    	""
                    </div>
                </div>
            </div>
        </div>
    
    <div id="space"></div>
    <div class="tabs">
    	<div class="tabs_position">
        	<table class="tabbed">
            	<tbody>
            		<tr>
            			<td class="first_element"><button type="button" onclick="loadlogin()">Login</button> </td>
                        <td class="elements"></td>
                         <td class="elements"></td>
                          <td class="elements"></td>
                           <td class="elements"></td>
            		</tr>
                </tbody>
            </table>
        </div>
    </div>
    </div>
    
    
    
    <div id="content">
    
    </div>
    </div>
    </body>
    </html>
    I'm trying to load the php file into the id "content".
    I'm not sure how to do that? Any help?

  2. #2
    Obsessed Veteran Adam's Avatar



    Join Date
    Nov 2004
    Location
    UK / England
    Posts
    17,271

    Re: Ajax Help

    Firstly use jQuery for your ajax requests. It makes more sense in the long run than using the plain JS method.

    http://jquery.com


    If your just loading a div you can use .load()

    http://api.jquery.com/load/

    (Note that when using .load() the document your loading in must not have any body / head tags, just the html. Additionally it's important to understand that .load() will not automatically serialized parameters passed to it, so ensure any get vars in the string contain no special characters like spaces.)


    Other types of requests;

    http://api.jquery.com/jQuery.get/
    http://api.jquery.com/jQuery.post/

  3. #3
    Pen
    Pen is offline
    Enthusiast

    Join Date
    Mar 2009
    Posts
    1,282

    Re: Ajax Help

    Thanks Adam. I tried what you said. I'm using the .load method. I'm still not getting anything to load. in the content area from the login.php.

    Code:
    <!DOCTYPE HTML>
    <head>
    <link href="stylesheets/index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery.js"></script>
    
    </head>
    <body>
    <div id="global">
    <div id="header">
    	
    	<div id="logo" align="center">
        	
        	<div class="logo_head">
            	<div class="head">
                	<div class="header_logo">[img]images/Header_logo.png[/img]</div>
                </div>
            </div>
            
            <div id="logo_subhead">
            	<div class="subheader">
                	<div class="subhead_textarea">
                    	Hook up with old friends, play games, listen to music, or just have fun!
                    </div>
                </div>
            </div>
        </div>
    
    <div id="space"></div>
    <div class="tabs">
    	<div class="tabs_position">
        	<table class="tabbed">
            	<tbody>
            		<tr>
            			<td class="first_element"><button type="button" onClick="loadlogin()">Login</button> </td>
                        <td class="elements"><button type="button" onClick="loadlogin()">Signup</button></td>
                         <td class="elements"><button type="button" onClick="loadlogin()">Privacy</button></td>
                          <td class="elements"><button type="button" onClick="loadlogin()">Developers</button></td>
                           <td class="elements"><button type="button" onClick="loadlogin()">More Info!</button></td>
            		</tr>
                </tbody>
            </table>
        </div>
    </div>
    </div>
    
    
    
    <div id="content">
    
    </div>
    </div>
    <script type="text/javascript">
    function loadlogin()
    {
    	$(#content).get('login.php');
    }
    </script>
    </body>
    </html>
    in the login.php file, I just have a simple code:
    Code:
    <html><h1>Hello</h1></html>

  4. #4
    Obsessed Veteran Adam's Avatar



    Join Date
    Nov 2004
    Location
    UK / England
    Posts
    17,271

    Re: Ajax Help

    You need to define the function in the head tags else you'll get function undefined errors. As you would be calling load login function well before it's defined.

    Ensure you put quotes around the selector.

    Code:
    <script type="text/javascript">
    function loadlogin()
    {
       $("#content").get('login.php');
    }
    </script>

    To clarify you can't have this;

    Code:
    <html><h1>Hello</h1></html>
    It must be;

    Code:
    <h1>Hello</h1>

  5. #5
    Pen
    Pen is offline
    Enthusiast

    Join Date
    Mar 2009
    Posts
    1,282

    Re: Ajax Help

    Thanks alot Adam! It worked.

  6. #6
    Pen
    Pen is offline
    Enthusiast

    Join Date
    Mar 2009
    Posts
    1,282

    Re: Ajax Help

    Ok, so this isn't a ajax problem, but I thought it'd be better just to edit this thread.
    Anyways, going along the same site. when the jquery & ajax load the login.php file, everything loads fine.

    But now I'm testing the php coding (particularly, testing the errors that a user can encounter when the fail to do something.) So, on submitting, their should be a line that reads an error, but nothing happens. Coding:
    Code:
    <?php $ip = $_SERVER['REMOTE_ADDR']; ?>
    <?php 
    		$email = $_POST['email'];
    		$password = $_POST['password'];
    		$submit = $_POST['submit'];
    		
    		if ($submit) 
    		{
    			if ($email)
    			{
    				if ($password)
    				{
    					echo "Success";
    				}
    				else 
    				{
    					echo "You need to supply a password";
    				}
    			}
    			else 
    			{
    				echo "You need to fill the Email Field";
    			}
    		}
    		else 
    		{
    		//Do Nothing
    		}
    ?>
    <div id="login">
    	<div id="c1b7b">
    	
    	
    
    	<form method="post" action="login.php">
    		<table>
    		<thead class="c1b7b_header">
    			""
    		</thead>
    			<tbody>
    				<tr>
    				<td><h2>Email:</h2></td>
    				<td><input type="text" name="email" placeholder="email" class="c1b7b_text_box"/></td>
    				</tr>
    				<tr>
    				<td><h2>Password:</h2></td>
    				<td><input type="password" name="password" placeholder="password" class="c1b7b_text_box" /></td>
    				</tr>
    			</body>
    		</table>
    		<input type="button" name="submit" value="Login" />
    		</form>
    	</div>
    	
    </div>

  7. #7
    Obsessed Veteran Adam's Avatar



    Join Date
    Nov 2004
    Location
    UK / England
    Posts
    17,271

    Re: Ajax Help

    You need to do some basic refactoring.


    Code:
    You need to refactor your code.
    
    
    <?php
    
        if(!empty($_POST))
        {
    	  $email = trim($_POST['email']);
          $password =  trim($_POST['password']);
      
          if($email =="")
    	  {
    		  echo "Please enter an email";
    	  }
    	  
    	  if($password == "")
    	  {
    		echo "Please enter your password";  
    	  }
        }
    ?>
    Additionally if your using ajax to load in a php page you won't be able to post to the php file. Move php components where they'll be accessible.

  8. #8
    Pen
    Pen is offline
    Enthusiast

    Join Date
    Mar 2009
    Posts
    1,282

    Re: Ajax Help

    well thanks Adam. I guess I should just read up on this, b/c I'm not really sure with javascript yet. I'm fine with html, css, and php. But javascript is odd to me. Any online books or tutorials you recommend? Not the w3schools.com tutorials, those never seem to work out in the end for me, there just a good reference.

  9. #9
    Obsessed Veteran Adam's Avatar



    Join Date
    Nov 2004
    Location
    UK / England
    Posts
    17,271

    Re: Ajax Help

    Just practice and play around is the best way to learn. Most people I've seen who have taken education in web development have been taught odd / outdated methods which are not practical in every day use.

    In order to help you a little further let me try and explain in a little more depth.

    Firstly, you have login.php, which contains your html form, and php code to process the form submission.

    You then have your main page which loads in your login page. Great! your form loads in, however when you try and click login the page refreshes and it goes back to the way it was.

    Reason

    Because your main page isn't catching or doing any of the processing of the php page, login.php is. Login.php is merly included in the document but isn't "fully part of the page".

    Resolution

    Move the php code that peforms your login processing into your main page (the one that loads in the login form) That way when you click submit the main page can catch the errors / can do any processing.

  10. #10
    Pen
    Pen is offline
    Enthusiast

    Join Date
    Mar 2009
    Posts
    1,282

    Re: Ajax Help

    Ah, thank you. So all the php coding should just go into the main page. Thanks.


 

Posting Permissions

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