Im creating an app using JQ mobile, it has a list of items and you select one and it send the goes to another page that does the ajax request.the problem is that if I go back select a different item from the list and then go back to the first item and select it. it will not show the item again just the previously selected item.
here is my code
<div id="get">
<script>
$.ajax({
url: "http://s336087876.onlinehome.us/pmc/newapp/php/showCoupon.php?id=" + test,
cache: true,
success: function(data) {
$('.coupon').html(data);
},
// Error handler
error: function(req, status, err){
alert('not working');
}
});
</script>
Also here is a link so you can see what it is doing.
http://s336087876.onlinehome.us/pmc/newapp/html/
Try adding "cacheGetRequests: false" in initialization. for more info http://code.google.com/p/jqtouch/issues/detail?id=35
Related
I got strange situation. after when i delete by ajax some row from table, and got button wich reload ajax function (getlist) i got still this row in table, need to reload browser then this row is not any more on list. How to reload list proper to get result after delete row.
<script>
function getlist () {
$('#getlist').html("<center>Pobieram dostępną listę analiz...</center>");
// Do an ajax request
$.ajax({
url: "views/getjoblist.php",
}).done(function(data) { // data what is sent back by the php page
$('#getlist').html(data); // display data
});
}
$('#getlist-reload').on('click', getlist);
getlist();
</script>
in other page I make delete with ajax POST:
<script>
$('.table').on('click', '.delete', function () {
$(this).closest('tr').remove();
job = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'views/delete.php',
data: { jobname : job },
})
});
</script>
This is likely due to the cache. I suggest you set the HTTP header "Last-Modified" in the HTTP response header and the browser will automatically refresh the cache if it older.
I'm using ajax to submit pages and return content blocks based on user action for an onboarding sequence.
If have a page which loads and get 1 content element, the user then clicks Yes or No, which loads the next content element into the same space (via ajax).
For some reason my selectors don't seem to be working on that ajax loaded html.
Here is my ajax function which gets the form:
$.ajax({
beforeSend: function() {
$("#loader").toggleClass('progress');
},
type: 'POST',
dataType: 'json',
data: data,
url: baseUrl+'welcome/user_confirmation_form',
complete: function( response ) {
$("#loader").toggleClass('progress');
},
success: function( response ) {
console.log(response);
$("div.welcome-page > .col").html(response.response);
},
error: function( response ) {
$("#next-steps").html(response.response);
}
});
I'm then trying to access the submit button (have tried doing it as a ahref and button type=submit but nothing seems to be selecting the event.
$('div.welcome-page').on('submit', "user_complete", function(e) {
e.preventDefault();
console.log('FOund form');
var user = $(this).serializeArray();
console.log(user);
});
If I view source, the ajax returned HTML is not even in the dom, but it is when viewing the UI normally.
I'm guessing this has something to do with it?
How can I select all the form data?
Any time I click on the button or ahref it just fires the same page again.
If user_complete is a class you are assigning on your submit button in your loaded html, then you are missing a .
$('div.welcome-page').on('submit', ".user_complete", function(e) {
But this will only work if you're using a submit action as this is listening for a submit event. Maybe you want to listen for a click event?
You need to bind the events to your handlers for your newly added HTML elements. Your original call to
$('div.welcome-page').on('submit' ...
Only bound the event handler for the elements that were on the page at that point in time.
You can put your handler into a function ...
var myHandler = function(e) {
e.preventDefault();
var user = $(this).serializeArray();
}
And then after you load the new HTML you need to bind the handler to the event. So, on success with the AJAX you would ...
success: function( response ) {
$("div.welcome-page > .col").html(response.response);
$('div.welcome-page').on('submit', "user_complete", myHandler);
},
I would like to use Ajax to perform an action in OFBiz without the page refreshing. The task will be like filters. When I choose any Checkbox it should perform some action and display the result in the very same page.
What are all the steps i need to do?
I would appreciate some sample code for controller.xml,javascript calling Ajax ..etc
Thanks.
You can use form submission through ajax on an event in your ftl's. Here's a sample code for ajax call from say an ExampleCreateParty.ftl:
$.ajax({
url: '<#ofbizUrl>addSecurityPermissionToSecurityGroup</#ofbizUrl>',
type: 'POST',
accepts: 'xml',
data: $("form#Permissions").serialize(),
success: function(e) { console.log(e);
var xmlDoc;
try {
xmlDoc = $.parseXML(e);
var error = $(xmlDoc).find("Message").find("Error").find("ErrorCode").text();
var errorMsg = $(xmlDoc).find("Message").find("Error").find("ErrorMessage").text();
if (error=='0'){alert(errorMsg);}
console.log(xmlDoc);
} catch (err) {
alert('Saved Successfully!');
}
},
error: function(e) { console.log(e); }
})
Here in response to the service called i.e. addSecurityPermissionToSecurityGroup you can specify the response in the controller.xml which you can get within the success key in the ajax call itself.
To see a full end-to-end example have a look at this OFBiz page
As you can see whenever you change the product configuration, the product price is updated with Ajax call. Then you can find out for yourself the freemarker file containing javascript and the controller doing calculations and returning it back.
Ok, so I'm pretty new to ajax and loading content externally and would appreciate any insight to my problem.
I currently have a hidden div that is empty where the ajax content should load in after a link is clicked.
<div id="#ajax-wrap"></div>
I currently have a list of links that all have the same class and I'd like to have, when clicked, the blank div do a slide toggle and then load in the content from the page that the link was to.
Link:
Current jQuery:
$("a.home-right").click(function () {
$('#ajax-wrap').slideToggle();
});
Being as I'm new to Ajax and loading the external content, I'd like to know how to load content from the linked page that's house in the #content tag. So essentially, I'd like a .home-right link, #ajax-wrap would slide toggle, and then Ajax would pull content from the linked page (which is always going to be a different random link) and it's #content div, placing that content in #ajax-wrap.
Thanks in advance for any help folks!
You want to set the ajax for the links. Requirements:
Writing a handler for links.
We must cancel the default behaviour of browser when somebody click on a link (that redirect to the page).
Removing old data ajax recieved from server and make the #ajax-wrap fresh.
Load the remote page via ajax and set it to #ajax-wrap.
Now slide it down.
// Document Ready
$(function () {
// attaching click handler to links
$("a.home-right").click(function (e) {
// cancel the default behaviour
e.preventDefault();
// get the address of the link
var href = $(this).attr('href');
// getting the desired element for working with it later
var $wrap = $('#ajax-wrap');
$wrap
// removing old data
.html('')
// slide it up
.slideUp()
// load the remote page
.load(href + ' #content', function () {
// now slide it down
$wrap.slideDown();
});
});
});
You can simply use the ajax like this:
$("a.home-right").click(function () {
$.ajax({
type: "get",
url: "YOUR URL HERE",
success: function(data){
$('#ajax-wrap').html(data);
$('#ajax-wrap').slideToggle();
},
error: function(){
alert("An error occured");
}
});
});
try this:
$(function(){
$("a.home-right").click(function () {
$('#ajax-wrap').slideUp();
var url = $(this).attr("href")
$.ajax({
type: "get",
url: url,
success: function(msg){
$('#ajax-wrap').html(msg)
$('#ajax-wrap').slideDown();
},
error: function(){
alert("An error occured");
}
});
})
})
Use get:
// Inside click handler
$.get('url_that_returns_data')
.done(function(response){
var $response = $(response);
$('#ajax-wrap').html($response.find('#content')).slideToggle();
});
I have a dashboard UI that utilizes a jQuery tabs script. Each tab loads its content via separate Ajax requests.
Here's the issue I'm having:
A user will open multiple tabs, one right after the other
Each tab is created and an Ajax request is made for each
The last tab to be created is currently open and each tab's content is displayed on this tab once the requests are complete
Once a user clicks on any tab, the content is set as it should be.
Basically, if the user opens a new tab ahead of a recent tab's Ajax request completing, both Ajax requested contents display on the current open tab until the user clicks on any tab and then everything is displayed as it should be.
I've tried setting the Ajax calls to async: false which solves the issue as it forces the ajax requests to complete and load on the current tab before allowing the user to open another tab, however the user feedback has been negative in that users think that the dashboard froze (which it has).
I've also set a timeout function to load the tab with a loading .gif and then make the async: false Ajax request. The user feedback as been the same, even with the timeout function as the loading gif stops it's animation once the Ajax request is made.
The Ajax requests looks like this:
$.ajax ({
url: report,
cache: false,
success: function(html) {
$("#loading").hide();
$("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer">'+html+'</div>');
},
error: function(x, status, error) {
$.ajax ({
url: 'admin/error_notification.php',
type: "POST",
data:{
error: error
}
});
},
async:true
});
Keep track of the last request in some way and abort it when creating another request:
var jqxhr = {abort: function () {}};
/* various other code */
function loadTabOrWhatever() {
jqxhr.abort();
jqxhr = $.ajax({
/* ajax call in your question */
I would suggest having a separate tabcontent div that is paired with each tab (not just one #tabcontent div), and show/hide those when switching tabs. Then if a previous ajax call comes back later, and populates a tabcontent div that is now hidden, there's no harm done.
function loadTab(tabName) {
// Hide all tab content panes, then just show the one we want
$(".tab-pane").hide();
$("#tab-" + tabName).show();
$.ajax ({
...
success: function(html) {
$("#loading").hide();
$("#tab-" + tabName).append('<div id="c'+count+'" class="tabContentContainer">'+html+'</div>');
<snip>
Create your content panes like:
<div class="tab-pane" id="tab-firsttab"></div>
And trigger links would be something along the lines of:
First Tab
I believe it would make it harmless then for users to quickly click on multiple tabs, firing off multiple ajax calls, since each ajax call will only load the content into it's own content pane.
I figured out that if I create the tabContentContainer div prior to the Ajax request, then the tab selector has a object to then hide when another tab opens. Then, once the Ajax response is loaded, the visibility of it has already been set. See below:
$("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer"></div>');
$.ajax ({
url: report,
cache: false,
success: function(html) {
$("#loading").hide();
$("#c"+count+"").html(''+html+'');
},
error: function(x, status, error) {
$("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer"><div class="alert alert-error" style="margin-top:70px;"><button type="button" class="close" data-dismiss="alert">×</button><strong>Don\'t worry… It\'s not you, it\'s us.</strong> We were unable to connect to your data and deliver results. We are looking into this now.</div></div>');
$.ajax ({
url: 'admin/error_notification.php',
type: "POST",
data:{
error: error
}
});
},
async:true
});
I have such a setup. You call the function below indicating what tab you're loading into. I make sure each new tab has a unique ID (UUID) and that the function gets that ID to load the page.
There is a snag, however - I have found that if the sub pages loaded contain javascript code, that needs to initialize objects internally to the page,
they may be confused by the fact that the page is 'hidden'. Sometimes when
I get back to the tab with such elements, I would find they have a 'small' size.
This function also store the data submitted to the backend, so that you easily can create a 'reload' button.
function LoadView(ident, view, data) {
var img = $('<img>', {
src : '/images/ajax-loading.gif'
});
$('#' + ident).html(img);
data.view = view;
data.viewid = ident;
// console.log(data);
$.ajax({
url : '/cgi-bin/browser.cgi',
data : data,
type : 'GET',
dataType : 'html',
timeout : 30000000,
success : function(result) {
$("#" + ident).html(result);
// set data on view
$("#" + ident).data('data', data);
},
error : function(xhr, status, error) {
var img = $('<img>', {
src : '/images/exclamation_micro.png'
});
$('#' + ident).html(img.html() + error);
// alert("Error processing request " + error);
},
timeout : function() {
var img = $('<img>', {
src : '/images/exclamation_micro.png'
});
$('#' + ident).html(img.html() + ' Timeout');
// alert("Timeout processing request");
}
});
}
function ReloadView(view, ident) {
// Retrieve the data for the view
var data = $('#' + ident).data('data');
// Reload the view
LoadView(ident, data.view, data);
}