help with ajax dynamic content load css

1) Script Title: ajax dynamic content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem: I ahve this script working with the exception that I cant load a styling sheet.
The link calls a page referncing a php variable.
This is the link code:

<tr><td><a href="javascript:ajaxpage('<?php echo $p1?>', 'contentarea';loadobjs('./includes/external.css'));"><img src="<?php echo "./images/".$book['pix']; ?>" border='0' width='80' height='100'alt="View Book details"/></a>
</td>

The css is very simple at present
.definition p{
border:1px;
text-align: left;
background-color:gray;

}
The external page is:

<div id="definition">
<h2>Achieving Lift Off</h2>
<h2>Allan Wilson</h2>

<p class="=definition">

"I'm stunned!.. This ebook is an aggregation of some of the most powerful marketing techniques being used on the Internet today not just by myself but other Internet Marketing Experts as well! Everything contained in this manual is enough to help anyone earn thousands per month on the internet. It's just up to you to do it. Highly recommended!" How To Make Your Own Ebooks Take The Short-Cut To Success With Reprint Rights Maximise Your Profits From Affiliate Programs How To Create Your Own Website Two Horror Stories About Webhosting and How You Can Avoid Them Discover How Easy It Is To Have A Third Party Merchant Account You Must Use Pay Per Click Search Engines You Must Build An Email List and Follow Up Your Contacts You Must Have Good Customer Service Free Traffic Generators To Get You Started How To Learn More About Internet Marketing Action Plan If You Are Completely New Action Plan For The More Experienced We Present a Summary of All The Expert Advice We Reveal the Best Multi Level Marketing Programs

</p>

</div>


</body>
</html>



This is a link to the page.

http://217.46.159.226/e_cart22/show_...?product_id=17

This:

Code:

---

<a href="javascript:ajaxpage('<?php echo $p1?>', 'contentarea';loadobjs('./includes/external.css'));">

---

should be:

Code:

---

<a href="javascript:ajaxpage('<?php echo $p1?>', 'contentarea');loadobjs('./includes/external.css'));">

---

Hi, thanks.
I still dont get the css.My references are the same as for other style sheets that are loaded.
How can I check the css is being loaded?

I'm looking at your page now. You still haven't fixed the problem I mentioned so neither the AJAX content is being loaded, nor the stylesheet, and there is a script error when I click on the link.

Once you fix the syntax error it should work. However, this style:

Quote:

---

Code:

---

border:1px;

---

---

in general won't do anything. If all other p elements already have a border set in your stylesheet, you could use:

Code:

---

border-width:1px;

---

Otherwise you need to define style and color as well:

Code:

---

border:1px solid black;

---

However, I see no reason to use loadobjs at all, you could just do:

Code:

---

<a href="javascript:ajaxpage('<?php echo $p1?>', 'contentarea');">

---

and put the styles for .definition p in your main stylesheet. They will only be used if your AJAX routine generates one or more .definition p paragraph elements.

Thanks.
I have changed the code to

<tr><td><a href="javascript:ajaxpage('<?php echo $p1?>', 'contentarea');loadobjs('./includes/external.css'));"><img src="<?php echo "./images/".$book['pix']; ?>" border='0' width='80' height='100'alt="View Book details"/></a>
</td>


The reason for the external style sheet was that it seemed to me that the original notes to the script recommended it.
I agree I could incorporate it in one of the other stlye sheets but I just wanted to play with the styles and not have reems of css to look at.Lazy me
I know the http ref doesnt refer to load jobs but I have definitely changed the code.
I dont get a script error. What error do you get please?

Hi, My apaologies.
I changed the code for the image (which does the same thing) but not the 'View book Contents' link.
However having changed it I still dont get stlyles.
Does it make a difference that both links are in a table cell as far as applying styling is concerned?

Now I'm getting a different error:

Quote:

---

Error: missing ; before statement
Source File: javascript:ajaxpage('Lift_off.html',%20'contentarea');loadobjs('./includes/external.css'));
Line: 1, Column: 75
Source Code:
ajaxpage('Lift_off.html', 'contentarea');loadobjs('./includes/external.css'));

---

But that's partly my fault, I should have realized that the ) wasn't missing, it was just in the wrong place. Now you've got too many of them, use:

Code:

---

<a href="javascript:ajaxpage('<?php echo $p1?>', 'contentarea');loadobjs('./includes/external.css');">

---

Done, but no styles?

Not my fault this time. Here is the source of the file Lift_off.html:

Code:

---

<div id="definition">
<h2>Achieving Lift Off</h2>
<h2>Allan Wilson</h2>

<p class="=definition">

"I'm stunned!.. This ebook is an aggregation of some of the most powerful marketing techniques being used on the Internet today not just by myself but other Internet Marketing Experts as well! Everything contained in this manual is enough to help anyone earn thousands per month on the internet. It's just up to you to do it. Highly recommended!"  How To Make Your Own Ebooks  Take The Short-Cut To Success With Reprint Rights  Maximise Your Profits From Affiliate Programs  How To Create Your Own Website  Two Horror Stories About Webhosting and How You Can Avoid Them  Discover How Easy It Is To Have A Third Party Merchant Account  You Must Use Pay Per Click Search Engines  You Must Build An Email List and Follow Up Your Contacts  You Must Have Good Customer Service  Free Traffic Generators To Get You Started  How To Learn More About Internet Marketing  Action Plan If You Are Completely New  Action Plan For The More Experienced  We Present a Summary of All The Expert Advice  We Reveal the Best Multi Level Marketing Programs   

</p>

</div>


</body>
</html>

---

There is nothing on there that would qualify for:

Code:

---

.definition p{
        border-width:1px;
        text-align: left;
        background-color:gray;
       
}

---

If you made it:

Code:

---

#definition p {
        border-width:1px;
        text-align: left;
        background-color:gray;
       
}

---

or changed:

<p class="=definition">

to:

Code:

---

<p class="definition">

---

and made it:

Code:

---

p.definition {
        border-width:1px;
        text-align: left;
        background-color:gray;
       
}

---

Either way it would work. The styles are being loaded. But the border will still have no effect because there is no style or color defined.

And, edit your external.css file in a plain text editor, it is being saved in an odd format that might also be causing some problems. It currently looks like:

Code:

---

��.

---

at least the beginning of it does, the editor here wouldn't even allow me to paste the rest of the characters.

Hi J,
Thanks for that. It now works and I see the error of my ways.
I have had problems cutting and pasting with the editor I use 'inserting' chars.
I dont seem to get a border which i guess is css related.

Yes the border would be as I said (emphasis added):

Quote:

---

However, this style:

Quote:

---

Code:

---

border:1px;

---

---

in general won't do anything. If all other p elements already have a border set in your stylesheet, you could use:

Code:

---

border-width:1px;

---

Otherwise you need to define style and color as well:

Code:

---

border:1px solid black;

---

---

By that bold line I meant that you would have to already have something like:

Code:

---

p {
border: 2px solid red;
}

---

If you did, you could define the p.definition border-width and it should inherit the other part of the general p border characteristics. Generally, all three characteristics should be defined when using the border property. This avoids confusion later if you change the inherited values. And, as I said, if there are no inherited values, they must be specified, like:

Code:

---

p.definition {
border:1px solid black;
}

---

Hi john,
I have changed the css and still no border.
I dont have any border specified for other p elements.
css is now

p.definition{
border:2px solid black;
text-align:left;
background-color:gray;
}
I will try some other style effects.


I see the border now, perhaps your browser has an old copy of the stylesheet and/or the remote page cached.

hi John,
many thanks.i have the border now,so i guess this tread is closed.
till the next time!