Develop Reference

JavaScript function is loaded via Ajax but not executed?

I have different websites that have the same data protection. So that the text does not have to be changed every time on all pages, there is a file on another server that is integrated via Ajax.
There is a part where you can set an opt-out and the domain of the respective page must be stored there.
I don't want to get tracked!
<script type="text/javascript">
document.getElementById("setOptOut").addEventListener('click', function(e) {
e.preventDefault();
var redirect = 'https://' + window.location.hostname + '/privacy';
var url = encodeURIComponent(redirect);
location.href = url;
});
</script>
The code above which is in an HTML file is loaded successfull via Ajax into the document of the web page, but when I click on the link the function is not executed.
If I call the HTML file directly on the server, everything works as expected. Why doesn't it work with Ajax?

Found this good example: https://subinsb.com/how-to-execute-javascript-in-ajax-response/
I used eval() to make the code in the AJAX response execute.

JS .load() not working inside a triple parameter url rewrite?

im building a backoffice which has already this function working on single parameter url like example.com/backoffice/page
but on this page is not working the link is like this : example.com/backoffice/editassembly/2
This is the JS code of the page :
// When the document is ready set up our sortable with it's inherant function(s)
$("#todos").sortable({
handle: "#handle",
update: function() {
var order = $('#todos').sortable('serialize');
$("#info").load("../scripts/ficheiroassembleia.php?" + order);
}
});
This code is completly correct and working on other pages, the thing is that the .load is not loading my script like it could not reach it.
The current module for the page im using is inside the folder "www/backoffice/modules/editassembly/" and the script is inside "www/scripts/"

I already found out the problem, it was due to fact that the include for header that contained all important js files was not loading corretly, path issue i had to make a call on the file itself since it was the only module using a tripple parameter.

ajax call not working when deployed in live domain

My ajax call is working on localhost but not when i upload the files in domain. Using ajax I am searching all jpg/png files in a folder called 'images' and showing them in my webpage. The code is -
<script>
//Use ajax to load all images (jpe?g|png|gif) from a folder to a page called Gallery
//images folder should be in the same folder as the file
var folder = "../images/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
// create 'img' element using JS and dynamically add image source and class
var imgSrc = document.createElement('img');
imgSrc.src= folder + val;
imgSrc.className = 'imageThumbnails';
$("#spanImage").append(imgSrc);
}
});
}
});
</script>

please change
var folder = "../images/";
to
var folder = "images/";
hope this helps.. cheers

Ok, so as you saw when you tried accessing the folder directly in your browser, your web server does not allow this, which is common on web servers. Very few people actually want visitors to be able to see a list of all files in a folder, for security reasons.
The quick and dirty way to do this would be to allow listing files in that folder, through a htaccess file, using Options +Indexes, but I strongly recommend you do not do that
Instead, I would suggest you place a file inside your images folder called index.php and have that file build you a list of files placed alongside it, in the images folder. That way you have control over which files you show and which ones you don't. The index.php file can return a simple text output, one file name per line or something like that. Then your ajax call should work as it used to.
Hope this helps!

Load a text file from the same directory

I'm working with Play Framework (using the port 9000). When I use Ajax indicating the URL to a txt I try to indicate it in the following way:
...
<script>
var fileContent;
$.ajax({
url : "http://localhost:9000/text.txt",
dataType: "text",
...
</script>
...
The text file "text.txt" is on the same folder as the html file that calls it. However, when I try to access it, I just can't in this way. I did set up Apache yesterday to test it and I did try typing
http://localhost/text.txt
in the web browser and it loads, but when I do that with Play, it does not allow me. Any ideas? Thanks!

Load page with Ajax and load new scripts if necessary

I have a page1 which has a wrapper with articles.
<div id="wrapper">
<article>...</article>
<article>...</article>
<article>...</article>
<article>...</article>
</div>
I am loading new articles from page2 with Ajax and appending them to the wrapper
$.ajax({
url : page_to_load,
success : function (data) {
$('article',data).appendTo('#wrapper');
}
});
But some of this new articles might need specific scripts that were not loaded in page1 but would be loaded if accessed directly page2.
So the problem is some of the content in new articles breaks as they are missing those scripts.
What is the best solution? I can think of checking the new loaded page scripts and compare them with the already loaded and download the new ones, but I have no idea of how to do this.
EDIT
I noticed if I set the dataType to 'html' I cant search for the scripts, although they are there:
$('script',data)//doesn't match anything
But if I do:
console.log(data);
I can see the whole page with <html> and <script> tags

There is no problem actually, if you append HTML to the Dom then script calls will be interpreted as if the page was loaded directly, just make sure you use the same parameters as the shorthand jquery $.POST method.
I actually do this all the time and the <script src=""> are called and interpreted correctly
Just make sure you're accessing the scripts from the right scope as if the html was hardcoded on page1.
If this doesn't work, then check with the web inspector if the scripts are loaded or not.

Working solution:
$.ajax({
url : page_to_load,
success : function (data) {
// load the scripts
var dom = $(data);
dom.filter('script').each(function(){
var scriptSrc = $(this).attr('src');
if(!$('script[src="'+ scriptSrc +'"]').length && scriptSrc !== undefined) {
var script = $("<script/>");
script.attr('src', scriptSrc);
$("head").append(script);
}
});
// load the articles
$('article',data).appendTo('#wrapper');
}
});

Not sure but maybe you could add a script in the AJAX call - I'm not sure of this because I haven't tried it:
Proxy.Scripts.Add(new ScriptReference(AddVersion("/Pages/Items/SearchList/SearchList.Grid.js" )));

This workflow should work :
After every page request :
Get all the script tags in the loaded page.
Loop over the scripts
If it's not loaded yet , load it.
Here is the code snippet :
$.ajax({
url : 'http://localhost',
success : function (data) {
$('article',data).appendTo('#wrapper');
$.each($.parseHTML(data,null,true),function(){
if($(this)[0].tagName == "SCRIPT"){
var src = $(this).attr('src');
if($('script[src="'+ src +'"]').length){
$.getScript(src);
}
});
}
});

Disable async.
$.ajax({
url : page_to_load,
async: false,
success : function (data) {
$('article',data).appendTo('#wrapper');
}
});

you can use RequireJS or HeadJs library for calling js files.
RequireJS is a JavaScript file and module loader and HeadJS, a small library for Responsive Design, Feature Detections & Resource Loading
HeadJs is great and useful, try it.