$ is not defined - Ajax call in external js file - javascript

I'm trying to execute a JavaScript function. I get an error everytime the function enters the Ajax block saying:
$ is not defined
How can I solve this problem? I'm Programming a Google Chrome Addon and I get this error in my .js file:
At the moment ther is just the function above and its caller in the file:
// Calls get_pw function
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('submit').addEventListener('click', get_pw)
})
Many Thanks

Download jQuery from https://code.jquery.com/jquery-3.3.1.min.js. Include it in head tag of your document and call get_pw() when document has loaded.

Include jQuery before executing the function or rewrite AJAX request without jQuery.
Including can be done simply by copying jQuery code at the beginning of your script or by loading a file from their CDN and then executing your script on a callback(slower).

Related

JavaScript file doesn't effect new file imported via jquery load() method

I have a file index.php and there is a main js script in its header.
I'm using Jquery load method to load other php file inside a div element:
$("#formHideinAjax").load('loginpass.php');
And as our friend explained here the main js file which had loaded in the header doesn't work in new imported file so I was forced to add the js file inside the loginpass.php too(Now I have two same js file, one in header and one in div that loads loginpass.php ! )
I know that this method of loading js file is not standard and sends more request to my server.
How can I fix this problem?
Well, it is explicitly said in $.load() documentation. I'm afraid you can't just paste <script></script> code into your DOM for browser to run it.
I'm afraid you have to send JavaScript code from your loginpass.php file (without <script></script> tags) and just eval it in your JavaScript
$("#formHideinAjax").load('loginpass.php', function () {
// eval JavaScript code from php file here
});

Js Function not defined when I use php include

I used to write JS inline in my footer but since it's getting too much I want to write it in an external file and include the file in the footer then.
I'm currently using
<?php include "https://example.com/myjs.php"; ?>
in the footer.
In that Php file which is mainly js with a few php expressions, I'm defining all the functions first and afterwards I'm calling some of them functions "onload" with
jQuery(document).ready(function() {
// functions....
});
I've put everything inside
<script></script>
The thing is that I get an error showing the functions I'm calling arent defined. However, when I just paste the code in the footer template inside
<script> </script>
tags it works fine.
I'm assuming that the error is with the tags and inlcude...
What am I doing wrong?
EDIT:
I am using WP functions which are based on logged in user id and page id. Do these might cause the errors?
I'm using wordpress with jQuery.
Since it's a remote URL, all php scripts will be executed before inclusion into your file. So how about
echo file_get_contents("https://example.com/myjs.php");
I could solve the problem:
I defined the php vars in JS before the script within the footer.php. Credits to: Access PHP var from external javascript file
Then I just replaced the php vars wih the js vars and included it with html as script.
Works like a charm now,
thanks anyway for all the help!

Jade: How to include js file in a certain point

i want to include a file that must be used only when a jade file is render client side, this is the .jade file:
button(type="button")#start.flex
p#timer.flex
button(type="button" )#stop.flex
script(src='../public/js/timer.js')
The js file will handle the timer function, i have a console log in the .js file but it is never fired. What i'm doing wrong? I canno't import it in the head because the element won't be ready yet.
Thus i have to find a way to include and use timer.js only when this file is render. Thank you guys
JavaScript inserted as DOM text will not execute.
You must load the script file initially, with the document load. When loading content via AJAX response, execute whatever javascript function or functions you want in the success handler. There are other ways as well, but your current design wont work.
Checkout this link:
http://caih.org/open-source-software/modularjs/loading-javascript-script-vs-ajax-vs-both/

including external javascript file

I am trying to include external javascript to a document. Let's say that external js has the following code.
function myFunction() {
console.log("hello");
}
and I include it from console by
var script = document.createElement('script');
script.src = "http://myjs";
document.getElementsByTagName('head')[0].appendChild(script);
but then I still get myFunction() is undefined error. The function is being called from php file included on the page somehow. Interestingly, appending my external javascript right after the head tag in the document was not enough for it to precede the function call from the loaded php file.
Q: how do I ensure that I include my javascript BEFORE the php file given my situation?
EDIT: this is the hierarchy of all the sources
mysubsite.com
myfolder
mypage.html
mysite.com
myfolder
main.php
problem.php
problem.php is calling function myFunction() but it's not included anywhere yet. So I try to define the function in an outside js file and include it in mypage.html, but problem.php still comes before the included javascript in mypage.html
EDIT:
I think the real problem is that I am dealing with an iframe that's included inside a main document. In this case, is there a way to include my external javascript file inside the main document from console? Including scripts from console only affects the iframe instead of the main document.
What you're doing is fine, but then you have to wait for the file to load. Most browsers will raise the load event on the script element although some older versions of IE use onreadystatechanged instead. But since you're using jQuery (from the tags on the question), you don't have to worry about that, you can just use $.getScript:
$.getScript("http://myjs", function() {
// The script has been loaded, you can call myFunction now
});
PHP is always included before JavaScript. PHP is executed by the server before it's sent to the client, and JavaScript is executed by the client.
Why can't you just put a regular <script type="text/javascript" src="http:/myjs"></script> in your head?

element.innerHTML can't call my javascript Function

I am so new to web development and I am encountering this problem. I tried googling this but the problems that I saw is not related to mine.
I have a jsp file that contains only this code:
<script>
displaymessage();
</script>
and in my js file: I have this.
$('ajax_content').innerHTML = resp.responseText;
where in the resp.responseText is equivalent to a string that represents the jsp file.
The function inside the jsp file is existing in the compiled HTML page but the function is not called.
The function's purpose is just to display a message.
Could anybody help me?
Inserting a script via innerHTML does NOT run that script.
Instead, you should remove those script tags and just run the AJAX response through eval.

Categories

Resources