Update HTML element with Javascript/PHP

Question

I'm new to PHP, I come from a C/C++ background and I have a problem that I've been stumbling on for a while now.

I have this piece of code in my html-file:

<div class="totaal clearfix">
<div class="border-left"></div>
<div class="content-totaal">
    <h2 class="vk"><?php echo $locLocal["lbl_totaal"]; ?></h2>
    <div class="totalekost" id="ajax_placeholder_total">
        <span id="prijs_totaal">
            <?php 
                $winkelwagentje->berekenTotaal();
            ?>
        </span> EUR
    </div>
</div>
<div class="border-right"></div>

A bit further, I have this piece of code which should update when a listdownbox on the page changes.

<script type="text/javascript">    
$('cb_verzendoptie').observe('change', function(event)
{
    var _verzendoptie = this.getValue();

    new Ajax.Updater( 'ajax_placeholder_port', 'ajax/berekenVerzendingskosten.php',
                                  { parameters: { verzendoptie: _verzendoptie},
                                  });

    $('ajax_placeholder_total').update("<?php echo date(DATE_RFC822); ?>" + " EUR" );                                      
});

I put the 'echo date(DATE_RFC822)' to test if the update actually triggers every time. And that's my problem, it doesn't. He echoes the date and time once, but from then the update doesn't trigger anymore for some kind of reason. The datetime stays the same.

The weird thing is, the Ajax.Updater method above this line does update every time my dropdownbox changes value. I really don't know why...

EDIT:

The date is just stubb data, instead of the date I normally need a php class there with a variable. The variable is updated in the Ajax.Updater method above the statement. But I doesn't change. That's why I tried to use the date, to see if the statement does update.

janith · Accepted Answer · 2012-09-05 09:38:59Z

1

JavaScript works on the client side, PHP works on the server side, each time your javascript runs, your echo statement wont execute, Its executed once on the server side, and sent to the browser. If you want to get the current date, you can use the JavaScript's Date object

answered Sep 5, 2012 at 9:38

janith

1,0255 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ThijsM Over a year ago

Aha, that already makes a bit of sense, thank you for the explanation. But now, If you read my edit of my question, you see I want to replace the date (stubb data) with the variable that I really need there. I get that variable out of a php class that is updated in the Ajax.Updater method above the statement. But the changes are never visible, probably because of the thing you say. So can't work with a simple javascript update method to reflect changes to the PHP class?

janith Over a year ago

Looks like you are doing this in prototypejs, which I'm not very familiar.. But what you have to do if you want to get a variable from php is to make an AJAX request, and in the onSuccess callback, update the value with the data you recieved.

ThijsM Over a year ago

Owkay, I'll try to do it with an AJAX request and the onSuccess callback. Thank you for helping out! :)

Quentin · Accepted Answer · 2012-09-05 09:34:53Z

0

You echo the date when the JavaScript is output from the PHP and sent to the browser (not when the JS function is called), so it will always show the time the page was generated.

The Ajax stuff makes a new HTTP request so it gets new data from the server each time it runs.

answered Sep 5, 2012 at 9:34

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Zerium · Accepted Answer · 2012-09-05 09:43:51Z

0

$('ajax_placeholder_total').update("<?php echo date(DATE_RFC822); ?>" + " EUR" );?

This code to jQuery means that an element like this:

<ajax_placeholder_total>

</ajax_placeholder_total>

is going to be updated.

Actually, that won't even get updated, as your selector is not unique.

What you most likely want or need to do is use a # or . (for an id and class respectively) in front of ajax_placeholder_total.

See if that helps.

answered Sep 5, 2012 at 9:43

Zerium

17.4k33 gold badges120 silver badges187 bronze badges

Comments

swapnilsarwe · Accepted Answer · 2012-09-05 10:22:05Z

i agree with @janith to use the date object to update $('ajax_placeholder_total').update function

Also you are executing the Ajax.Updater function every time you change and hence it happens everytime all the time.

You can put some condition to check if the value changes and then only execute the Ajax.Updater

$('cb_verzendoptie').observe('change', function(event)
{
    var _verzendoptie = this.getValue();
    if(// ur logic){
         new Ajax.Updater( 'ajax_placeholder_port', 'ajax/berekenVerzendingskosten.php',
                                  { parameters: { verzendoptie: _verzendoptie},
                                  });

          $('ajax_placeholder_total').update("<?php echo date(DATE_RFC822); ?>" + " EUR" );                                      

    }
});

Collectives™ on Stack Overflow

Update HTML element with Javascript/PHP

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related