how to append php codes in script

Question

when click on .button -> append { HTML + PHP codes } inner sample ul

<script>

$(document).ready( function(){
   $('.button').on( "click", function() {
       $('.ul').append('<li>'+ about 100 lines HTML + PHP codes+'</li>');
   }
});

</script>

/* when click on this button do something */

<button class="button">button</button>

/* append() inner this ul tag */

<ul>

</ul>

something like this ...

jQuery(document).ready( function() {

        var count = 0;
        var button   = jQuery('.add-module');
        var sample  = jQuery('.sample-page-builder');
        var geturi   = '<?php echo get_template_directory_uri(); ?>';
        var category = '<?php foreach ( $terms as $term ){ echo '<option value="'. $term->slug .'">'. $term->name .'</option>'; } ?>';

        button.live( 'click', function() {

            sample.append('<li class="apanel"><div class="apanel-head"><?php _e( 'Module Title', 'sample' ); ?></div><div class="apanel-body"><div class="apanel-content"><label for="sample_page_builder['+ count +'][title]" class="apanel-label"><?php _e( 'Module Title', 'sample' ); ?></label><input type="text" id="sample_page_builder['+ count +'][title]" name="sample_page_builder['+ count +'][title]" value="" size="150"></div><div class="apanel-content"><label for="meta-radio-1" class="apanel-label"><?php _e( 'Module Layout', 'sample' ); ?></label><ul class="radio-images"><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-1" value="" /><img src="'+ geturi +'/assets/img/module-1.png" alt="Layout 1"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-2" value="" /><img src="'+ geturi +'/assets/img/module-2.png" alt="Layout 2"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-3" value="" /><img src="'+ geturi +'/assets/img/module-3.png" alt="Layout 3"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-4" value="" /><img src="'+ geturi +'/assets/img/module-4.png" alt="Layout 4"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-5" value="" /><img src="'+ geturi +'/assets/img/module-5.png" alt="Layout 5"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-6" value="" /><img src="'+ geturi +'/assets/img/module-6.png" alt="Layout 6"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-7" value="" /><img src="'+ geturi +'/assets/img/module-7.png" alt="Layout 7"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-8" value="" /><img src="'+ geturi +'/assets/img/module-8.png" alt="Layout 8"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-9" value="" /><img src="'+ geturi +'/assets/img/module-9.png" alt="Layout 9"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-10" value="" /><img src="'+ geturi +'/assets/img/module-10.png" alt="Layout 10"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-11" value="" /><img src="'+ geturi +'/assets/img/module-11.png" alt="Layout 11"></label></li><li><input type="radio" name="sample_page_builder['+ count +'][layout]" id="meta-radio-12" value="" /><img src="'+ geturi +'/assets/img/module-12.png" alt="Layout 12"></label></li></ul></div><div class="apanel-content"><label for="sample_page_builder['+ count +'][number]" class="apanel-label"><?php _e( 'Max Number of Post', 'sample' ); ?></label><input type="text" id="sample_page_builder['+ count +'][number]" name="sample_page_builder['+ count +'][number]" value=""></div><div class="apanel-content"><label for="sample_page_builder['+ count +'][offset]" class="apanel-label"><?php _e( 'Posts Offset', 'sample' ); ?></label><input type="text" id="sample_page_builder['+ count +'][offset]" name="sample_page_builder['+ count +'][offset]" value=""></div><div class="apanel-content"><label for="sample_page_builder['+ count +'][order]" class="apanel-label"><?php _e( 'Order Posts by', 'sample' ); ?></label><select name="sample_page_builder['+ count +'][order]" id="sample_page_builder['+ count +'][order]"><option value="date">Order by Date</option><option value="title">Order by Title</option><option value="rand">Random Order</option><option value="comment_count">Number of Comments</option></select></div><div class="apanel-content"><label for="sample_page_builder['+ count +'][category]" class="apanel-label"><?php _e( 'Filter by Category', 'sample' ); ?></label><select name="sample_page_builder['+ count +'][category]" id="sample_page_builder['+ count +'][category]">'+ category +'</select></div><input id="sample_page_builder['+ count +'][id]" name="sample_page_builder['+ count +'][id]" value="" type="hidden" /></div></li>');

            count++;

        });

    });

its true way to append php + html codes when button click?? how do this work with jquery ajax, ( use php array in a script tag/file )?? how do this work with json ( get php codes from other file )?? what i should to do to avoid spageti codes? thanks!

I think you will find your answer here: http://stackoverflow.com/questions/3352576/how-to-embed-php-in-javascript — Liron Elimeleh, Nov 26 '16 at 18:30
I Think this is the answer to your question: http://stackoverflow.com/questions/3352576/how-to-embed-php-in-javascript — Liron Elimeleh, Nov 26 '16 at 18:32

score 2 · Answer 1 · answered Nov 26 '16 at 18:20

2

You cannot append PHP code in JavaScript. PHP is a server-side language, so it needs to be executed on the server, while JavaSript is executed on the client side (in a user's browser).

So if you append a PHP code, there will be only source code visible to the end user.

answered Nov 26 '16 at 18:20

Ivan Kvasnica

776
5
13

What should I do to do this? in other ways, do it with ajax or json? i need to use some php function and variables in my script tag in a php file – ShahePars Nov 26 '16 at 18:24
You can use an AJAX call to execute a PHP script on the server. It's possible to send data from JS to PHP this way as well as the PHP script can send some data back to JS. – Ivan Kvasnica Nov 26 '16 at 18:26
can i use my codes in a sample.php file? is not mistake? or spageti code? my script tag and my js codes in a sample.php file, and my php function and variables in my append function in a sample.php file is properly? – ShahePars Nov 26 '16 at 19:33

score 1 · Answer 2 · edited Jun 11 '17 at 09:32

1

You can do it like this

$(function(){
    $(".button").on("click",function(){
        $('.ul').append('<li>'+ "<h1>HTML CODE </h1>" + '<?php $array = ["array1", "array2"]; echo("PHP CODE - " . $array[0] ); ?>' + '</li>');
    });
});

*

<button class="button">button</button>
<ul class = "ul"></ul>

edited Jun 11 '17 at 09:32

ROMANIA_engineer

54,432
29
203
199

answered Nov 26 '16 at 18:33

worap

11
3

i write my codes like you and it run properly, but i need better way, to run my codes. its possible to run my code in a .js file? and get php functions and variables? because of i need to do my job as clean code and not spagetti, if i run my code like your way, is not a spageti code or not clean ( dirty code )? and is that standard work? thank you – ShahePars Nov 26 '16 at 19:53

how to append php codes in script

2 Answers2