javaScript code within PHP function only work in first call

Question

I have below PHP Function contains some Javascript code the function work perfectly. But the javascript code only works in first PHP call function. When I call a function in another place for the second time the javascript code remains as the first call and don't change according to the second call data.

<?php
function YPE_bsn_font() { ?>
<select id="fonts">
    <option value="">Font one</option>
    <option value="">Font two</option>
</select>
<div class="textloader">
    <?phpecho __('The Quick Brown Fox Jumps Over The Lazy Dog. 1234567890');?>
</div>
<style id="bsn-font-loader" type="text/css">
    .textloader {border:1px solid #ddd;margin:5px 0 0;padding:10px;background:#f8f8f8;}
</style>
<script>
jQuery(document).ready(function($) {

    $("#fonts").change(function() {
        var optionName = $("#fonts option:selected").text();
        var fontName = optionName.split(' ').join('-');
        $('.textloader').attr('id', ''+fontName+'');
        $("#bsn-font-loader").text('#'+fontName+' {font-family: "'+ optionName +'"}');
    });
});
</script><?php
}
?>

why do you need to add your html in a php function?!

Aya Salama
– Aya Salama

2016-10-08 22:09:57 +00:00
Commented Oct 8, 2016 at 22:09 — Aya Salama
– Aya Salama, Commented Oct 8, 2016 at 22:09

Aya Salama · Accepted Answer · 2016-10-08 22:14:16Z

1

I don't know why do you need to add this code in a php function! but anywany this is not the way to change css property for an element

here is suggest solution for what you need

jQuery(document).ready(function() {
    $("#fonts").change(function() {
        var optionName = $("#fonts option:selected").text();
        var fontName = optionName.split(' ').join('-');
        $('.textloader').css('font-family', fontName);
    });
});

answered Oct 8, 2016 at 22:14

Aya Salama

1,51813 silver badges19 bronze badges

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

2 Comments

SAFEEN 1990 Over a year ago

When I calling the function in another time and when I change font name the font family don't change and remains as first calling function. How I can change font family in each calling function during change font name

Aya Salama Over a year ago

if you mean you are creating multiple selects so it can't have the same id, w will need to change id="fonts" into class="fonts" and use .fonts selector instead of #fonts, then replace $('.textloader').css('font-family', fontName); with $(this).next('.textloader').css('font-family', fontName);

Louys Patrice Bessette · Accepted Answer · 2016-10-08 23:46:11Z

0

That is because you change the font-family only in the <style> tag, wich is computed only on load.

Try changing the element's CSS directly:

EDITED for two (or more) <select> that change the font of a <div> right after...

<?php
function YPE_bsn_font() { ?>
<style id="bsn-font-loader" type="text/css">
    .textloader {border:1px solid #ddd;margin:5px 0 0;padding:10px;background:#f8f8f8;}
</style>

<select class="fonts">
    <option value="arial">Font one</option>
    <option value="Lucida Console">Font two</option>
</select>
<div class="textloader">
    Suzy and Sally are partying...
</div>

<br>
<br>
<select class="fonts">
    <option value="arial">Font one</option>
    <option value="Lucida Console">Font two</option>
</select>
<div class="textloader">
    The Quick Brown Fox Jumps Over The Lazy Dog. 1234567890
</div>

<script>
$(".fonts").change(function() {
    var newFont = $(this).find("option:selected").val();
    var newFontID = newFont.split(' ').join('-');
    $(this).next('.textloader').attr('id', ''+newFontID+'').css({"font-family":newFont});
});
</script><?php
}
?>

Notice that, with the above code, you have to provide the family names in the option values.

edited Oct 8, 2016 at 23:46

answered Oct 8, 2016 at 22:11

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

8 Comments

SAFEEN 1990 Over a year ago

Thank you. as I say it is work in the first function call. But when I call the same function in another place or file the javaScript code not work and the font family remains as the first call. I want when calling the function in second time when i change font name directly change the font family but in this case remains as first call and don't change the font family during change the option name

Louys Patrice Bessette Over a year ago

Ho!!! I just saw that! Did you tryed to just remove the document ready wrapper around this function? Since this change event occurs obviously when document is ready... You don't need it. Then, the event handler will be in global scope (not limited to "on ready")

SAFEEN 1990 Over a year ago

if you mean I remove this line jQuery(document).ready(function($) {}); i think after removing this line the code don't work. if you mean another thing please edit your code

SAFEEN 1990 Over a year ago

You called function one time it is work without a problem. But if you can call function two times. means show two select boxes and change font name in each select box.

Louys Patrice Bessette Over a year ago

Haaa... This is something else!! So you have two (2) .textloader divs ?

|

Collectives™ on Stack Overflow

javaScript code within PHP function only work in first call

2 Answers 2

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related