I have an app where user goes through a number of steps in different tabs such as filling forms, making selections etc. Tables are updated by ajax.
I want to be able to figure out user changes between tabs so that if a user moves from one tab to next without making changes a modal will ask him if he is sure he wants to go to the next step without completing previous. I am thinking to do this by checking certain session variables and since I don't want to refresh page I want to use ajax. Does anyone know how this is possible??
How can I send session variables in my ajax responses??
Yes, You can send a request to check the session variables on the server.
You can do it fully using jQuery . If you have a step form just put on jQuery on next click like this :
$('#next').on('click', function () {
if (formIsValid()) {
// move to next step
var data1 = $('#input1').val(); // get data from all form fields like this
// if you want to save data you can use
// Jquery sessionstorage or localstorage APIs
$.ajax({
// write your ajax code here
})
} else {
// show alert and do other stuff
}});
If you want to store data temporarily use JQuery's localstorage or sessionstorage.
Related
I reviewed other post and some helped me but as I am not proficient in Jquery or AJAX, I want to make sure I am doing what I need correctly.
On my main page (base url), I have 2 different outputs based on the view that a user wants to see. I have a toggle button on the screen and a link on either side of the button. Currently when a link is clicked, my PHP is called, sets a session variable with the selected view and returns the specified view.
This changes my URL, i.e. www.mysite.com/view/A and clicking the other toggle link will change the URL to ww.mysite.com/view/B.
My issue is that I am using pagination and I need to specify the correct URL segment for proper page navigation but to normal user navigation, if they leave the main page and then come back, the correct view will be displayed (as the selected view is in the session variable) but the URL could be www.mysite.com, etc. I do not want to write a bunch of logic to determine if the page is the base URL or ww.mysite.com/view/A, etc.
The below function currently changes my toggle button (from left to right) based on which view was selected/clicked. I want to add logic to this function to call my PHP code which would set the session variable without changing the URL, then refresh the page to show the selected view. I know this is simple and I have a similar example which I found online but I want to make sure I am doing this right.
<script>
$('#toggle-control a').click(function(){
$(this).next('ul').slideToggle('500');
$(this).find('i').toggleClass('fa-bars fa-arrow-left');
});
</script>
Ok, so I'm not sure I follow and I apologize about that though you could be a little more clear. From what I grasp you want to accomplish two tasks: (1) you want to figure how to post a session variable to your PHP using jQuery AJAX and (2) you want to make sure your toggle changes position based on the view.
K, so on (1), the following enables you to pass in your script a session variable.
var sessionVar = 1;
var data = {};
data.sessionVariable = sessionVar;
jQuery.ajax({
type: "POST",
url: YOUR PHP FILE HERE
data: data,
success: function(data) {
},
});
In your PHP:
if ($_POST) {
$sessionVar = $_POST['sessionVariable'];
I would recommend using jQuery's .css() to control how the toggle button appears and where using the logic you have in place.
I want my dataTable to be read again or reload the data from db after clicking update/submit button.
i tried this
$('#ManageForms').dataTable().dataSource.read();
it seemed to work with kendoUI but i guess datatables must have different procedure.
If you want to reload the entire table then fnReloadAjax() is the way to go. It will go to the server, and just grab everything again.
Example:
var table = $('#example').dataTable();
// Example call to load a new file
table.fnReloadAjax( 'media/examples_support/json_source2.txt' );
// Example call to reload from original file
table.fnReloadAjax();
If you want to load only the data that should be displayed, then you need to use the bServerSide parameter, and have the server reply to your request, taking into account, filtering etc.
I have a shopping website and I am using javascript to add items to cart. Every time I click on add to cart, it puts the name of the item in a div that represents the cart. I would like to keep the content of the cart on each page, so what I did is:
$("#cartlink").attr("href", "cart.php?app="+tab+"")
Where "tab" is an array containing all the items in the cart. I then use a GET to retrieve the elements of the cart on the cart.php page. But my problem is since I add items in the cart using JS, if the user changes page without clicking on the cart.php?app link, tab will be erased and I have no way to recover "tab". If the user clicks on the cart.php link, I can use a GET and store the content into a session and then use it on every page.
So I would need a way to memorize the cart content if the user decides not to click cart.php.
Thanks!
You can use localStorage to store the cart status in JavaScript, and submit it to the server when the user confirms the order.
I would recommend using a plugin such as http://www.jstorage.info/
it will give you an easy way to store/retrieve your data on the client side
I'm not sure I totally understand what you're doing, but it sounds like you could just bind a listener to the window's beforeunload event, which is called before the page is unloaded (location changes). This is how websites (pop-up ads) achieve the "are you sure you want to leave" dialog.
An example:
window.document.addEventListener('beforeunload', function(event) {
$.ajax({ url: '/saveCart.php', data: tab,
success: function(){
},
error: function(data) {
}
});
}, false);
Note that since you can't cancel a beforeunload event, it might be safer to just update cookies instead of making an ajax call, since if the HTTP request fails for some reason, the page will still continue to unload. Here's a really good primer on setting cookies.
A really really simple solution would just be to return a string in the beforeunload listener, which would create a confirm dialog that could say something like "your cart will not be saved. Please save by clicking 'save cart'", etc. Not the best UX though.
I am new to Jquery. I have a doubt:
For example, in a web page as voting, if you click a button, a counter is incremented by +1. Now, how to draw the url of the button on a website? Therefore, if we provide the url to others, and just click on the URL, the counter should increase by 1 on the website.
Best example of this is FaceBook LIKE.
I prefer to use jQuery, PHP and MySQL
It's a little bit difficult to understand what you're trying to ask but here's my take on it.
Scenario
You have a page at http://mywebsite.com/rating which contains 5 items you can rate on.
Solution
There are two events here that point to the same server side code.
What you need to do is assign an identifier to your button/product/whatever you're trying to rate. So you might have something like this <button ratingname="button1">Rate me!</button>
Now you will have a jQuery function that will use AJAX to communicate with your server and store the increment in the database. This jQuery function will be invoked via an event handler for the button and by going to this url: http://mywebsite.com/rating#button1.
Once your page loads you should check the hash for a value and if one is found then invoke the original jQuery function. You may want to additionally check if the value for the hash is a valid rating button value. (Note you could also use a query string).
I would do it using ajax, and a server side program to record votes.
You could design the page with any look-and-feel. Then add the ajax code to talk to your server-side program and maybe show the user the current votes.
?id=642&point=1
It’s a POST, not a GET, so it could only be done from a form or AJAX, not a simple URL.
//Vote update
$.post(
"http://example.com/folder/vote.php", // url
{ id: 642, point : 1 }, // post-data
function(data){ // response
$("#resultBox").addClass("done"); // show msg
}
);
More reading at http://api.jquery.com/jQuery.ajax/
I have a form with a save button, but i want users to be able to come back to the form at anytime to finish filling it in. I would like to know if its possible to bypass the save button, so the user fills part of the form in, as soon as they navigate away from the page or close their browser it will save the form automatically to resume next time.
What would be the best way to implement this? Thanks in advance for any help, its much appreciated.
I have seen some javascript examples but have seen issues with cross browser support.
You can use an AJAX Call on unload like this:
window.onunload = myfunc();
function myfunc() {
alert("i am closing now");
// Your AJAX Call that saves your data (e.g. all input fields)
}
Jquery plugin, works a treat for autosave function.
http://plugins.jquery.com/project/jquery-autosave
More info here:
http://rikrikrik.com/jquery/autosave/#examples
include plugin:
<script type="text/javascript" src="scripts/jquery.autosave.js"></script>
$('form.formnamehere').autosave({
'interval': 20000
});
Auto submits form without page refresh.
I have set my interval to one second (1000) so the form gets saved every second. Therefor if the user exits the form after editing then it has autosaved.