We Keep Coding

Insert Python's mpld3 images to HTML without saving them

I have a Python script, which does some computations and makes a figure. Then, I am using mpld3 to generate an HTML version of this figure and save it (e.g., figure.html). The Python computations are launched via the AJAX request to the HTTP server. In my JS file, I use the jQuery.load() method to insert the plot into HTML:
$("#includedContent").load('/figure.html');
In this way, everything seems to work fine. The question is can I do the same thing without saving the figures? I tried to return a figure as a response, here is my modified AJAX request:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "/main.py",
data: JSON.stringify({ 'sim_dur': input }),
success: function (response) {
figure = response.figure;
var child = document.createElement('div');
child.innerHTML = figure;
child = child.firstChild;
document.getElementById('includedContent').appendChild(child);
}
});
If I assign an HTML-like string to child.innerHTML, the code works correctly. But when I try to assign it a figure (which has a string type as well), it is not showing on the HTML page. I'm new to JS, so I apologize if it is something basic. I did some research and it seems that people usually save the results in other answers, so maybe it is a common way to do it and what I am trying to do is not right.

In my experience, mlpd3 will only work when the client (browser) is loading the page. Once the page is loaded, updating or creating an mpld3 figure using an ajax call won't create the figure for you. I personally struggled with that for some time and then gave up. I am sure one can patch things up but then you'll be stuck to your own mpld3 patched version

Ajax call to a different controller

I am trying to call a different Controller method in an Ajax call. I have looked at different posts for a solution but because I do not exactly understand what their solutions are (Links at bottom). I am calling my ajax call from my Home Controller, trying to call a method in my Production Controller.
"Request URL: http://localhost.59223/Home/Production/CreateNewProductionGoal"
This is the error I am getting.
I have tried changing the URL to .../Production/CreateNewProductionGoal and to ~/Production/CreateNewProductionGoal, as suggested online. Neither of these implementations worked because I was getting a 404 error, page not found.
One of the linked solutions mentions using a loc var key, of which I am unfamiliar.
The other suggests using a button which is not an option in my case.
$.ajax({
type: 'post',
url: "Production/CreateNewProductionGoal",
dataType: "json",
data: data, //Creating a ProductionGoalViewModel to pass into the CreateNewProductionGoal method
success: function (data) {
//$('#Dashboard').load("/Home/UpdateView/" + selectProductionLine);
}
});
Ajax call to different controller
How to make ajax calls to different MVC controllers
For clarification, I am looking for a step by step with explanation on how to Ajax call from one MVC controller to another.
Thanks!

You should include a leading / in your url to call the correct URL:
$.ajax({
...
url: "/Production/CreateNewProductionGoal",
...
});
That way, the request will go to http://localhost.59223/Production/CreateNewProductionGoal instead.
The different paths, if you currently view http://example.com/Home/:
your/path: This will take the current path as start path, i.e. and add it to there, resulting in http://example.com/Home/your/path.
~/your/path: can be used in asp.net server code, e.g. Razor to indicate the root of your website, only if it rendered. Browsers do not consider ~/ a special token, resulting in http://example.com/Home/~/your/path or http://example.com/your/path, when rendered
.../your/path: nothing special, resulting in http://example.com/Home/.../your/path
../your/path: go up one directory level, resulting in http://example.com/your/path. But this will result in different paths for nested directories.
/your/path: absolute path, will always result in http://example.com/your/path, independently of nested directories.
For more on absolute and relative URL see Absolute vs relative URLs

This might still be helpful for someone to use
$.ajax({
...
url: "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Production/CreateNewProductionGoal",
...
});

How to set the url in off-line site using jquery ajax

