mikema (6) [Avatar] Offline
#1
Dear Sir,

$('#bootChooserControl').load('/jqia2/action/fetchBootStyleOptions');

I was trying to execute the above code on my local machine, in which Apache and PHP are installed and the "test.php" has been passed. But the dynamic HTML fragments couldn't be loaded into the "phase.1.html". I thought first that the URL string may not be set right due to that "fetchBootStyleOptions" is located under the "action" folder in the current directory from download, so I changed it to load('/action/fetchBootStyleOptions'). Therefore, it was still not working.
mikema (6) [Avatar] Offline
#2
Re: Chapter 8 Ajax: bootcloset examples
The first issue solved after I changed to:

$('#bootChooserControl').load('actions/fetchBootStyleOptions');

to reflect the correct path in the download. But the product details cannot still be loaded into the DOM. I checked the firebug, showing no 2nd request.
seasharker (1) [Avatar] Offline
#3
Re: Chapter 8 Ajax: bootcloset examples
Thanks..that pushed me on a bit further and saved me some time...but then to finally get working I had to add .php (if using that) to end of each name
This occurs in quite a few places in html but then works fine.
For example
$('#bootChooserControl')
.load('actions/fetchBootStyleOptions.php');
mikema (6) [Avatar] Offline
#4
Re: Chapter 8 Ajax: bootcloset examples
still not working; the 2nd Ajax request was not shown on Firebug.
please see below:


<script type="text/javascript">
$(function() {

$('#bootChooserControl')
.load('actions/fetchBootStyleOptions.php');

$('#bootChooserControl').change(function(event){
$('#productDetailPane').load(
'actions/fetchProductDetails.php',
{style: $(event.target).val()},
function() { $('[value=""]',event.target).remove(); }
);
});

});
</script>
mikema (6) [Avatar] Offline
#5
Re: Chapter 8 Ajax: bootcloset examples
got it:

the div element for id="productDetailPane" is missed in the example html file.
KAES (14) [Avatar] Offline
#6
Re: Chapter 8 Ajax: bootcloset examples
I have made all the changes listed above and still not getting the correct output. The drop down menu is still blank. Here is the code:


$(function() {

$('#bootChooserControl')
.load('actions/fetchBootStyleOptions.php');

$('#bootChooserControl').change(function(event){
$('#productDetailPane').load(
'actions/fetchProductDetails.php',
{style: $(event.target).val()},
function() { $('[value=""]',event.target).remove(); }
);
});

});




What is wrong here?
bear.bibeault (675) [Avatar] Offline
#7
Re: Chapter 8 Ajax: bootcloset examples
Have you checked the response bodies for correctness?
KAES (14) [Avatar] Offline
#8
Re: Chapter 8 Ajax: bootcloset examples
I got it. the server didn't support PHP.
KAES (14) [Avatar] Offline
#9
Re: Chapter 8 Ajax: bootcloset examples
OK now the dropdown is populating but in firebug I am not getting the XMLHTTPrequest output. I would like to follow along as much as possible but am now running into this. I just got a new computer yesterday running lion. I did get the output on my other computer (snow leopard) but I can't imagine the new computer has anything to do with it. I have enabled XMLHTTP... in the console menu and have refreshed the page many times.... nada.

Any help thanks
bear.bibeault (675) [Avatar] Offline
#10
Re: Chapter 8 Ajax: bootcloset examples
Hmmm, I've been using Lion for some time now and haven't had any difficulties using Firebug. Have you tried it in the Webkit browsers to see if there are similar difficulties with their debuggers?
KAES (14) [Avatar] Offline
#11
Re: Chapter 8 Ajax: bootcloset examples
I read on stack overflow that I should try to remove and reinstall firebug (updated version too) and restart but still not working. I am running FF 6.0.2 and FB 1.8.2 all current. It is working in safari using firebug lite.
KAES (14) [Avatar] Offline
#12
Re: Chapter 8 Ajax: bootcloset examples
I also found that when clicking on the menu items and performing either the post or get methods I would get a huge code block instead of the formatted text and image that I am now getting in safari. Is this a FF problem?
bear.bibeault (675) [Avatar] Offline
#13
Re: Chapter 8 Ajax: bootcloset examples
Odd, works fine here, but I'm not using PHP.

