unable to write javascript inside the php page

Question

i have written a javascript inside the php file, but while calling it from my main page like this

     <script type="text/javascript" src="<?php echo base_url() . 'js/inf-scroll/javascript_showuserinst.php' ?>"> </script>

Problem: if i see in the javascript_showuserinst.php file a line as $.post('/instruction/show_user_inst/<?php echo $userid; ?>', { here <?php echo $userid; ?> is giving me problem. Is that line syntax is correct?

I see the view source its showing Notice: Undefined variable: userid in D:\xampp\htdocs\js\inf-scroll\javascript_showuserinst.php on line 46 

But if i copy & paste the same js content in the main page without calling it from external file, it works perfectly.

javascript_showuserinst.php

Header("content-type: application/javascript");

?>  
(function($) {

        $.fn.scrollPagination = function(options) {

                var settings = { 
                        nop     : 10, // The number of posts per scroll to be loaded
                        offset  : 0, // Initial offset, begins at 0 in this case
                        error   : 'No More Data To Display!', // When the user reaches the end this is the message that is
                                                    // displayed. You can change this if you want. 
                                     .............
                                     .............

"That file is not being called." — What /is/ happening? Is the generated HTML [valid](http://validator.w3.org)? Can you see the request for the JS in the Net tab of your browser's developer tools? Do you get a 200 response? Does the response look like you expect it to look? Do you get any JS errors in the developer tools JS console? — Quentin, May 14 '13 at 10:53
@Quentin I updated my question **Problem: I am not getting any error message,The purpose of the file is to show infinite scroll, which currely its not happening. I think the problem is in the javascript_showuserinst.php file. the way i have written the code is wrong in it.** — Dan, May 14 '13 at 10:57
I asked 6 questions in my last comment. You've answered one of them. Try answering the rest. — Quentin, May 14 '13 at 11:04
@Quentin i know the problem. but could not solve it.Removing `script` is the actual solution of my question problem. But if you see in the .php file a line as `$.post('/instruction/show_user_inst/', { ` here `` is giving me problem. Is that line syntax is correct? — Dan, May 14 '13 at 11:19
There's nothing intrinsically wrong with that line but you need to *set* the variable before you can use it (and you aren't). — Quentin, May 14 '13 at 11:20
The JavaScript file is received through a new request. It doesn't get all the data used to build the HTML file. — Quentin, May 14 '13 at 11:29
if you just want to keep it in an external file why arnt you storing it in an standard javascript file? — Roy James Schumacher, May 14 '13 at 11:30
@RoyJamesSchumacher if i store it in external file then how can i write php inside external javascript file? i have to specify this in my js `$.post('/instruction/show_user_inst/', { ` — Dan, May 14 '13 at 11:31
you can store the php variable in a javscript variable on you html page or place it in a hidden field that your javascript accesses to get the data — Roy James Schumacher, May 14 '13 at 11:35
@RoyJamesSchumacher I could not understand your answer, can you show me any links for this with example code or can you post a answer for this — Dan, May 14 '13 at 11:36
http://stackoverflow.com/questions/1808108/how-to-access-php-variables-in-javascript-or-jquery-rather-than-php-echo-vari look there — Roy James Schumacher, May 14 '13 at 11:38
@RoyJamesSchumacher Your answer is diffrent, my problem is diffrent? — Dan, May 14 '13 at 11:40
how? you asking how to get a php variable into javascript and that tells you how, you store the php variable in a javascript variable and then use the javascript variable in your getData() function — Roy James Schumacher, May 14 '13 at 11:42
@RoyJamesSchumacher Anyway thanks, i solved the problem in some other way. I sent a parameter value to to the external .php file ,and there i received it as `` — Dan, May 14 '13 at 11:45

score 3 · Accepted Answer · answered May 14 '13 at 10:54

3

JavaScript files are expected to contain JavaScript.

Your JavaScript file contains a fragment of HTML.

Don't include HTML <script> tags in a JavaScript file.

answered May 14 '13 at 10:54

Quentin

914,110
126
1,211
1,335

Thankyou for your answer, I solved the problem by sending parameter value from main php file to the second js php file – Dan May 14 '13 at 11:48

score 0 · Answer 2 · answered May 14 '13 at 10:57

0

 <?php 
    echo "<script type='text/javascript' src='".base_url()."js/inf-scroll/javascript_showuserinst.php"."'></script>"
 ?>

answered May 14 '13 at 10:57

draxxxeus

1,503
1
11
14

I updated my question after finding my real problem. Please check it and help me... – Dan May 14 '13 at 11:20

score -2 · Answer 3 · answered May 14 '13 at 11:04

This must be in your PHP Script File

<script type="text/javascript" src="<?php echo base_url() . 'js/inf-scroll/javascript_showuserinst.php' ?>"> </script>

Now javascript_showuserinst.php can be like below

(function($) {

        $.fn.scrollPagination = function(options) {

                var settings = { 
                        nop     : 10, // The number of posts per scroll to be loaded
                        offset  : 0, // Initial offset, begins at 0 in this case
                        error   : 'No More Data To Display!', // When the user reaches the end this is the message that is
                                                    // displayed. You can change this if you want.
                        delay   : 500, // When you scroll down the posts will load after a delayed amount of time.
                                       // This is mainly for usability concerns. You can alter this as you see fit
                        scroll  : true // The main bit, if set to false posts will not load as the user scrolls. 
                                       // but will still load if the user clicks.
                }

                // Extend the options so they work with the plugin
                if(options) {
                        $.extend(settings, options);
                }

                // For each so that we keep chainability.
                return this.each(function() {       

                        // Some variables 
                        $this = $(this);
                        $settings = settings;
                        var offset = $settings.offset;
                        var busy = false; // Checks if the scroll action is happening 
                                          // so we don't run it multiple times

                        // Custom messages based on settings
                        if($settings.scroll == true) $initmessage = 'No more data to show';
                        else $initmessage = 'Click for more';

                        // Append custom messages and extra UI
                        $this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');

                        function getData() {  
                                // Post data to ajax.php
                                $.post('/instruction/show_user_inst/<?php echo $userid; ?>', {

                                        action        : 'scrollpagination',
                                    number        : $settings.nop,
                                    offset        : offset

                                }, function(data) {

                                        // Change loading bar content (it may have been altered)
                                        $this.find('.loading-bar').html($initmessage);

                                        // If there is no data returned, there are no more posts to be shown. Show error
                                        if(data == "") { 
                                                $this.find('.loading-bar').html($settings.error);   
                                        }
                                        else {

                                                // Offset increases
                                            offset = offset+$settings.nop; 

                                                // Append the data to the content div
                                                $this.find('.content').append(data);

                                                // No longer busy!  
                                                busy = false;
                                        }   

                                });

                        }   

                        getData(); // Run function initially

                        // If scrolling is enabled
                        if($settings.scroll == true) {
                                // .. and the user is scrolling
                                $(window).scroll(function() {

                                        // Check the user is at the bottom of the element
                                        if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {

                                                // Now we are working, so busy is true
                                                busy = true;

                                                // Tell the user we're loading posts
                                                $this.find('.loading-bar').html('Loading...');

                                                // Run the function to fetch the data inside a delay
                                                // This is useful if you have content in a footer you
                                                // want the user to see.
                                                setTimeout(function() {

                                                        getData();

                                                }, $settings.delay);

                                        }   
                                });
                        }

                        // Also content can be loaded by clicking the loading bar/
                        $this.find('.loading-bar').click(function() {

                                if(busy == false) {
                                        busy = true;
                                        getData();
                                }

                        });

                });
        }

})(jQuery);

Try it out

I updated my question after finding my real problem. Please check it and help me... — Dan, May 14 '13 at 11:16
You have changed your Question so answer seems wrong............you can do make another question , so this type of issue doesnt happen — Harsh Chunara, May 15 '13 at 13:25

unable to write javascript inside the php page

3 Answers3