CODEWITHSUNDEEP
javascriptphpjquery
0xburned
0xburned

Reputation: 2655

replacing header text on jQuery click event

I am trying to replace text in a h3 tag based on jQuery click event. However, my code is not working and if I put an alert statement inside the click event, I can see that I am reacting inside the function but not able to execute text() call.

Header HTML markup

<div class="section margin-top-50">
    <h3 id="page_header" class="section-height"><?php echo $this->translate('Text_1'); ?></h3>
</div>

Menu HTML markup (where I am defining the click events)

<ul id="myTab" class="nav nav-layout-sidebar nav-stacked">
    <li class="active">
        <a href="#mood-graph" data-toggle="tab">
            <?php echo $this->translate('Text_1') ?>
        </a>
    </li>
    <li>
        <a href="#quick-mood-stats" data-toggle="tab">
            <?php echo $this->translate('Text_2') ?>
        </a>
    </li>
    <li>
        <a href="#mood-rating" data-toggle="tab">
            <?php echo $this->translate('Text_3') ?>
        </a>
    </li>
</ul>

JS

$(document).ready(function() {
    $("ul#myTab li:nth-child(1)").click(function() {
        alert('clicked 1');
        $("#page_header h3").text("<?php echo $this->translate('Text_1'); ?>");
    });
    $("ul#myTab li:nth-child(2)").click(function() {
        alert('clicked 2');
        $("#page_header h3").text("<?php echo $this->translate('Text_2'); ?>");
    });
    $("ul#myTab li:nth-child(3)").click(function() {
        alert('clicked 3');
        $("#page_header h3").text("<?php echo $this->translate('Text_3'); ?>");
    });
});

Upvotes: 0

Views: 81

Answers (2)

Ben Chamberlin
Ben Chamberlin

Reputation: 731

You can't call PHP from JavaScript. In order to accomplish something like that, you'd need AJAX, but I don't think it's necessary for what I think you're trying to do.

Add a class 'toggleHeader' to each anchor. Then:

$(document).ready(function() {
    $('a.toggleHeader').on('click', function() {
        $('#page_header').html( $(this).html() );
    });
});

No need to break it up by each anchor when you can just grab the contents of the anchor you clicked

Upvotes: 0

Jay Blanchard
Jay Blanchard

Reputation: 34416

Change this - 

$("#page_header h3")

to this -

$("#page_header")

Your first selector is looking for h3's that are children of the page_header. They are actually one in the same and you only need to use the ID to make the change.

Upvotes: 2

Related Questions