well my task is running a static site, No servers at all. pure HTML, and i need to load and read an XML file and update the page with the result.
The task is done and can read the xml file if the file is in the same location, the problem is if the xml file is in a separate folder the ajax flails. seems like the url fails.
$.ajax({
type: "GET",
// working url setting - case - 1
// url: "somexmlfile.xml",
// not working - case - 2
url: "../somepath/somexmlfile.xml",
dataType: "xml",
success: function(xml){
// do something with the returned data
},
error: function() {
// display the error
}
});
Case - 1 is the working solution for me, but i need to place the xml file in a separate place.
Then the case - 2 is the way to get to the file which is getting failed.
any idea,
Actually no domain, no servers, its is pure HTML,
All files are in ex:
D:/myfiles/someFolder/index.html
If i put the file in
D:/myfiles/someFolder/xml/myxml.xml
and set the url as
url: "xml/myxml.xml"
this config is working too,
But i'm trying to place the xml file in
D:/myfiles/xml/myxml.xml and need to read the file using ajax setting the url as
url: "../xml/myxml.xml"

Try to use an absolute url:
www.yourdomain.ext/siteDolder/xmlFolder/xmlfile.xml

Finally the solution was to turn off browser security (strict_origin_policy set to false on about:config) on Firefox settings and it works.

ajax submit request with pretty URL

i'm building my first "pretty url" web site, but when i attempt to run any of the AJAX Request functions, they are not being passed to the correct file (submit.php)
i have 1 file that holds all of the AJAX requests (http://mdloring.com/ezleague/submit.php):
function joinLeague(guild, league) {
$.ajax({
type: "POST",
url: "submit.php",
data: "form=joinLeague&guild=" + guild + "&league=" + league
}).success(function( msg ) {
$('.login_success').css("display", "");
$(".login_success").fadeIn(1000, "linear");
$('.login_success_text').fadeIn("slow");
$('.login_success_text').html(msg);
//setTimeout(function(){location.reload()},3000);
});
}
on one of my "pretty url" pages (http://mdloring.com/ezleague/game/counter-strike), i have a button that triggers the above function, but the URL it attempts to pass the request to is: http://mdloring.com/ezleague/game/counter-strike/submit.php , instead of http://mdloring.com/ezleague/submit.php
i'm really lost on this one. help is greatly appreciated.

Its due to the relative URL pattern. Try using absolute URL pattern
url: "http://mdloring.com/ezleague/submit.php" in the AJAX call

You can use absolute paths for your url like
url : "/ezleague/submit.php"
Do not use the server name, so your script is portable to other domains.

jquery ajax - calling my asp.net web api gives a wrong url and a 404 not found message

I'm writing a small ASP.NET MVC site which also includes a WEB API in it that I wrote.
I've configured the project on my local IIS as http://localhost/mysite
On the main page of my site I'm including a js script that I wrote:
<script src="#Url.Content("~/Content/js/home.js")"></script>
on the page ready event of that js I call:
$.ajax({
url: 'api/getdetails',
accepts: 'application/json',
cache: false,
type: 'GET',
success: function (data) {
alert(data);
}
});
when looking with Fidler I see that the page call returns a 404 since it doesn't try to load it to the relative path I'm in (http://localhost/mysite) and it tries to load the root of the server - so the call looks like this http://localhost:80/api/getdetails
when I was writing web forms I used to do ajax calls such as this all the time and it always worked.
what am I missing?
Thanks

What I ended up doing is in my layout html I've added a js var:
var baseUrl = '#Url.Content("~/")';
then on my ajax call I've added that base url:
$.ajax({
url: baseUrl + 'api/getdetails',
accepts: 'application/json',
cache: false,
type: 'GET',
success: function (data) {
alert(data);
}
});
this does the trick no matter how the page looks like. even if I navigate to http://localhost/mysite/home/index
It's probably not the perfect solution, and I definitely think the old webforms way which worked was better - but I guess there are pros and cons to any technology.
Still would be happy to hear if someone has a better solution. for now - this does the trick.

When you navigate to
http://localhost/mysite
The behavior is a little different from
http://localhost/mysite/
Try that to confirm. Without the trailing slash, the "mysite" looks like a document name, not a folder, so relative paths would form from the root of the server.
What you may need to do is pass in the site content URL into your home.js and form absolute paths from it in your code.