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 :)
Related
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 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.
I plan to make this commenting system where comments can be posted and updated without refreshing the page ( you can see this on youtube)
Posting comments is understandable ( post to php page from javascript and run SQL query on server side to import it, than return the comment and fetch in html )
Updating is the part I don't understand. How can I refresh the page automatically on certain intervals and add comments? Isn't that going to be a mess when multiple users try to comment at the same time?
I was wondering if anyone can recommend a good way ( just like word of advice ) to achieve this and save me some time
The most common way is to call setTimeout or setInterval in javascript to poll every 5-25 seconds. Basically, you store the idea of the last comment you received on the javascript side, then you call a function that sends this id to a remote server. If there are newer messages than this id, you send all of them back via XML or JSON (usually json is easier to deal with on the javascript side, especially if you use a framework like jQuery).
You can use "Long Polling". Basically it is a technique in which you open an Ajax connection and the server doesn't close until it has some response to send. The client upon receiving this response requests a new connection and waits again for a response.
You can check a tutorial: Simple Long Polling Example with JavaScript and jQuery.
Another really good way would be using a subscribe/publish service.
I'm using PubNub at the moment for Notifications, Comments ect..
I once used a simple technique (no timer used, no total refresh) with a flaw that it shows only new comments, but not edit and delete by others done to existing displayed comments. Be mindful that refreshing the whole comments panel may be unfeasible if you allow "expand / collapse / view more" comments. My simple technique is to have (i) a hidden input element to store the index/primarykey of the last comment displayed (ii) several uniquely identified divs to hold existing displayed comments and ajax refresh or html dom manipulation only that div when actions are performed on it (iii) a div to hold a view more comments button whereby the button will only be displayed if there are more comments to view.
Therefore, whenever a new comment is posted, "the view more comments panel with a button" will be refreshed saying view [X + (# recent new comments by others) + (# your new comment)] comments. Upon clicking the button, it will display 3 more new comments along with "view Y more comments" button.
I am attempting to make a registration-like page for a small forum. To register for an event, I simply want the users to click a 'link'. (It doesn't have to be a link, but I don't want it to look like a button, so fancy CSS is acceptable).
On this page there will be a limited number of openings per event. (Simple database query to populate this list). The users will then select one of the openings by clicking on it. At this point, I'd like that opening to close and the page NOT to reload (just the Div that link is in).
I know PHP/MySQL very well. Actually, DOING the insertion of the data is easy. What I don't know how to do is the clicking the link and not reloading the entire page but still showing that opening is now closed.
I've looked at jQuery. It seems to have the ability to do the autoreload. Can anyone help me out?
The insert in the DB will be the user's forum name (they are logged into the forum, I have access to that variable within my script). That is all that will get inserted into the database.
Look at the Ajax methods. To update the database you probably must do a $.post. Something like this will work:
$("#myButtonId").click(function() {
$.post(serverurl, $("myformId").serialize(), function() {
// This will be called when the post is complete
$("#mydivId").html('update html here');
});
});
Further to my question yesterday (here), I am working on a webpage that has a section that shows 'live' order details.
The top half of my webpage has Spry Tabbed Panels. One of the panels contains an include call to a separate php page that I have created (getOpenOrders.php). This contains an SQL query to obtain all open orders and then puts the details into a table.
As a result, the table of open orders is shown in the Spry panel. What steps do I now need to take to have this refresh every 15 seconds?
Do you really want to call the database every 15 seconds for each user? isn't that an overload?
I'm not saying that your database will be overloaded, but, thats how you shouldn't do things!
Edited
you should show an image, or the link to that page in order to gt an appropriate answer, because it all depends in what are you doing in the table.
because I don't know, I will give you an answer on what probably is happening.
Because you said that you're new to the ajax world, let's make things simple, and not to complicate on the you should return a JSON object and use it to re populate your table. :)
So we will start with 2 buttons (Previous and Next) so the user can move the data that is showing (you probably don't want to give him/her 100 lines to see right?)
let's say that you have 2 pages, a showData.php and getTable.php, in the showData.php you will need to load jQuery (wonderful for this) and add a little code, but where the table is to be placed, just add a div tag with an id="myTable" because we will get the data from the getTable.php file.
getTable.php file has to output only the table html code with all the data in, without no html, body, etc... the idea is to add inside the div called myTable all the code generated by getTable.php
Let's imagine that getTable.php gets a page variable in the queryString, that will tell what page you should show (to use LIMIT in your MySQL or PostgreSQL database)
You can use jQuery plugin called datatables witch is one of my choices, check his example and how small code you need to write! just using jQuery and Datatables plugin.
The first description follows the jQuery.Load() to load the getTable.php and add as a child of the div and wold do this for the previous and next buttons, passing a querystring with the page that the user requested. It's to simple and you can see the website for that, if you prefer to use the DataTables plugin, then just follow their examples :)
if you, after all this need help, drop me a line.
<META HTTP-EQUIV=Refresh CONTENT="15; URL=<?php print $PHP_SELF ?>">
This should be in between the head tags.
-or-
header('Refresh: 15');
This should be before the head tag and directly after the html tag.
As said by balexandre, a different method should be used. One that does not require a database hit every 15 seconds for every single user that is connected to the site. But, there is your answer anyways.
Although, balexandre makes a very good point, if you do decide that you need a refresh, you could simply do something like this in your JavaScript:
window.onload = function( )
{
setTimeout( 'window.location.refresh( )', 1500 );
}
(I've not tested the above code, so syntax may need to be tweaked a little, but you get the idea)