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...
Related
i'm building an offline application with Dojo 1.7, using Dojo RDD, generating forms dynamically and storing them in cache.
now every time when i fetch something through ajax i have to remove dojo registry because dojo binds widgets by id if i dont clear registry it will cause problem in parsing dojo widgets because their ids already exist in widget registry, but when i clear registry every time it causes another problem. everything works fine but the result content only appear when clicking anywhere on page. same as described in:
Dynamic Elements are not appearing in IE8 until there is a mouse click
but, in this case this problem is with Chrome.
and the solution provided in above url doesn't work in this case.
exp:
//in some cases registry is destructor is not called.
dojo.xhrGet({
url: serverUrl,
content: {},
load: function(result) {
//destroying widget registry.(before any parsing)
dijit.registry._destroyAll();
// here is html processing.
},
error: function(error) {
utility.handleException(error);
}
});
There is a big chunk of html + js code. The goal is to load and show it only on a specific button click, so, there is no need in pre-loading it every time.
Normally, we can include a partial view dynamically by using jquery/ajax, but as far as I know it requires a controller. In this scenario, there is no need for a controller, as the data is static.
So, the question is: is it possible on a specific event (like button click) to include a partial view without going through a controller?
What we tried was giving the ajax request an address of partial view. However it didn't help.
<div class="reportWindow"></div>
<script type="text/javascript">
$("#feedback").click(function () {
$.ajax({
url: "#Url.Content("_Feedback")",
type: 'GET',
cache: false,
success: function (result) {
$("#reportWindow").html(result);
}
});
});
</script>
a Partial view that have cshtml extension is still a Razor view, even if the content inside of it is static, the server still needs to read it and convert its content to html (even if that means copy it exactly the way it is and send it back)
What you need is an html file, which in turn you can load dynamically with javascript or jQuery:
$("#feedback").click(function () {
$("#reportWindow").load('feedback.html');
});
Note that this will still ask the server for feedback.html, typically this won't match to any route then IIS will resolve the request by looking for a static pages called feedback.html!
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.