include javascript file in php

Question

I have an html file(index.html) which calls a php file(pdj.php) via javascipt and populates the output in a div(pdj). This works.

$.ajax({
 url: '../command/pdj.php', 
 type: "POST",
 data: ({xparam: xparam}),
 success: function(data){
 var arraydata = $.parseJSON(data); 
 $("#pdj").html(arraydata[0]); 
 }
}); 

The php file needs a javascript file(spinner.js) to work.

1) Adding the javascipt file in index.html does not use it.

2) Including in pdj.php causes an error include_once('spinner.js');

Uncaught SyntaxError: Unexpected token / in JSON at position 1
 at Function.parse [as parseJSON] (<anonymous>)
 at Object.success (pdj.js:40)
 at fire (jquery-3.3.1.js:3268)

I am guessing my ajax call is wrong... Can you suggest how to fix this?

Thanks in advance

• Zar Ni Ko Ko: How about add datatype : "application/json", in your ajax call ?
• Michal Miky Jankovský: include and include_once is there for read and evaluate php code docs include - not javascript!

Answer 1

Your ajax call is not wrong.

1) Adding the javascipt file in index.html does not use it.

Problem here is that when the javascript file is executed, it can't find the target because the ajax call is not yet executed which means the DOM object is not yet created for the spinner.js.

2) Including in pdj.php causes an error include_once('spinner.js');

Here include_once will just add the javascript file's content to the response and this results the broken json and that's why the ajax fails because the content-type is set to application/json in you ajax config

The solution is to call the spinner.js's function on ajax success handler.

If you can provide the spinner.js as a link, that would be better for the answer.

$.ajax({
 url: '../command/pdj.php', 
 type: "POST",
 data: ({xparam: xparam}),
 success: function(data){
 var arraydata = $.parseJSON(data); 
 $("#pdj").html(arraydata[0]); 
 $("input[type='number']").inputSpinner();
 }
}); 

• osieman: Thanks for answering... the spinner.js can be found here [link]github.com/shaack/bootstrap-input-spinner/blob/master/src/…
• osieman: I have this javascript code which calls the master file: $("input[type='number']").inputSpinner()
• Tian Ming: Yeah, call this function on the ajax call success handler
• osieman: I tried but got an error '$.ajax({ url: '../command/pdj.php', type: "POST", data: ({xparam: xparam}), success: function(data){ $.getScript("../js/bootstrap-input-spinner.js"); var arraydata = $.parseJSON(data); $("#pdj").html(arraydata[0]); } }); ' $("input[type='number']").inputSpinner(); error=:Uncaught TypeError: $(...).inputSpinner is not a function
• osieman: formatting looks bad.. but I added an extra line to the success in ajax.. the line was this ' $.getScript("../js/bootstrap-input-spinner.js");' but it did not work.