1

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!

Improve this question
3

2 Answers 2

Reset to default
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.

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

3 Comments

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
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.
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?
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>
Improve this answer

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.