Refresh/reload only a specific <div> 1

[figge88]

Hello!

First I would like to say that I'm very new to JavaScript, so perhaps I'm trying to do this the wrong way...

I have a shopping cart, and when a customer puts a product in the cart, a pop up shows to confirm this. But the problem is that I have a "mini-cart" on the side of the webpage that should show the amount of products and cost, but this minicart doesn't update until one refreshes the page...
So my question is if it's possible to only update/refresh a certain <div> using JavaScript or perhaps Jquery?

I have been trying this:

<script>
$(function() {
  $("#masterofrefresh").click(function() {
     $("#minicart").load("sidmeny.php")
	 return false;
})
})
</script>

and been playing around, but no luck...

I'm glad for any help I can get

Regards
Fredrik H

 

[ChrisHirst]

http://www.w3schools.com/ajax/default.asp

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[feherke]

Hi

As the OP already used the [tt].load()[/tt] method, I suppose he already read those documentations or other equivalent ones.

Fredrik, your code works for me and "no luck" shades no light on how it not works for you. Please give us details :
[ul]
[li]Is sidmeny.php working when requested directly ?[/li]
[li]Is sidmeny.php hosted on the same domain as the document itself ?[/li]
[li]Does the AJAX request for sidmeny.php appear in the web server's access log ? It should.[/li]
[li]Does the AJAX request for sidmeny.php appear in the web server's error log ? It should not.[/li]
[li]What is the response status code of the AJAX request for sidmeny.php ? Should be either 200 ( Ok ) or 304 ( Not Modified ).[/li]
[li]What exactly sidmeny.php's output is ? Should be a document fragment.[/li]
[li]Does turning off the browser's caching change anything ?[/li]
[/ul]


Feherke.

http://feherke.github.com/

 

[figge88]

Hmm it might be that I have given not enough information and/or that I have almost no clue on what I'm doing(?)
And I'm having hard time just answering you questions...

1. sidmeny.php is a document with my left side menu.
I use a

<?php require("sidmeny.php"); ?>

to show it on my website.
2. And yes it is hosted on the same sever/domain.
3. Maybe I've done something wrong here since I've only tried this on "localhost", the PC I'm working on. Do I need to put it up on the host?
4. See #3.
5. Have no clue on how to get that.
6. -
7. No.

When I use the code I have above, it might be that I'm getting the result I should get, so the code perhaps isn't wrong, it's that I'm trying to use it the wrong way...

I have a button with ID="masterofrefresh", when I click it, the page reloads and only show whats inside the <div id="minicart">.
So this is correct??

But I only want the <div id="minicart"> to reload/refresh where it sits, not "taking over the whole page"...
Inside <div id="minicart"> is a JavaScript, maybe there is a way to reload only that script?

Sorry if I'm confusing you guys, though I'm greatful for your help!


ps. the title is stating that I'm a programmer, but I'm not close to that, am a full time electrician and running an e-shop as self employee on my spare time. This might explain my lack of knowledge in JavaScript etc. Ds.

 

[feherke]

Hi

I use a

<?php require("sidmeny.php"); ?>

to show it on my website.

To clarify : by "when requested directly" I mean when you type [ignore]

http://localhost/whatever/the/path/is/sidmeny.php

[/ignore] into the browser's location bar. That is the closer equivalent of what the AJAX call does. Whether it works or not when [tt]require()[/tt]'d into another script is less significant information here.

Do I need to put it up on the host?

It should be on the same domain.

Otherwise the AJAX request would be denied due to the Same origin policy. ( Unless explicitly granted using Cross-Origin Resource Sharing. )

5. Have no clue on how to get that.

Either from you web server's access log, or using an adequate browser extension. Like FireBug in FireFox, DragonFly in Opera or the built-in Inspector in WebKit browsers.

I have a button with ID="masterofrefresh", when I click it, the page reloads and only show whats inside the <div id="minicart">.
So this is correct??

Yes.

Inside <div id="minicart"> is a JavaScript, maybe there is a way to reload only that script?

That may cause other problems, but not this.

Could we see that page live somewhere ? That way we could collect some of the answers ourselves.

Feherke.

http://feherke.github.com/

 

[figge88]

Well, the page is in Swedish, but here is the URL to the page with the "add to cart"-button (Lägg i varukorgen):

http://www.mickmek.com/spinnfiske-spon.php

I have only ONE place where I have put the "correct" Add to cart-button, the other ones you see is for paypal, and not the shopping cart I'm trying to use...

You should see a product (fishing rod) called: "Hanzhu HSP5802, 10-30g" (fourth rod).
Below that one, there is TWO "Lägg i varukorgen"-buttons, the second one is the one to use... It also have a test-button which is the one I have "connected" to the script mentioned above...

What I'm trying to accomplish is that when you press "Lägg i varukorgen" the minicart on the left side menu should update (you should see the typical shopping cart-icon where the minicart is), so you see amount of products and cost directly, and not forced to reload the whole page...

I hope this might clearify things Thanks for you effort Feherke!


