Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

jQuery / PHP / Ajax / HTML

Featured Replies

Basically I have a problem with a tabbed set up I have on wordpress, which should work fine. I am using this tabbed AJAX plugin found here:

http://www.jquerytools.org/demos/tabs/ajax-history.html#ajax1.htm

 

And as you see below, the htm pages load, but the php page does not; any help is appreciated! I have tried StackOverflow and other forums but still no reply.

 

<div class="tablocation">

<ul class="css-tabs">
 <li><a href="<?php echo site_url(); ?>/wp-content/themes/blue-and-grey/uni-general.php">General</a></li>
 <li><a href="<?php echo site_url(); ?>/wp-content/themes/blue-and-grey/uni-courses.htm">Courses</a></li>
 <li><a href="<?php echo site_url(); ?>/wp-content/themes/blue-and-grey/uni-inthearea.htm">In the area</a></li>
 <li><a href="<?php echo site_url(); ?>/wp-content/themes/blue-and-grey/uni-sportsandfacilities.htm">Sports & facilities</a></li>
</ul>

<div class="clear"></div>

<div class="css-panes">
 <div style="display:block"></div>
</div>	

</div>

 

The jQuery pulling this in can be seen below, I don't think there is any point showing the PHP page as that should be loading fine - the root is perfect, only the htm's work.

 

<script>
   $(function() {
       $("ul.css-tabs").tabs("div.css-panes > div", {
    effect: 'ajax',
    onBeforeClick: function(event, i) {
	// get the pane to be opened
	var pane = this.getPanes().eq(i);

        // only load once. remove the if ( ... ){ } clause if
        // you want the page to be loaded every time
	if (pane.is(":empty")) {
	    // load it with a page specified in the tab's href
	    // attribute
	    pane.load(this.getTabs().eq(i).attr("href"));
	}
    }
});
   });
</script>

 

Any Clues?

What happens when you access the PHP page's URL directly? If there's a fatal error in the PHP page and errors are off the AJAX will still pull in the results, which would be a blank page. The error wouldn't prevent rendering anything after the AJAX content, because it's a separate request.

Edited by Renaissance-Design

  • Author

What happens when you access the PHP page's URL directly? If there's a fatal error in the PHP page and errors are off the AJAX will still pull in the results, which would be a blank page. The error wouldn't prevent rendering anything after the AJAX content, because it's a separate request.

 

Renaissance-Design

 

Thank you for pointing that out, I think I have worked out my problem, the AJAX is storing separate PHP Files and in fact you are right, it is displaying all the right information.

 

Please Ignore the Bad Mark Up at the moment, as I understand it's not tidy, etc... I was trying some things out, but I am using ACF Plugin in Wordpress and need it to display the information of the page that the ajax page is contained in. If that makes sense?

 

As currently, its echo'ing the field educational ranking which wouldn't work because them fields don't exist in that php file, they would need to be taken from the page, not the page in the AJAX - That's why it's displaying no information. Any Idea How I could do this?

 

<!-- 
EDUCATION RANK 
----------------------------------------------->
<span style="height:70px; padding:15px 0px 0px 0px; width:160px; float:left; text-align:center; border-right:1px solid #DDDDDD; border-bottom:1px solid #CCCCCC;">
<span style="font-size:25px; font-weight:bold; text-align:center; color:#154157;">
<?php echo the_field('educational_ranking'); ?>
</span>
<br /><br />
<span style="font-size:12px; font-weight:normal; text-align:center; color:#154157;">
Educational Rank
</span>
</span>


<!-- 
CURRENT STUDENTS 
----------------------------------------------->
<span style="height:70px; padding:15px 0px 0px 0px; width:170px; float:left; text-align:center; border-right:1px solid #DDDDDD; border-bottom:1px solid #CCCCCC;">
<span style="font-size:25px; font-weight:bold; text-align:center; color:#154157;">
<?php echo the_field('current_students'); ?>
</span>
<br /><br />
<span style="font-size:12px; font-weight:normal; text-align:center; color:#154157;">
Current Students
</span>
</span>

<!--
MALE TO FEMALE RATIO 
----------------------------------------------->
<span style="height:70px; padding:15px 0px 0px 0px; width:155px; float:left; text-align:center; border-right:1px solid #DDDDDD; border-bottom:1px solid #CCCCCC;">
<span style="font-size:25px; font-weight:bold; text-align:center; color:#154157;">
<?php echo the_field('male_to_female_ratio'); ?>
</span>
<br /><br />
<span style="font-size:12px; font-weight:normal; text-align:center; color:#154157;">
Male to female ratio
</span>
</span>

<!--
UNIVERSITY TELEPHONE NUMBER 
----------------------------------------------->
<span style="height:70px; padding:15px 0px 0px 0px; width:205px; float:left; text-align:center; border-bottom:1px solid #CCCCCC;">
<span style="font-size:25px; font-weight:bold; text-align:center; color:#154157; ">
<?php echo the_field('uni_telephone_number'); ?>
</span>
<br /><br />
<span style="font-size:12px; font-weight:normal; text-align:center; color:#154157;">
Telephone Number
</span>
</span>

<!-- END OF STATS -->


<div style="clear:both"></div>
<span style="font-size:14px; font-weight:bold; text-align:left; color:#154157; padding:15px 0px 15px 0px; float:left;">
<?php echo the_field('university_address'); ?>
</span>

Edited by OwenONeill

I can't follow what you mean. You want the AJAX page to load inside the PHP page? What do you mean those fields don't exist?

 

It would help massively if you posted a live example rather than just code, I find it hard to help people without an actual page.

  • Author

I can't follow what you mean. You want the AJAX page to load inside the PHP page? What do you mean those fields don't exist?

 

It would help massively if you posted a live example rather than just code, I find it hard to help people without an actual page.

 

Mike, unfortunately It is all under a localhost. Bit of an 'ish.

 

Basically I want content to load under the tabs that you see above, currently it's loading from an external php file (see first li), is there a way to do it through DIVs instead of external documents?

Edited by OwenONeill

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.