Forums

ShiDomY

Hello. I am new here, and I am sorry if this discussion has already been posted and if I posted it in the wrong category :(.
I will get to the point and my problem which doesn't let me sleep at night xD.

First I will explain what I want to do. I want to load a php file a div located in the current structure of the website. You might say that this is no problem, but things get a bit complicated. To get a perfect understanding the layout of my website is as current :

My navigation is at the top of the page. Below the navigation I have 2 containers ( divs ). One includes a menu, which is located on the left side, and on the right side I have the content in which should the php file load when a link from the left menu is clicked. I have tried with AJAX, jQuery and couldn't get it to work. I might have done something wrong, but I don't know where. So basically I want to load a php file into the right container after clicking a link from the left container without leaving the current page.

Hope you can help me out a bit, or point me in the right direction. Thank you for your time, and again I am sorry if I posted it in the wrong category.

Have a good day,
ShiDomY

mmoustafa

Attach CDN hosted jQuery, put this in < head >.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>

Add this at end of < body > tag.
Make document load on click, placeholders below are self explanatory.

 <script type=text/javascript"> 
 $("#buttonToClickID").click(function(){
 	 $("#containerDivID").html('img/loadingImage.gif').load('ajax/pageToLoad.php');
 });
 </script>

ShiDomY

Thank you for your fast response.
I have inserted the script at the end of the body tag, and added the CDN jQuery in the head tag. Changed the placeholders matching my div id's, but it will not load the requested page. Probably I am doing something wrong?

kgscott284

Are you doing it on a live server? It is a server side request so you need to be on a live server in order for it to work...

ShiDomY

Yes I am doing it on a live server.

Edit: Still cannot get it to work, and don't know where I am doing wrong. When clicking the link from the div nothing happens.

mmoustafa

Here is an example http://jsfiddle.net/L9ghH/22/ .
Instead of using a .php file, I loaded one of jsfiddle's local CSS stylesheets (Don't tell them :D). Because .load() only works for files on the same server that are accessed locally, In other words without " http:// ".

ShiDomY

That will come in handy :). Thank you mmoustafa. I think I know where the problem is. The thing is that I am trying to load with a defined admin folder. For example : HTTP_SERVER_ADMIN. And I was trying to load with the first js you posted like this :


<script type=text/javascript"> 
 $("#buttonToClickID").click(function(){
 	 $("#containerDivID").html('img/loadingImage.gif').load('<?php echo HTTP_SERVER_ADMIN;?>page.php?id=x');
 });
 </script>

And I think that might be wrong, or JS doesn't allow defined locations of folders :-??

Edit: Maybe I should've done this in the first place, and show you how my website is structured.


<div class="content">
	<div class="grid_a">
		<ul id="shortcut" class="shortcut tab-content"
		<ul>
		<li>
			<div id="buttonToClickID" class="shortcut-icon">
				<img src="path/to/image" width=xx height=xx>
				<div class="divider"></div>
			</div>
			<a class="shortcut-desc" href="#"> <strong>Button name</strong> <span>Button description</span></a>
		</li>

		<li>
			....
		</li>
              </ul>
	</div> <!-- End of grid_a" -->

	<div class="grid_b"
		<div class="box">
			<div class="header"><h3>Some text</h3>
				<div id="low-content" class="low_content">
					<p>Some other text</p>
			</div> <!-- end of low_content -->
		</div> <!-- end of box -->
	</div> <!-- end of grid_b -->
</div> <!-- end of content -->

Now, using the js mmoustafa posted it should go like this...and correct me if I am wrong :


<script type=text/javascript"> 
 $("#buttonToClickID").click(function(){
 	 $("#low-content").html('img/loadingImage.gif').load('page.php?something=other');
 });
 </script>

I might be blind on this one, but I just cannot see what is wrong.

ShiDomY

Ok, I made to work. Had to do some changes to my current design, that's why it wasn't working. Thank you again mmoustafa, you are a life saver ^_^

mmoustafa

No problem, you're welcome.
Please mark the discussion solved.

vishpatel1990

@mmoustafa greate work bro...

treehouse : what would you like to learn today?

Forums

[Solved] Load a php page into a div