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.
Related
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.
Not sure if this is even possible, but I have a AJAX form like this fiddle:
http://jsfiddle.net/nicorellius/GfeEf/
On my website, it is working fine. I do a simple validation in the form with JavaScript, but if the user gets through the JavaScript, the user is presented with a Campaign Monitor webpage: either saying yay or nay to their validation.
When the user subscribes successfully, if the user clicks back or uses the CM back link, the fancyBox remains with data populated. Based on how I have the script written it should close after submission.
This is Firefox behavior in Linux and Windows. Chrome actually clears the page and removes the fancyBox form.
The AJAX section is here:
$.ajax({
type : "POST",
cache : false,
url : "http://<comapny_name>.createsend.com/a/b/c/abcdef/",
data : $(this).serializeArray(),
// I've tried both of these commented out pieces to no avail.
//beforeSend : function() {
//$.fancybox.close(true);
//},
//success : function(data) {
//$.fancybox.close(true);
//}
});
So despite adding:
success : function() {
$.fancybox.close(true);
}
to the AJAX script, I cannot get it to close after submission.
EDIT
I should note, too, that this phenomenon seems to occur with Firefox, Safari and Opera. Chrome behaves as I would expect (eg, when clicking the back link, I get the fresh page reload). The CM page is using javascript:history.go(-1) to send me back.
I have no idea about Campaign Monitor but why not force close your fancybox on document load?
$(document).ready(function(){
$.fancybox.close(true);
}
It looks like you might be wanting the code from the answer to this: How to close fancybox after Ajax Submit?
(Here is the part extracted & modified)
var fancyboxProxy = $.fancybox; //declared before $.ajax
//and then modify your success to:
success : function() {
fancyboxProxy.close();
}
I would also try a simple alert() or conosle.log() in your success function to determine you are receiving the success event, if you are receiving the event then you know it is specifically a problem with the code you are using to hide the fancybox.
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'm putting some kind of configuration area together, where basically the menu is on the left side of the screen and the actual configuration takes place on the right.
Upon clicking on a menu item, the appropriate config screen is displayed. This works with no problem.
The problem I'm having is that one config screen requires some JSON pulling from the database, using a script that I've used elsewhere that worked perfectly (though it isn't called from a page that itself was called via ajax). Basically, the JSON pull is made when a dropdown menu is changed, but I don't know why, but once the action is complete the container is refreshed. Though this only happens for some reason if I don't include the jQuery library on the called page (even though it is already present in the top parent).
If I do include the library, then for some reason when I make the change, the requested JSON pull is made 3 times (instead of 1) and no refresh happens (as it should).
Have I done something very wrong? I've tried including the jQuery/javascript processing to make onchange in the top parent, but it doesn't work at all if there - even though the ajax calls don't use 'click' but 'live'.
To call the config area on menu click:
$("#setting_choice ul li").click(function(event){
event.stopPropagation();
$("#setting_choice ul li").each(function(){
$("#setting_choice ul li").removeClass("active");
});
$(this).addClass("active");
var setting = $(this).attr('id');
$.ajax({
type: "GET",
url: "settings.php",
data: "setting="+setting,
success: function(msg){
$("#setting_action").ajaxComplete(function(event, request, settings){
event.stopPropagation();
$("#setting_action").html(msg);
});
}
});
});
The code used to make the JSON call (but not everything, as the same still happens when called) - the JSON call is successfull as I've done console.log(j); and seen the JSON contents:
$('#country').change(function(){
alert('executed');
$.getJSON("regions.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
....
$('select#county').html(options);
alert('complete');
})
});
I can see that the changes are made when 'complete' is alerted, but then it all refreshes for some reason...