This is in reference to http://jsfiddle.net/DLy6j/
var echoHTML = '<img src="URL-TO-MY-IMAGE.JPG"/>';
$.ajax({
type: 'post',
url: '/echo/html/',
data: {
html: echoHTML,
delay: 2
},
beforeSend: function () {
$('#slider0-4').html('Loading...');
},
success: function (markup) {
$('#slider0-4').html(markup);
$('#slider0-4 img').on('load', function () {
//$(this).after('<div>Image loaded</div>');
alert('Loaded');
});
}
});
(jQuery wait till AJAX page is fully loaded).
This is my first attempt trying to use $.ajax
I cannot get my image to load. I have changed the echoHTML to the image-URL on my server, AND have tried uploading my html on there thinking it might not work offline, but to no avail.
My guess is that somethings wrong here "url: '/echo/html/',". Have tried using my image in the JSFiddle above there and it loads just fine.
Somebody show me the correct way to do this?
I think you've just been a little mislead by that jsfiddle example.
When the url '/echo/html' is being passed in, it is sending a request to that url, which handles the data that you pass through, and then passes something back to the success function. jsFiddle allows you to simulate ajax requests because they have an Echo API which has these pages built.. but when you call it, it is trying to call http://www.bilalbinsaeed.com/echo/html/, which does not exist.. which is throwing an error, which means the success function will not run properly.
You will need to create another file which handles your ajax request. I would recommend doing a little more research into what AJAX is, and how it works.
It loads an image for me. It is a little unclear what you are asking, but it seems like you are getting hung up on getting it to load from JSFiddle to your site. Don't try to do that. Cross-Origin Resource Sharing won't work on JSFiddle without changing the headers on your site.
Related
Been a while since I done this but I must be doing something wrong.
I am using asp.netcore 2.1
I have a view with a button on it.
The button makes an ajax call to get the contents of a html page.
But, despite triple checking the uri the console error tells me it cannot find the page with a 404 error.
The html page is just a div structure.
this is my ajax call:
$.ajax({
type: 'GET',
url: '/Helper/Dialogs/CreateClient.html',
dataType : 'html',
success: function(data) {
dialogObj.setProperties(
{ content: data }
);
}
});
In case people get tripped up by this I was storing my html page in a sub-folder off the root off my solution. Because I am using asp.net core all 'adhoc' content has to be under the wwwroot folder in the solution.
It is obvious to me now but I thought I would post my answer in case people find it useful.
I'm having troubles with a script, related to wordpress and ajax.. I think it loads really slow, and if I click a clicked link, it takes the exact same time (not caching)
What I'm doing is, loading single.php in other page. Each time a link-post is clicked, that post is loaded through Ajax inside a div.
jQuery.ajax({
'url':post_link,
'type':'POST',
'beforeSend': function(){
jQuery(".container").html('<img src="ajax-loader.gif" />');
},
'success':function(results){
// some functions
}
});
Any ideas what's the problem here?
HTTP POST instructions aren't cached; you need to use HTTP GET/HEAD if you want caching to occur.
As for why it's "slow", the information you've given isn't enough to go on.
I have trouble doing this, I've been looking for some manuals, but they don't seems to work for me (they're either or detailed enough or I'm too stupid, probably something from both).
So I want to start an AJAX call from my Fluid View HTML file by some event, then it should go for the action in some controller and return some value (any value would be fine for the moment, I just can't seem to get anything to work here when it comes to AJAX in Extbase).
With no details I can only guess what is your problem
First and most important thing is ... using FireBug to check what the problem with AJAX call is. It can be just wrong URL (action, controller etc...) or some problem in your action which doesn't return required output. FireBug will allow you to check where it stacks.
But most probably...
There is VERY important thing to remember while writing JS/CSS code directly into your Fluid view and unfortunately it's almost never mentioned:
Fluid uses braces to indicate that the string is a variable: {someVar}, therefore if you put AJAX or other JavaScript function into the Fluid template it will be most probably considered just as Fluid variable. This sample pasted to the template:
$.ajax({
url: "index.php"
data: "tx_myextension_plugin[controller]=MyController&tx_myextension_plugin[action]=getData&type=89657201"
success: function(result) {
alert(result);
}
});
Will be rendered just as:
$.ajax(Array);
Solution:
Escaping it directly in the template is hard, therefore it's definitely easier just to save all your JavaScript into separate file under Resources/Public directory of your extension, and include it with common HTML tag:
<script type="text/javascript" src="typo3conf/ext/yourext/Resources/Public/ajaxFunctions.js"></script>
$("#searchFach").change(function(){
$.ajax({
type: 'POST',
url:"fragen/controller/Question/searchQuestions",
data: {mainCategoryId:$("#searchFach").val()},
success: function(response) { $("#searchCategory").html(response);
},
});
});`
I am trying to figure out how to use this pushstate and popstate for my ajax applications. I know there are some plug ins but i am trying to learn how to use it in it's raw form at the moment. I am also aware that in the raw form it is not supported by IE. All that aside, I need some help understanding how to use it.
the pushstate portion of it is pretty simple. Right now i have:
function loadForm(var1,var2){
string = "xyz="+var1+"&abc="+var2;
history.pushState("", "page 1", string);
}
This changes my url just fine and adds it to my url stack. I have another function that looks like the following:
function loadForm2(var1,var2, var3){
string = "xyz="+var1+"&abc="+var2+"&123="+var3;
history.pushState("", "page 2", string);
}
The second function also changes the url when called. Now that i have that part i am trying to figure out how to use the popstate. Right now i have it as follows
window.popState = ajax;
function ajax(){
jQuery.ajax({
type: "get",
url: "../html_form.php",
data: string,
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn('slow');
validate();
toolTip();
}
})
}
So if you can image my page with two links, one calls the loadForm function and the other link calls loadForm2 function. When i click each of the links the forms loads via ajax just fine and the url changes as it should. When I hit the back button, the url will roll back to the previous page's url BUT the page content loads the current form again instead of the previous form. When i hit the back button it is making an ajax call (firebug) as if it is trying to load the previous form but instead of running the previous ajax call it runs the current ajax call. So my url goes back to the previous url but the form that is loaded or the ajax call that is called is the same as the most recent page load (not the previous page load).
I am not sure what i am doing wrong and any help would be much appreciated.
You are doing something weird.
window.popState = ajax;
I am even surprised that ajax() gets even called.
The normal way of doing it is to register an event handler.
$(window).bind('popstate', function(event) {
var state = event.originalEvent.state;
}
See How to trigger change when using the back button with history.pushstate and popstate?
EDIT:
Basically you need to know which form to load when your state is changed. .originalEvent.state will contain this information which you can then pass on to your ajax call. It should also contain the respective string.
The problem in your approach is that string, always remained the one of the last newly loaded page. You need to read that string in event.orginalEvent.state. use console.log() to find it in that object.
EDIT 2:
Is there a way you can give me an example of what my code should look like. I think you understand what i am trying to accomplish.
Everytime the back button (or forward button) of the browser is clicked, you need to load the page from AJAX.
You have attempted to do this by saying:
window.popState = ajax;
This is dangerous as you are replacing a system function.
Instead you should register an event handler for when the state changes.
jQuery(window).bind('popstate', ajax);
Now everytime the back button is pressed, your ajax() function (should) get called.
So far this will only improve your approach to it, but not fix your problem.
The problem is that your original ajax() function refers to a global variable called string. This global variable has no memory of the previous states. Therefore everytime the original form gets loaded again and again.
But you already are correctly storing string in the state by doing:
history.pushState("", "page 1", string);
So when ajax is called, the browser will give it an event object, which contains all this information.
So all you need to do now is change your ajax() as follows:
function ajax(){
jQuery.ajax({
type: "get",
url: "../html_form.php",
data: document.location.search.substr(1),
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn('slow');
validate();
toolTip();
}
})
}
Finally you should also stop using string as a global variable by using the var keyword and make sure the string contains a "?":
function loadForm(var1,var2){
var string = "?xyz="+var1+"&abc="+var2;
history.pushState("", "page 1", string);
}
This will reduce any future confusion about something almost working, but not working properly.
I have my jquery mobile app pulling data from our mysql db using JSONP. The data is pulling fine, but the problem comes when I go back to the previous "page" in my app then click on a different option, it doubles the data on the next screen, and it will just keep stacking the data as many times as I do that. What am I missing?
The app doesn't look right in any browsers, but it looks fine in the ios simulator or appmobi simulator. I can post some code if needed, just know it won't look right in your browser.
Thank you for any help you can provide
$('#two').bind('pagecreate',function(event){
var img = getUrlVars()["st"];
var photo = $('#img');
$.ajax({
type: 'GET',
url: 'http://serverhidden/json/img.php?st='+img,
dataType: 'jsonp',
success: function(data) {
$.each(data, function(i,item){
var image = '<img class="stmap" src="images/states/lrg/'+item.img+' "/>';
photo.html(image);
});
},
error: function(e) {
//called if there is an error
//console.log(e.message);
}
});
});
Make sure you are not subscribing your event multiple times. It seems silly but is easy to do.
I would recommend you add logs to your JQM site so that you can see how many times your site is being updated.
You should also be aware that updating a JQMobile page often requires a call to a method to update content after a page is rendered. See here: jQuery Mobile rendering problems with content being added after the page is initialized
Hope those help.
So without any code from your project this is a shot in the dark but it seems like you populate a pseudo-page with information on pageshow with an .append() call. Instead of using .append(), use .html() as it will replace the information already present rather than add to it.
If each state has an individual page then you can bind to the pagecreate (or similar) event so the data will only be appended once rather than on each pageshow event.