How to use php value in jQuery function

Question

I have a php file which uses a script within it.

I'm trying to get an image called by php (the_main_image) and prepend a set of links with this image (along with a favicon which is currently working fine) using jQuery. Here's what I have so far but it currently breaks the function

<script>
    jQuery(document).ready(function($) {

        $("#lesen").click(function() {

            var bla = $('#my_hidden_input').val();
            var test = "<?php the_main_image(); ?>";

        $.ajax({
            url: bla,
            dataType: "text",
            success: function(data) {
                $(".text").html(data);
                $(".text a[href^='http']").each(function() {

                    $(this).prepend(test);
                    $(this).prepend('<img src="https://www.google.com/s2/favicons?domain=' + this.href + '">');



                });
            }
        });
    });

});
</script>

How can I use jQuery var values that contain php within a prepend or other similar jQuery functions?

what is the error you get in the console? Also check what is printed in the page with Inspect tool. — knetsi
– knetsi, Commented Jan 5, 2018 at 0:55
Seems to be a formatting issue when checking the console. So just to check the above code should all work okay and what I am trying to achieve is doable? — Joel Rosen
– Joel Rosen, Commented Jan 5, 2018 at 0:57
The out of my php main_image contains html formatting like so <div class="browser-shot "><img src="/image.png/></div> ); is this what is causing the issue because I cant prepend complex values like this? — Joel Rosen
– Joel Rosen, Commented Jan 5, 2018 at 0:59
jQuery values cannot contain php code. PHP is executing in the server, then the content gets to the client and get rendered by the browser, so jQuery does not see the <?php the_main_image(); ?> function but instead it sees whatever the output of that function is. — knetsi
– knetsi, Commented Jan 5, 2018 at 1:01
the problem here could be that the output of the function the_main_image(); contains double quotes, and that your var test variable is also using double quotes , try using single quotes var test = '<?php the_main_image(); ?>'; — knetsi
– knetsi, Commented Jan 5, 2018 at 1:03

Barmar · Accepted Answer · 2018-01-05 01:19:22Z

2

Hi I have done similar thing in my project, below worked for me.

Since you cannot write php directly in JavaScript, you need take help of your html.

Create a hidden input field in you html like below

<input type="hidden" id="something" value="<?php the_main_image(); ?>"/>

Then read this in jquery like

<script>
    jQuery(document).ready(function($) {

        $("#lesen").click(function() {

            var bla = $('#my_hidden_input').val();
            var test = $("#something").val();

        $.ajax({
            url: bla,
            dataType: "text",
            success: function(data) {
                $(".text").html(data);
                $(".text a[href^='http']").each(function() {

                    $(this).prepend(test);
                    $(this).prepend('<img src="https://www.google.com/s2/favicons?domain=' + this.href + '">');



                });
            }
        });
    });

});
</script>

hope this helps.

edited Jan 5, 2018 at 1:19

Barmar

789k57 gold badges554 silver badges669 bronze badges

answered Jan 5, 2018 at 1:01

user9081948

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

3 Comments

Joel Rosen Over a year ago

This is definitely on the right track, how do I place this within .prepend

Clomp Over a year ago

You have to have the Ajax script URL bla render out the code in this: <?php echo the_main_image(); ?>. The <script> tag, which is on the page is previously rendered into the client & occurs before the Ajax call is made. The contents inside of the Ajax call are rendered out after the Ajax call is made. The right way to do this is to send the value up through the data object & then use $(this).prepend(data.something);.

user9081948 Over a year ago

@JoelRosen check my Edit, once u got the value in to the JS variable test u can use it anywhere u need like prepend in this case.

valdislav · Accepted Answer · 2018-01-05 01:30:42Z

1

If your function in php does not echo result. Try to add echo. <?php echo the_main_image(); ?>. Seems like you forgot to echo result.

P.S. You can render results from php, even use it inside js code that placed in php files, but you should remember that mixin php with js is bad practice, and should be done cautiously.

How it works: php interpreter read your file before send static html to user and interpret all php related cod inside <?php ?>, if you echoing something it will appears in that row where you do this (or call function than do echoing). As mentioned by somebody if you echoing string with quotes it can break the js if you inline your php tags inside the same type of quotes.

edited Jan 5, 2018 at 1:30

answered Jan 5, 2018 at 1:01

valdislav

262 bronze badges

2 Comments

knetsi Over a year ago

the function might echo the output

valdislav Over a year ago

Author did not mention. Function can just return string, if it return string it will not render result in that place. Usually if function render strings it has meaningful name for this. Your captain.

Kevin Rhema Akhwilla · Accepted Answer · 2018-01-05 02:36:42Z

0

Try to use ajax to get php value in jquery funcion.

answered Jan 5, 2018 at 2:36

Kevin Rhema Akhwilla

1051 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to use php value in jQuery function

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related