I don't think I asked the question very well, so let me elaborate what I'm doing.
I'm building a simple website for a project my niece is working on. She wants to implement a ticket ordering system for their class graduation (this is all just for the project, it won't actually be used for anything in a production setting). She wanted a "map" of seats available and a way to distinguish seats that have been sold and seats that are open.
My vision for implementing this is creating three tables, one for each section. I'm using PHP to build the sections, and at the moment they contain an image that indicates if the seat is taken or not that is wrapped in an anchor tag that points to the same page with the url:
<a href='index.php?section=$section&row=$i&seat=$j' class='order'><img src='open.png'></a>
So my grand plan was, when they click on the image for a particular seat to have a modal dialog pop up that does one of two things.
If the seat is already taken, it will simply display the buyer's information. If the seat is not taken, it will contain a form that will allow the user to input their information and submit it, which will then write to a MySQL database table that stores this data.
I was using the jQuery UI dialog for modal forms (http://jqueryui.com/dialog/#modal-form) to accomplish the modal dialog before I tried adding the index.php?section= etc to the anchors, and now that I've added that part it flashes up the dialog but then the page refreshes and the dialog disappears.
My question is, is there a way to store the section/row/seat information in the anchor in such a way so as not to refresh the page when it's clicked on? Could I add some code before the HTML tag on index.php to handle when the anchor has been clicked? The last time I worked with PHP was several years ago and I'm very rusty and not certain how to tackle this problem.
You need to cancel the click event. That is, tell the browser to do some Javascript work (like open a dialog), and then cancel the click so as not to load a new page. Most simply, you just return false in the onclick event.
<img src="...">
or better yet, you could invoke the dialog from the onclick event
<img src="...">
A better implementation would be to make each seat a "button" (you can change the UI accordingly) and use AJAX to 'submit' a button click.
Related
I have the beneath page and when i need to enter another education background so i enter it in a html base.
http://i.stack.imgur.com/6mnA7.jpg
As i am newbie in PHP so i need help in this regard.
I wanted to ask that is there a way to make it dynamic i mean when i click on that plus sign then a form form should come the first row without refreshing the page and by clicking on submit button it should save to database and come to the first row.
Like stackoverflow.com comment section.
You would need to use preventdefault on the event object.
Please check here for further clarification..
This may sound vague, I apologise for that. But I can't seem to find anything or anyone that's trying to do the same as me.
Although, I've just seen How to trigger open a jQuery UI dialog from a separate page? but I'm not sure that would strictly work.
I have a single profile page for members with the data driven by an XML feed. On the profile page is a link that opens a jQuery dialog box. This is working fine.
Elsewhere on the site, is another page that generates a list of members depending on a filter, with a link to that users profile. Also on this other page, with the list of members, is a duplicate link to the jQuery dialog box.
How can I make this duplicate link go to the profile page and automatically fire the jQuery dialog box to open?
My way to do this is to use Hash part of URL
for example your URL to profile from other page should be like this
profile#showdlg
and in profile page
var hash = window.location.hash.substr(1);
if(hash == "showdlg"){
//Show dialog here
}
And this should do the trick
You cannot (should not) directly trigger some script action in a page "to be loaded in future". Instead the trigger should be part of the page itself.
So if that profile page is generated in a dynamical way an approach would be to implement a conditional feature that adds such trigger (like using jquery to fire the dialog when the dom tree is ready, there are millions of examples for that). The condition would be whether the profile page has been called via such a special reference or not. You could detect that by looking at the HTTP-REFERER. So it boils down to: if called in a specific way, then add a 2-lines-of-code trigger to the profile page that initially fires the dialog.
To answer your comment below here some more detailed description:
There is not much coding involved. The links reference the users profile pages. The profile pages are generated by php I assume. So all you need to add is one detail: inside php check if the request currently processed has a certain referer it was raised from:
<?php .... if ('other_page.php'==$_SERVER[HTTP_REFERER]) { ... } ... ?>
If so you know that the profile page was called from that other page instead of the normal situation, so you want the UI dialog to fire by itself. For this you add a tiny javascript to the generated page which does the trick as soon as the page has loaded:
<script>$(document).ready(function(){$('#mydialog').raise();})</script>
The details obviously depend on what type of dialog and how it is raised. But you should get the idea of what I suggest...
I'm creating a Purchase Order form in PHP and Fancybox and I'm having a hard time making a UI wherein inside a page the user can select a supplier and then after that a hyperlink will appear that will allow the user to add an item and once clicked another modal window is shown where a form containing the list of items are displayed as well as the quantity.
I was already able to do all the php coding correctly my problem now is that once I open the first Iframe the second Iframe becomes very small(which is what is expected because of the script 'width' and 'height'). Is there a way to work around this?
I already know how to get back to the previous iframe, I did that by adding a submit button with a form action="mypage".
Sir/Ma'am your answers would be of great help. Thank you.
I would like to add an option to an existing PHP page that invites users to participate in a survey - I've seen similar invitations appear on sites that I've visited in the past but have never had to build one myself. The invitation will be a hovering popup that appears on top of the current page with an option to participate which goes to a new window/page and an option to decline which simply hides the invitation. This survey will only run for one week so I can easily remove the code after 7 days but it also needs to detect if the user has previously visited this page and not dislpay the invitation again.
I assume it will use cookies to detect if they've seen the invitation previously and JavaScript with a DIV to display the invitation. I'm looking for any examples/code that shows how to do this in a PHP page so I can implement this on my PHP page.
Many thanks,
Steve
The easiest way to do this would to be with JavaScript and I use jQuery to do my javascript. So you would create a div as you would want the survey to look like so:
<div id="idOfDiv">Style this and do what you normally would</div>
Then in your CSS put:
#idOfDiv { display:none; }
Finally for jQuery you can use the following snippet to get it to show:
$("#idOfDiv").fadeIn();
//You can add a time in the parenthesis of fadeIn in milliseconds
//to speed up or slow down the div loading
If you want to keep track if somebody closes it and lets say you have a close button with an ID of close you can do this with jQuery.
$('#close').click(function(){
$.post('location/of_file/to_set/cookie.php',function(data){
//If you want to have a confirmation message or something put this here,
//for after the cookie gets set.
});
$('#idOfDiv').fadeOut();
});
and in cookie.php just have:
<?php setcookie('noSurvey','true',time()+5000000,'/'); ?>
And finally on your page where you have the div for the survey message just put:
<?php if(!$_COOKIE['noSurvey']){ /*put div here */ } ?>
That will allow you to only show the message to people who have the cookie and you can set the cookie without ever leaving the page. Also on the survey page once they've completed it you would probably want to set that same cookie so they don't do it again.
Hope this helps,
Jeff
Edit also you will want to work on your acceptance rate if you want more people to answer. That acceptance rate is proportional to the amount of answers you get :)
this thing is driving me nuts. I'm working on a personal "for my own fun" project involving a quite long sign up form.
What I want to do is to split the form into sections grouping the fields that are relevant for each step, and the ability to navigate back and forth before pressing Submit, which check marks or something to indicate which step is complete or not. I've found some examples around but they don't really fit into my design and can't get around to modify them exactly how I want.
I was aiming at something similar to the slide show in forum http://forum.xtreamer.net/, with the progress bar at the bottom and the clickable steps. I would like to do something like that but for the steps in a form.
Any ideas of where should I start? I tried to look at their code to see if they use a public or commercial (but third party) jquery plugin but no dice.
Anyone can recommend a tutorial or some resources?
Thanks!
I just designed something similar recently using jCarousel. it is a jquery plugin that allows you to easily scroll to certain positions, or ids on the page.
What we did was create a long horizontal page with several divs floated to the left. Each div contained a step or two, and had forward and back buttons at the bottom. When you click the next button on a particular step, it would quickly slide away and then next one would slid in
In addition to this, there were absolutely positioned buttons at the top that could take you to each step individually.
Here is an example of the individual navigation to go back and forth:
<div class="nav">
<a name="1" onclick="$(document).scrollTo('#1',3000);" style="float:left;">← Back</a>
<a name="3" onclick="$(document).scrollTo('#3',3000);" style="float:right;">Next →</a>
</div>
The #1 and #3 are ids of the prev, next steps -- this code being taken from step 2. 3000 is the milliseconds to scroll to each particular part of the form. 3 seconds is a bit long, but we had some animated images between the steps to make the form a little more fun!
Hope this helps :)
I think you trying develop a form in which user finish personal details and on click go to office details then on click go to address details and at last submit.
Try to use jquery show() hide()
There will be three divs.
when on click you show one div , hide other two divs.
there should be validation in each divs and on completing one details there should be some hidden flag to check that details is completed.
On the final details before submit you should check the flags for each div.
As you are trying to give option to come back to the first div , user can empty details of first and go to final. So this flag check is must
Should work !!!