javascript - Forms using ajax with no page reload, getting Sessions variables To refresh -
i new building web forms without having series of pages. have in past been php programmer, starting use javascript technologies such communicating php document via ajax, running problem.
so have series of forms on 1 page used making pizza online ordering website. form in general working , able pull post data forms store sessions. problem on second last form, user selects toppings want on pizza. last form uses toppings populate list uses jquery sortable script user can sort toppings left side, whole, or right side of pizza. problem since these forms on 1 page, page loads sessions variables right original page load , time set user choosing toppings, have been loaded page don't refresh. when refresh page manually browser, jquery sortable form shows toppings choose last time choose them before refreshing page.. need update sessions when user chooses toppings , push updates loaded form.
here code section:
<?php session_start(); ?> <!--fourth pizza form, select kinds of toppings--> <div id="pizzatoppingtypes" > <form method="post" name="toppingtypesform" id="toppingtypesformid"> <div id="main"> <div class="example"> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="bacon"/><label style="color:black" for="bacon"><span><span></span></span>bacon</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="banana peppers"/><label style="color:black" for="bananapeppers"><span><span></span></span>banana peppers</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="black olives"/><label style="color:black" for="blackolives"><span><span></span></span>black olives</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="green peppers"/><label style="color:black" for="greenpeppers"><span><span></span></span>green peppers</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="ham"/><label style="color:black" for="ham"><span><span></span></span>ham</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="hamburger"/><label style="color:black" for="hamburger"><span><span></span></span>hamburger</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="italian sausage"/><label style="color:black" for="italiansausage"><span><span></span></span>italian sausage</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="jalapeno peppers"/><label style="color:black" for="jalapenopeppers"><span><span></span></span>jalapeno peppers</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="canned mushrooms"/><label style="color:black" for="cannedmushrooms"><span><span></span></span>canned mushrooms</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="fresh mushrooms"/><label style="color:black" for="freshmushrooms"><span><span></span></span>fresh mushrooms</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="onions"/><label style="color:black" for="onions"><span><span></span></span>onions</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="pepperoni"/><label style="color:black" for="pepperoni"><span><span></span></span>pepperoni</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="pineapple"/><label style="color:black" for="pineapple"><span><span></span></span>pineapple</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="sliced smoked sausage"/><label style="color:black" for="slicedsmokedsausage"><span><span></span></span>sliced smoked sausage</label> </div> <div> <input id="toppingtypes" type="checkbox" name="toppingtypes" value="extra cheese"/><label style="color:black" for="extracheese"><span><span></span></span>extra cheese</label> </div> </div> </div> </form> </div> <div><button href="#" id="btn4">sort pizza toppings</button></div> <!--fifth pizza form, sort toppings--> <div id="pizzatoppingsort" > <form method="post" name="splittoppings" id="splittoppingsid <div id="main"> <div class="example"> <div> <!--the first half (left side) of pizza--> <div id="pos" width="200px"> <img src="https://raw.githubusercontent.com/dhierholzer/onlineordering/master/images/pizzaleft.gif"/> <h3>first half</h3> <ul id="sortable1" class="connectedsortable"> <!--the potential moved items go here--> </ul> </div> <!--the whole pizza--> <div id="pos" style="margin-left:200px;" width="200px"> <img align="center" src="https://raw.githubusercontent.com/dhierholzer/onlineordering/master/images/pizza.gif"/> <h3>whole pizza</h3> <ul id="sortable3" class="connectedsortable"> <?php if(isset($_session["selectedarray"][0])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][0] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][1])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][1] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][2])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][2] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][3])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][3] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][4])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][4] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][5])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][5] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][6])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][6] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][7])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][7] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][8])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][8] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][9])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][9] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][10])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][10] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][11])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][11] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][12])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][12] . '</li>';} else {echo ' ';} if(isset($_session["selectedarray"][13])) {echo '<li class="ui-state-default">' . $_session["selectedarray"][13] . '</li>';} else {echo ' ';} ?> </ul> </div> <!--the second half (right side) of pizza--> <div id="pos" style="margin-left:400px;" width="200px"> <img src="https://raw.githubusercontent.com/dhierholzer/onlineordering/master/images/pizzaright.gif"/> <h3>second half</h3> <ul id="sortable2" class="connectedsortable"> <!--the potential moved items go here--> </ul> </div> </div> </div> </div> </form> </div> <!--add pizza item cart--> <div style="margin-left:600px;"><button href="#" id="btn5">add pizza cart</button></div> <!--javascript:--> $('#btn4').click(function(e){ var selected = new array(); $("input:checkbox[name=toppingtypes]:checked").each(function() { selected.push($(this).val()); $.post("toppingtypes.php", { selectedarray: selected, }, function(data,status){ }); }); // alert(selected); (was used test value) $('#pizzatoppingtypes, #btn4').fadeout('slow', function(){ $('#pizzatoppingsort, #btn5').fadein('slow'); $('#toppingtypesformid').submit(); }); }); <!--php: (in different location) (toppingtypes.php)--> <?php session_start(); $selectedarray = $_post["selectedarray"]; $_session['selectedarray'] = $selectedarray; echo "." . $_session["selectedarray"] . "."; ?> here location github repositiry if @ code pizza ordering section (i stripped css , visuals out of make easier troubleshoot) https://github.com/dhierholzer/basiconlineordering
thanks again @ all!
Comments
Post a Comment