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.
Related
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.
I have a div that loads up with data and buttons depending on what some variables are in a SQL database. When we click those buttons, it changes those SQL variables because of paypal api calls or whatever (such as a "de-activate this account" button.
Right now, when I click the buttons, everything works but the page stays the same, so the "deactivate button" still says "deactivate button" instead of saying "account is deactivated" and other examples like that. When the page is refreshed they change because the SQL database has changed
Right now, I'm using the following code:
location.reload();
which effectively refreshes the page, but then you have to click a couple times to get back to the div you were working in. not a huge deal but annoying none the less.
What I'm wanting to know is if there is a way that when someone clicks the button that, for example, deactivates the account, it displays the message "Account successfully deactivated" then it freshes that DIV only, and loads up the new information based on the SQL database changes.
So far I tried this:
var url = 'index.php';
$('#div1-wrapper').load(url + ' #div1');
Which actually did what I wanted but after the reload, none of my "clicky" divs (such as a + in the top left corner) would work anymore and therefore the div wouldn't expand like its supposed to. It's like when it reloaded it didn't contain the right names on the divs but when I viewed source it was the original information so the reload either didn't happen or it doesn't update in the source.
I just need to know if there is a way to reload a div as if the page has been refreshed (so that the PHP code is re-run and the variables re-evaluated) but without refreshing the page.
Also I'd like to do it with JQuery since when you click my buttons, its running jquery $.post and in that post after it alert(data) it does the refresh.
My button calls look like this:
$("[id^=cancelbtn_]").click(function(){
var formid = this.id;
var myRegexp = /^cancelbtn_(\d+)$/;
var match = myRegexp.exec(formid);
var which_row = match[1];
var username = $("#cancelbtn_"+which_row).attr("attr1");
$.post('post.php', {'administrator':7,'username':username}, function(data) {
alert(data);
location.reload();
});
});
I'm currently designing a system working with steps (like an airline booking, where you pass on various steps to buy a ticket) and these steps are being done via AJAX. So, the index.php file is the sole file loaded and the pages' are being loaded via AJAX on the main div.
The system is working as it should be, but I need to ensure the variables' passing on the subsequent loaded pages, based on the data entered before. E. g.:
I have a form on page 1 where the user enter some data, like his name and country. When clicking submit, the button triggers an AJAX request where the result is the content of page 2, being loaded on the div. But I need that the page 2 have the variables filled with the values on page 1. Page 2 have another form with new data and another submit button. When clicked, it requests via AJAX the page 3 which have to contain the variables at pages 1 and 2. And so on.
Which is the smartest way to do that? Using PHP session? Passing via $.get or $.post?
I request an opinion of you.
Thank you very much.
If you are using a library like jQuery - the most easy option is to pass the variables as POST or GET parameters, see: http://api.jquery.com/jQuery.ajax/
For example:
$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
You can change the type to be GET or POST depending on your needs and the data key should hold the data you wish to send. (in JSON format)
On how to pass the php data as JSON to the js, see passing php variable
I would go for the
$.post
option of jQuery.
http://api.jquery.com/jQuery.post/
Pass all the variables to your PHP script, and let that PHP script generate the new content of the div (next step) with all the variables (new ones + the ones from the post) filled in. If there are variables that should be transferred but not shown to the visitor, use hidden fields to transfer them.
BTW: to get the contents of all the inputs in your form via jQuery, use
serialize()
http://api.jquery.com/serialize/
They work together like a charm!
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 am using a jQuery plugin called Stepy, to allow users to complete a 10-step form.
Sample form: http://jsfiddle.net/wvkfn/
My site is setup so the user can leave the form in the middle of a 'step', in order to complete other tasks, and I'd like to have a variable set, so that when they complete the task, it takes them back to the last step they were on.
Is there a way to pull the value of the 'current' step from the plugin? My first thought was that the plugin places a class called current-step on the title, and pull the number value from the title text that has that class set.
I'd then want to set that as a PHP variable, so I could set the task link to something like http://www.example.com/task.php?step=3.
Any ideas on how to go about this?
Use the 'select' option stepy offers to register a callback when a tab is selected. In the callback use an asynchronous POST to your server to store the currently selected tab.
Sample:
$('#custom').stepy({
...,
select: function(index){
$.ajax({
url: "saveCurrentStep?userID=1&step=" + index;
});
}
});
The simple solution would be to store a cookie for current step OR you can use anchors for each step like for step 1 mysite.com/task.php#tsep1 and pull the value from URL