Ps. I DO NOT want to make advertising of my page, would be stupid since it's in swedish, but I don't want to be kicked for that reason... ds.

 

[feherke]

Hi

Your problem could be used as example regarding vacunita's warning in the recent thread216-1679941. To quote him :

document.write will produce a completely new document each time its called after the page has loaded.

The JavaScript code in the document fragment returned by sidmeny.php uses [tt]document.write()[/tt] to generate HTML code.

I suggest to move the JavaScript code out from sidmeny.php, it not needs to be sent to the client again and again for each AJAX request. Where the [tt]<script>[/tt] .. [tt]</script>[/tt] is now, put just [tt]<div id="cart"></div>[/tt]. And wherever you move the JavaScript code, change it to this :

[b]function[/b] [COLOR=darkgoldenrod]print_cart[/color][teal]()[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal] [COLOR=darkgoldenrod]Cart_is_empty[/color][teal]())[/teal] [teal]{[/teal]
    $[teal]([/teal][green][i]'#cart'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]html[/color][teal]([/teal][green][i]'Varukorgen är tom.'[/i][/green][teal]);[/teal]
  [teal]}[/teal] [b]else[/b] [teal]{[/teal]
    $[teal]([/teal][green][i]'#cart'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]html[/color][teal]([/teal]
      [green][i]'<font size="2" color="#0000FF">'[/i][/green][teal]+[/teal]
      [COLOR=darkgoldenrod]Print_total_products[/color][teal]([/teal][b]true[/b][teal])+[/teal]
      [green][i]'</font> i varukorgen.<br>'[/i][/green][teal]+[/teal]
      [green][i]'Summa: <font size="2" color="#0000FF"> '[/i][/green][teal]+[/teal]
      [COLOR=darkgoldenrod]Print_total[/color][teal]([/teal][b]true[/b][teal])[/teal]
    [teal]);[/teal]
  [teal]}[/teal]
[teal]}[/teal]

And at the end of the Print_total() and Print_total_products() functions change the [tt]document.write(strOutput);[/tt] lines into [tt]return strOutput;[/tt] .

The AJAX call should also be modified so it calls print_cart() :

$[teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  $[teal]([/teal][green][i]"#masterofrefresh"[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
     $[teal]([/teal][green][i]"#minicart"[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]load[/color][teal]([/teal][green][i]"sidmeny.php"[/i][/green][teal],[/teal]print_cart[teal])[/teal]
     [b]return[/b] [b]false[/b][teal];[/teal]
  [teal]}[/teal][teal])[/teal]
[teal]}[/teal][teal])[/teal]

Hopefully that will be enough. Of course, I can not test it locally.

Note that I have no idea about that NOP Design Shopping Cart you use, but I would seriously think about not using it.

Feherke.

http://feherke.github.com/

 

[figge88]

Thanks for a detailed answer, I don't have time to test it right now, but I will later today!

Why do think of not using NOP cart?

Having in mind I don't have time or knowledge to build my own shopping cart, do you perhaps know a better, free, shopping cart system?

I don't ask you to search the internet for one, I can do that myself, I only ask if you use one youself, or know of one...

Regards
Fredrik H

 

[feherke]

Hi

The amount of used [tt]document.write()[/tt]s is usually a sign of warning. It is a deprecated practice. Beside that, there are other minor things :
[ul]
[li]using the [tt]length[/tt] property directly in [tt]for[/tt] loop condition ( in most cases [tt]length[/tt] not changes, accessing it on each iteration is pointless; is better to store it's value in a local variable )[/li]
[li]appending to an array with [tt]arr[arr.length]=val[/tt] ( again, accessing [tt]length[/tt] is pointless; the [tt]push()[/tt] method was implemented for this purpose )[/li]
[li]using no [tt]unescape()[/tt], [tt]decodeURI()[/tt] nor [tt]decodeURIComponent()[/tt] function call when parsing query string ( query string is URL encoded, should be decoded before using it )[/li]
[li]storing GET parameters in two arrays ( looping is required when accessing a value; a simple object is handier )[/li]
[li]not using regular expressions ( the old fashioned string manipulation methods make the code harder to read, debug and maintain ( somehow biased opinion ) )[/li]
[li]using the evil [tt]eval()[/tt] ( considered bad practice especially when accessing [tt]form[/tt] elements dynamically; using the [tt]name[/tt] attribute as array subscript is enough )[/li]
[/ul]
These are not errors, but they would make me think twice before deciding to develop something based on that code.

Regarding other shopping carts, I have no real experience. Practically I only tried to personalize and enhance Zen Cart. But I would not recommend it to beginners as it is quite big.

Feherke.

http://feherke.github.com/

 

[figge88]

I couldn't manage to get it to work. Though I didn't give it much effort...
You seem to know what you're talking about, so I will probably discard the shopping cart I'm trying to use now, and search for a different one.
And hopefully ending up with a better!

Thanks a lot for your time and effort feherke!
Have a nice day/evening!

Regards
Fredrik Hultman