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
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 am designing a web page. I want to have the options(of another drop-down list on same page) based on the selection made by the user.
I am providing a drop-down list to the user called Application. Depending on the Application, I want to query sql and want to show only the options that are valid for selected Application in another drop-down list.
I want to get the value of Application on the same page (one that user has selected) and by getting that value will query the sql accordingly.
Once the page is loaded, the PHP cannot do anything more.
You cannot use PHP based on user interaction.
The only way to do so is through javascript.
Using ajax, you can retrieve data from a certain URL on your javascript.
A procedure would be like this:
User selects something
The javascript(ajax) loads a URL
In that URL, use your PHP to fetch a certain query
The result would be sent to javascript, so display the result.
Here's a good page explaining ajax:
http://wabism.com/ajax-tutorial-with-jquery/
you have to call an ajax function on the onchange event of dropdown that gets data from database.
ajax is your friend. Either you can use raw javascript or jquery( easier ). Your steps would be..
1. Write a php code block, most probably a function, which takes the selected application option from post, queries the database and outputs the result.
2. In your current page, write a js code that fires the ajax request each time user selects an option. This ajax will send the selected option to the php script by post method and u can grab the output upon the success of the request.
$('.selectBox').on('change', function(){
// do your ajax here.
});
something like that..
I need to take form data from user input- i.e. radio buttons and use that to apply search filters to a database search.
However there are specific parameters which are giving me difficulty.
Specifically: The search filter options pane is a static fixture on the main page of the site. The query to be modified by the search filters is a separate php page which is called by an ajax function to display search results in the middle of the page without page refresh.
Is it even possible to submit variable values to another php page without going to that page and processing the php immediately? Or will the variables not be stored like that?
The code is too long but I'll give basic pseudocode:
Form action="Query Page to receive user input.php"
Some radio buttons:
20
15
10
Submit button--> Submits the radio button value to QueryPage.php but does not redirect
User clicks a category link (i.e. fitness) that calls the ajax function which displays the output of QueryPage.php. At this point QueryPage.php should perform the search with the specific user input filters that were selected earlier.
Is this possible?
Let me see if I understand correctly:
You're basically saying that your radio buttons will modify the search results, based on the what user selected?
If that's the case, I can think of 2 options:
1- When you make the ajax request for the search, first, grab the user input and send it to the QueryPage.php file with the search query. Do you have access to that function?
2- Post the user input using ajax (are you using jQuery or some other library for this?) to a UserInput.php file, where you'll store that data on the session, and then from QueryPage.php you just access the session and grab the values sent previously.
Does that answer your question? Sorry if it doens't, it's a bit hard to understand the problem.
You can use JQUERY and its events method. For example change,click,hover. In your case you want to use radio buttons, so you might wanna use the click event for that.
$("#radio").click(function () {
// SEND HTTP REQUEST
});
http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/
Yes. You could just use .ajax(), or .post() or cURL. This will post your data to the specified page without redirecting.
Example using .post()
$.post("test.php", { name: "John", time: "2pm", fieldname: "your value" } );
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/
Is it possible to add items to a select (list box) of html/php through jQuery or javascript when a specific action is triggered by another control in jQuery/javascript? (edited by Alex Thomas)
Yes, attach a suitable handler to the event of your choice. For example if you want to add new items when another control changes, you might use something like this:
$('#controller').change(function() {
$('#child_select').append('<option>New option</option>');
});
Or alternatively, there are jQuery plugins available to make the drop down list dynamic based on the selection of another element.
Yes, you can add items on the client-side. For example:
// Get the raw DOM select element (first use jQuery
// to find it, then get the raw version via [0]
var select = $("select[name=someField]")[0];
// Add the option
select.options[select.options.length] = new Option("Third Option", "3");
Live example
See also: How do you update all options of a select with jquery?
You can use the:
$('select').append('<option value="id" selected="selected">Text</option>'); method, via jQuery. You can call this a number of ways (and get your data via ajax, stored objects, etc).
If you can provide a little more information of what actions you want to trigger this, I can provide a better example.
Hope this helps.