Is the PHP not being evaluated correctly only when used via Firefox?
KAES (14) [Avatar] Offline
#14
Re: Chapter 8 Ajax: bootcloset examples
My guess would be no. I don't know PHP hardly at all so I wouldn't know how to troubleshoot
bear.bibeault (675) [Avatar] Offline
#15
Re: Chapter 8 Ajax: bootcloset examples
Hmmm, not a PHP expert here either but I'm having tourble thinking of a way that Firefox could prevent the PHP from executing when other browsers do not.
KAES (14) [Avatar] Offline
#16
Re: Chapter 8 Ajax: bootcloset examples
My bad. I wasn't testing on the server. FF is fine.
Necuima (14) [Avatar] Offline
#17
Re: Chapter 8 Ajax: bootcloset examples
Hi Bear, great book!! I have managed to get all the bootcloset examples to work (localhost/PHP). But I am wondering re the closing divs in the termifier method. Should they be in the method or does the browser put them in? Thanks for your advice, Necuima.
bear.bibeault (675) [Avatar] Offline
#18
Re: Chapter 8 Ajax: bootcloset examples
Thanks for the feedback!

You asked:
>But I am wondering re the closing divs in the termifier method. Should
>they be in the method or does the browser put them in?

Do you mean when we create new divs with $('<div>') ?

If so, jQuery automatically makes sure that the div is properly closed.
Necuima (14) [Avatar] Offline
#19
Re: Chapter 8 Ajax: bootcloset examples
Hi Bear, thanks for getting back to me. Yes, in the termifier method, two opening divs are created, both within jQuery $('<div>') statements, but I could not see where the closing </div> tags were created, though I could see that they had been created via Firefox 'view source chart'. Cheers from Oz, Necuima.
bear.bibeault (675) [Avatar] Offline
#20
Re: Chapter 8 Ajax: bootcloset examples
Right.... when we say $('<div>'), jQuery treats that the same as writing $('<div></div>').

Thanks for that feedback -- it's something I need to make clearer in the next edition of the book.
Necuima (14) [Avatar] Offline
#21
Re: Chapter 8 Ajax: bootcloset examples
Hi Bear, I had another look at the earlier sections of the book - you cover this on page 33, but I had forgotten that bit. Thanks, Necuima.
bear.bibeault (675) [Avatar] Offline
#22
Re: Chapter 8 Ajax: bootcloset examples
No problem! There's so much to learn, it's hard to remember everything the first time around. It all comes with practice. One you use things like this a few times, it becomes easier to remember.
Necuima (14) [Avatar] Offline
#23
Re: Chapter 8 Ajax: bootcloset examples
Hi Bear, I had another look at the guidance on page 33. It advises: "though it is recommended that you use well-formed markup and include the opening and closing tags for any element types that can contain other elements". Can you please help me understand how one can include the closing div tags in the termifier method (pages 273-277). Thanks in anticipation, and cheers from Oz, Necuima.
bear.bibeault (675) [Avatar] Offline
#24
Re: Chapter 8 Ajax: bootcloset examples
In place of:

$('<div>')

you'd use:

$('<div></div>')

jQuery does the exact same thing in either case.
Necuima (14) [Avatar] Offline
#25
Re: Chapter 8 Ajax: bootcloset examples
OK, the bit I am having trouble getting my head around is that the appends (appendTo and then .append) in the termifier method insert their stuff BETWEEN the appropriate opening and closing div tags. The method is beautiful code but has a few subleties!

Message was edited by:
Necuima
Necuima (14) [Avatar] Offline
#26
Re: Chapter 8 Ajax: bootcloset examples
Hi (again) Bear, sorry to be bugging you but I really am trying to gain a good understanding of every line of the termifier method code. On page 271 you explain re the options. The final line of the .extend function is ),options||{}); Presumably the || is an or - does this just say 'if there are no options supplied, merge the defaults with an empty set'? Thanks again, Necuima.
bear.bibeault (675) [Avatar] Offline
#27
Re: Chapter 8 Ajax: bootcloset examples
> the bit I am having trouble getting my head around is that the appends
>(appendTo and then .append) in the termifier method insert their stuff BETWEEN
>the appropriate opening and closing div tags.

That may because you are thinking in terms of HTML code, and you shouldn't be.

The HTML code is turned into element objects when inserted into the DOM -- the HTML itself is just source code. So by the time we get to the appendTo method, there aren't any opening and closing tags to worry about --- the appendTo() operates on the elements of the DOM tree.
bear.bibeault (675) [Avatar] Offline
#28
Re: Chapter 8 Ajax: bootcloset examples
>Presumably the || is an or - does this just say 'if there are no options supplied,
>merge the defaults with an empty set'?

Exactly. This is a common JavaScript idiom.
Necuima (14) [Avatar] Offline
#29
Re: Chapter 8 Ajax: bootcloset examples
Thanks, Bear. You are right - I was thinking in terms of HTML code. Your explanation has helped my ageing grey cells a lot!
bear.bibeault (675) [Avatar] Offline
#30
Re: Chapter 8 Ajax: bootcloset examples
No problem. Aging gray cells need to stick together! smilie