I'm using JQuery, I'm submitting a form and opening up a sidebar. How?

Head out to http://brucegust.com/kitchen/stunt_double.php, choose your options from the pulldowns and then click on "add to cart." The next page is "ajax.php" and it adds what you just selected into the database then lists what you just selected from the same table according to the session id.

Here's my JQuery:

<script>
$(document).ready(function() {
		
		
		$("#myForm").submit(function(e) {// use the correct ID
		e.preventDefault();// we don\'t want to submit anything until we\'ve first determined that the user\'s not get ready to duplicate something that\'s already in the database.
		
		var devTest = $( "#myForm" ).serialize(); //packaging all of our submitted variables into one, neat little var
		alert("Develop test, URL prams = "+devTest);// publish a little alert box that lets you see your posted variables
		$.post( "ajax.php", devTest) // posting all of our variables to ajax.php 
			.done(function(Drumstick) { //the "done"function is what you\'re doing when the AJAX call (in this case the ajax.php page) is "done" running and we\'re now hearing back from the server
				if (Drumstick.charAt(0) == "E") //"Drumstick.charAT(0) is just fancy code for the first letter of what you\'re getting back from the server
				{
					alert("ERROR - The submarket has been entered before");
				}
				else 
				{	
					alert(Drumstick);
					//url="update_insert_success.php?id="+Drumstick;
					//window.location.href=url;
				}
			});
		});
	});
	</script>

Open in new window


Now, head out to http://brucegust.com/kitchen/door_shop.php?door_id=389&product_id=36#. I'm trying to do the same thing, but in the context of a sidebar that pops out when you click on the "add to cart" button.

Go ahead and give it a shot and see what happens...

Once you select your options and hit "add to cart," nothing happens. Click on "cancel" and you'll see the alert box that shows all of the posted values and then the sidebar opens up.

I want the sidebar to be the "ajax.php" content like what I have in the first scenario.
I want the sidebar to open up after I click on "add to cart."

How?
Bruce GustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Currently you have 2 buttons on the form - Cancel and Add To Cart. The Cancel button is an input type="image" while the Add To Cart button is just and image. Because of this, the Cancel button is the only one that actually submits your form - the Add To Cart button is just an image in a link so has no behaviour. You might want to swap the button types around
Chris StanyonWebDevCommented:
What I would do is give each of your 3 buttons an ID - showOption, cancel and addToCart, and bind the click event to each of them. Then instead of responding to the submit event of the form, just repond to the click event of the button.

$('#showOptions').click(function(e) {
    $('#screen').show();
    $(this).next().show("slow");
});

$('#cancel').click(function(e) {
    e.preventDefault();

    $('#screen').hide();
    $(".box").hide("slow");
});

$('#addToCart').click(function(e) {
    // Prevent the default action of the button
    e.preventDefault();

    // Post for content of the form with AJAX
    $.post( "ajax.php", $('#myForm').serialize())
        .done(function(response) {
            // Deal with the AJAX response
            if (response.charAt(0) == "E")
            {
                alert("ERROR - The submarket has been entered before");
            }
            else 
            {   
                // Put the content of the response in the sidebar
                $('#sidebar_content').html(response);
                // Now show your sidebar
                // ...
                // and close the form
                $('#cancel').trigger('click');
            }
        });
    });
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Slick812Commented:
I looked at the page code for your -
   http://brucegust.com/kitchen/door_shop.php?door_id=389&product_id=36#
page. And your arrangement of elments, and whe way you use "INLINE CSS" like-

<div style="background-color:#b20606; height:35px; width:50%; text-align:center; color:#ffffff; padding-top:5px; font-variant:small-caps; display:inline-block;">

Make your page really difficult to find what is your page "organization" is, ,  as figure out if <div> and other elements are next to each other or below each other or what?

you say - "I want the sidebar to open up after I click" , and so I looked at your sidebar code -
<div id="sidebar_wrapper">
	<div style="background-color:#b20606; height:35px; width:50%; text-align:center; color:#ffffff; padding-top:5px; font-variant:small-caps; display:inline-block;">
		<a href="#" id="menu_toggle_option" style="color:#ffffff;">
		Continue Shopping
		</a>
	</div>
	<div style="background-color:#0687b2; height:35px; width:50%; text-align:center; color:#ffffff; padding-top:5px; font-variant:small-caps; display:inline-block;">
	Checkout</a>
	</div>
	<br><br>
	<div id="sidebar_content">
	</div>
</div>

Open in new window


and the CSS for some of that -
#sidebar_wrapper {
	z-index:1;
	position:absolute;
	right:0;
	top:0;
	width:0;
	height:100%;
	overflow-y:hidden;
	background:#ffffff;
	margin-top:76px;
	border-left:1px solid #cccccc;
}

#page_content_wrapper {
	margin:auto; 
	width:100%;
	height:auto; 
	margin:auto;
}


/*change the width of sidebar to display it */
.menuDisplayed #sidebar_wrapper {
	width:500px;	
}

.menuDisplayed #page_content_wrapper {
	padding-right:500px;	
}

Open in new window


I see that you have the id "sidebar_wrapper" as width 0, so it does NOT show, but I tried to understand the CSS for your #sidebar_wrapper , but most of it is not appropriate for what you are trying to do? ?
as if you use the  "position:absolute;"     then the use of "margin" is not appropriate, margins are use to "Separate" relative elements from each other, but in the absolute pos, you separate by changing the "top" or "right" to move the <div> where you need it, it is moves irrelevant of ANY OTHER element, an can be layered "Over" something else, so margins do not do the same as they usually do, so you may not need margin at all here. I also do not see why you set the height to 100% ?

you can show this  #sidebar_wrapper  with -
   $( "#sidebar_wrapper" ).css( "width", "331px" );

or animate it with -
$( "#sidebar_wrapper" ).animate({width: "331px" }, 534);
Bruce GustPHP DeveloperAuthor Commented:
Thank you, gentlemen!
Bruce GustPHP DeveloperAuthor Commented:
Guys, since posting this question I was assigned another project that had me becoming more familiar with JQuery and Ajax and I was able to get my page working thanks to that "baptism" as well as your comments.

Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.