I have been struggling to find a solution for my issue. I'm not that of a experience person with javascript, but I am looking for a way to slighty change the external js url depending on an onclick event on an ahref.
Right now I have this in my head tags:
<script type="text/javascript" src="http://www.domain.com/loader.php?GID=126&go=&sid="></script>
I want the SID parameter to be set to 1 or 2 based on an onclick on an anchor tag. The loader is called with this piece of code, but the SID would have to change right before the loader is being called.
<a href="/#download" onclick="javascript:Load_126(); return false;">
Is there anyone that could tell me if it's possible? And maybe point me towards the right direction?
Regards,
Sedoc94
EDIT 1: I have been pointed in a direction and figured I could get this done with jQuery.getScript() But still have no clue how I should utilize it for my case.
EDIT 2: As the script need to be pulled from an external domain, I will have to go with the $.ajax() function.
Right now I have:
function loadGame(sid){
$.ajax({
url: 'http://www.domain.com/loader.php?GID=126&go=&sid='+sid,
dataType: "script",
crossDomain: true,
success: gLoad_12603()
});
}
With an ahref onclick I'm calling the loadGame function, but the console says: Uncaught ReferenceError: gLoad_12603 is not defined. It should be working. But I'm guessing that it somehow gives this error because the function only exists in the script code that is returned from the external URL.
Any ideas how I can make it work?
You need to provide a success callback that will be executed when the AJAX request completes. Right now you are actually saying gLoad_12603() with parathesis and executing the function BEFORE the AJAX request is even initiated. You can't just remove the parathesis because jQuery might try to obtain a reference to the gLoad_12603 function before the AJAX request is actually initiated as well. So you have to wrap your call to gLoad_12603() in a function to ensure everything works out:
function loadGame(sid){
$.ajax({
url: 'http://www.domain.com/loader.php?GID=126&go=&sid='+sid,
dataType: "script",
crossDomain: true,
success: function() {
gLoad_12603();
}
});
}
jQuery.getScript()
function loadScript(sid) {
$.getScript("http://www.domain.com/loader.php?GID=126&go=&sid="+sid, function(script, textStatus, jqxhr) {
//code you want to be executed after the script is loaded inside the page
//you can delete this callback if you don't need it
});
}
And use it this way, changing the sid on each anchor to have different scripts loaded:
<a href="/#download" onclick="javascript:loadScript(126); return false;">
<a href="/#download" onclick="javascript:loadScript(127); return false;">
Try removing the parenthesis "()" in "success: gLoad_12603()".
Related
I am calling the JS function cancelAppointment on button click, I can confirm that the function is running okay as the first alert is shown.
I have followed many guides to try and get this to work but they are yielding no results.
At the moment the success message is not being showed and the row is not being deleted. I can confirm the PHP script works fine.
the function is as below:
<head>
<script>
//Making the call to ajax this is encased in a function so it is not called pre-maturely
function deleteAppointment()
{
jQuery(document).ready(function(){
alert("Trying to run!");
$.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
//data : "",
success : function(response) {
//Success
alert("Deleted");
}
});
});
}
</script>
For the moment, until I get the ajax to work the PHP contains PDO, that will delete from both the Appointments & AppointmentLines table with an ID of 1000. I will parse this in once this first part works.
In Wordpress the jQuery library included in the noConflict() mode, so the global $ shortcut for jQuery is not available, see more details here.
To make it work change $ to jQuery:
function deleteAppointment()
{
jQuery.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
success : function(response) {
alert("Deleted");
}
});
}
You need to define what response the Ajax method is expecting to receive.
Make the response either 'text' (as shown in the example bellow) or make the response 'json'. You just add 'dataType: "text"' as a setting to the ajax call.
$.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
dataType : "text",
success : function(response) {
//Success
alert("Deleted");
}
});
Currently you're your success method is waiting for the value of "response" to be returned however you are not defining what it is.
EDIT: I was corrected that it should be dataType not data for the setting I was originally talking about.
I found the answer,
Because I was using wordpress you must use jQuery in place of $ I needed to wrap this in a DOM function with $ defined so that jQuery would understand $
I kept the data argument commented in the end.
This issue was caused due to wordpress requiring slightly different syntax when calling a jQuery function. Thanks for your help everyone.
When attempting to use the following code:
<script src="lib/jquery-2.0.3.js"></script>
<script>
function readXML()
{
$(document).ready(function(){
$.ajax({
url: "myXML.xml",
type: "GET",
dataType: "xml",
success: function(xml){
alert(xml);
}
});
});
}
</script>
for some reason the code is ignored entirely. When I used the alert() before $.ajax it worked, but for some reason the entire AJAX code within is ignored. Other types of jQuery codes don't work, either. The rest of the code works perfectly fine - everything that has nothing to do with AJAX or jQuery. What am I doing wrong?
Also, when I try adding "complete" or "error" the entire page wouldn't load. When I replace success with done/error I get the exact same result - the code is ignored entirely. I know I'm doing something wrong, but having tried an awful lot of codes from here, I have no idea what else to do. Help?
UPDATE:
error finally did work and got me this result:
"NetworkError: failed to execute send on XMLHttpRequest: failed to load file myXML.xml"
However, I read that's the only way to import xml without loading everything to a server here: Using XML in HTML page without using a server
What am I missing?
my question is very simple. I have drafted the code as follow for showing the loading image when the form is being posted. The loading image can be shown properly. However, it cannot hide automatically after the result is returned. May i know what is the error?
HTML
<div id="loading"></div>
Ajax
function email_subscribe(){
$('#loading').html('<img src="loading.gif"> loading...');
$.ajax({
type: 'post',
url: 'index.php?subscribe',
dataType: 'html',
data:$("#subscribe").serialize(),
success: function (html) {
$('#loading').html();
eval(html);
}});
}
You're just calling the .html() method without any parameters (which serves as a getter). To achieve what you're looking for here, you need to at least pass in like an empty string to set and overwrite existing content.
$('#loading').html('');
I also think you should not use eval....
...and yes call .html() with an argument like:
$('#loading').html(" ");
or
$('#loading').html(" ");
When using AJAX to trigger a python handler (in GAE) upon load, it correctly loads the HTML template page, but for some reason it does not execute the Javascript that is in the template page. It also does not return that javascript in the success callback function.
This is the code from the index.html file that is triggering the handler upon load:
<div id="daily_emails"></div>
<script>
$.ajax({
url: "/gviz",
cache: false,
success: function(data){
$("#daily_emails").html(data);
}
});
</script>
The gviz handler generates a html template that has a custom Google Chart Tools table in it. It creates it without any problem on its own, but once I call it from another html file (like above), it strips the javascript content and as a result returns the plain, unaltered, html. As the javascript code itself uses template tags (for the data in the Google Chart Tool), I can't just run it from the above index.html file.
If it would help, I could post the full code of the template that is being rendered by the gviz handler.
You need to make sure your calls are made when the page is ready
<script>
$(document).ready(function() {
$.ajax({
url: "/gviz",
cache: false,
success: function(data){
$("#daily_emails").html(data);
}
});
});
</script>
Which browser are you using? Browsers will parse the returned HTML, and may strip out illegal HTML. This might happen if there's an error in the returned HTML. It'll be helpful if you include the results of '/gviz'.
Since it sounds like you're returning a template that may not contain purely valid HTML, you may need to return the results with the content-type set to 'text/plain' so the browser doesn't attempt to parse it.
I am using jQuery's $.ajax() to get some data. I'd like to include that data in a popover dialog. I'm using the Twitter Bootstrap popovers.
It's not working; I believe the problem is that the JS for the popovers gets loaded before the data arrives.
How do I do something like:
<script src="{{ STATIC_URL }}js/bootstrap-popover.js"></script>
inside of my $.ajax() success function?
var request = $.ajax({
url: requestUrl,
dataType: "jsonp",
success: function(data) {
...
}
you can use jQuery's $.getScript method:
success: function(data) {
$.getScript("myurl/js/bootstrap-popover.js");
}
In trying to offer you a better solution, your tentative conclusion doesn't make sense to me. You should be able to include the popover javascript long before your ajax call and then use code to actually invoke the popover or configure it on any newly added content in your success handler.
There is no reason I'm aware of to load the popover js inside the success handler. Load it beforehand (in the normal way you load your other scripts) and then use it in the success handler for your ajax call. To help with how you'd use the popover script, we'd need to know more about what you're trying to do with it.