jQuery, PHP - How to make a 'Get started' popup box - php

I'm trying to create one of those pop-up boxes you'll get the first time you log in to my website. I wan't this to have some 'Get started' articles, FAQ and so one.
But I can't figure out how I would make this happen? I would like to create it in jQuery and PHP.
But should I have a row['getStarted'] in my database set to 0 or 1, and then display the popup box if it's set to 1? Or is there a better way to do it?
And I've also been looking for how to change a row in the Database, with just a simple click on a button like: "Don't show me this again". I've figured out I need ajax, but how would an action like this look like?
I hope to get some links or a way to get started.

You will need jQuery and PHP.
But should I have a row['getStarted'] in my database set to 0 or 1, and then display the popup box if it's set to 1?
Yes you should do exactly that. Maybe in the 'users' table.
This is an example, I didnt test it but it should work.
Its just to show you in 3-4 steps how its done.
MySQL table -USERS
id UserID FirstName Popup
1 7804 Peter 1
2 5874 Lois 0
3 9875 Joseph 1
Html
*//An element (image/button/what ever) with the class "No_popups_for_me"
//and a pseudo element named UserID*
//Here you can check before displaying the element if the user has popup enabled.
<?php
include ("connection.php"); //Your connection settings to MySQL
$activate = "SELECT id from users WHERE UserID='".$VARIABLE_CONTAINING_THE_USER_INFO."' AND Popup='".1."' ";
$activate_src= mysql_query($activate);
if (mysql_num_rows($activate_src)>0) {
echo '<div class="No_popups_for_me" UserID="'.$VARIABLE_CONTAINING_THE_USER_INFO.'"></div>';
}
?>
JavaScript
//User clicks the button to disable popups.
$('.No_popups_for_me').click(function(){
jQuery.ajax
({
type: "POST", //method used to send data
url: "./update_users.php", // which file to call
data: { UID:$(this).attr('UserID') }, //Grab UserID from the html element, store it in a var named UID
cache: false
}
});
PHP
*// file update_users.php*
<?php
include ("connection.php"); //Your connection settings to MySQL
$current_user = intval(trim($_POST['UID'])); //Get the data ajax send via post
$disable_popup="UPDATE users set Popup=0 WHERE id=$current_user"; //Update SQL
mysql_query($disable_popup) or die ("Error10.25");
?>

What I will do, is to have a "last_login" attribute in the user table.
if row["last_login"] is NULL, then it's first time login.
if it is a timestamp, then it is not the first time.
And obviously you need to update this attribute every time the user login.
The other reason for me to have this attribute, is to keep track of the active users.
for the AJAX, I recommend to use the Bootstrap, A css&js framework build by Twitter.
The Modals plugin fits your needs perfectly.
http://twitter.github.com/bootstrap/javascript.html#modals

Related

Get DB content into dropdown and show DB info from selected dropdown

My problem is that i have 2 dropdowns that get its content from my DB, a simple SELECT * with the category and then select a item from that category.
First dropdown : "dropdown_type" is the category.
Second dropdown : "dropdown_abo" is the item.
At the second dropdown, i am using a JQuery pluging that makes it possible to search inside the dropdown, to get the item faster then scrolling (theres gonna be a lot of items in it). You can see the plugin here
When you select a item from the second dropdown, a div(abo_info) below shall show all the info of the selected item.
My problem is that I'm stuck, and don't know how to proceed. How can i make it so, when i select a category, and then an item i get the content from that item shown in the div below?
I'm using PHP, JQuery and Mysql_*(to DB connect, know about PDO but im not that good at it).
Can i please get some help here, or some examples on how it can be done?
I have made a JSfiddle so you can see the complete code
You seem to be headed the correct way and doing a good job of it.
Please proceed further by using the following steps as a guideline,
Using jQuery.ajax() or jQuery.post() you can basically send a request to a PHP file.
In the PHP file you can connect to your DB using either PDO or normal mySQL connectors and return your required data back to the AJAX call.
The returned data can be rendered and displayed as required at the HTML sections.
Please use these following references that can give you a better idea code wise:
Beginner’s Guide to Ajax Development with PHP
jQuery Ajax POST example with PHP
as #WisdmLabs mentioned, you are on the right track...
The steps to continue shouls be:
Add a JS event once both dropboxes were selected (using onchange() or a submit button)
The event will fire an AJAX request for a PHP file with the POST
data of the item you want to get the data for.
On the PHP file you will run your SQL query and send back the information needed- preferable as in json.
On the JS AJAX function you will get the Json object and inserted neede info into the page DOM
JS Code
$(".dropboxClass").change(function(){ // you can use a button instead or any other event type
// here you can first check that bothdropboxes were selected
// now get the values of the dropboxes
drop1 = $("#dropbox1").val();
drop2 = $("#dropbox2").val();
// run the AJAX request for the PHP file
var request = $.ajax({
url: 'test2.php',
dataType: "json" ,
method: "POST",
data: { d1: drop1, d2:drop2 }
});
request.done(function(itemData){
// here you will get the Json object , get the data you need and insert into the DOM
console.log('Status:' + itemData['status']);
console.log('Name:' + itemData['name']);
alert('success');
});
request.fail(function(){
// AJAX call failed - do something.....
});
});
PHP Script
// connect to your DB and get the data you need into an array
$DB_data = array(
"status"=>"code",
"name"=>"item Name",
"desc"=>"Item Description"
);
echo json_encode($DB_data);

Php and MySQL: retrieving data from a database based on the link a user clicks

I've put a set of small images to function as links (around 50 more or less) on a page. In that same page I have a content place holder to display data from the database, and I have a table saved in phpmyadmin that has a set of fields filled with data.
What I want is when the user clicks on a certain image link, the data related to that image gets retrieved into the site. So I want the data to be retrieved to match the image clicked.
I know how to retrieve data from a database using the binding pannel in dreamweaver, and I know this has to do with filtering the data retrieved but I don't know how to do it.. How can I make this process work?
If it helps I'm also using Jquery CSS and javascript in this project.
The project looks like this:
http://i725.photobucket.com/albums/ww256/flower1991a/world_zps26b7083d.png
HTML code:
it doesnt show I took a screenshot of it:
http://i725.photobucket.com/albums/ww256/flower1991a/a_zpsa138aa52.png
jQuery code:
$(document).ready(function() {
// begin Ready
//...................................................
// When the form changes
$('#mapForm').change(function() {
var selectedContinent = $('#mapForm option:selected').val();
if (selectedContinent == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000);
$('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
}
});
//...................................................
// When a dot is clicked
$('a.dot').click(function(){
$('a.dot').removeClass('selected');
$(this).addClass('selected');
var city = '.city_detail#' + $(this).attr('city');
var htmlCode = $(city).html();
$('.detail_container').fadeOut(500, function(){
$('.detail_container .city_detail').html(htmlCode);
$('.detail_container').fadeIn(500);
});
});
// end Ready
});
You need to create a PHP script which takes a REQUEST variable parameter depending on the image that has been clicked, and which returns the data for that image.
You can then make a call to that PHP script via AJAX and populate whichever area of the page you want to with the data retrieved.

Delete DB row on back end with <a href></a> on front end

I have a row of links like this:
Delete | Votes (2) | Comments (1)
They are each associated with user posts.
My question is on Delete:
All I want user to do is click it and then this needs to happen on php side:
<?php
$reviewId = $database -> escape_value(trim($_POST['reviewId']));
$user_id = $database -> escape_value(trim($_POST['user_id']));
// Delete Review Method
$result = Data::deleteMyReview($reviewId);
?>
My questions, what is the most efficient way of writing the code for Delete?
I don't really want an entire form for that one word. But then it also seems like a security issue to continue with the Delete approach. Then anyone can delete user comment by altering the url.
So should I use Post vs Get and Form vs <a>?
Using a form with the post method seems more appropriate for a delete action. I would have a separate form for each row, containing a hidden input with the ID and a submit button. A single form would work but you would have to have some Javascript to set the ID when each button is clicked.
A form is no more secure than a link. To make either way secure, you need to verify that the current user is authorized to delete the target review. For example, check that he owns the review. This should be done right before the delete code is executed.
It's fine to hide the delete button for reviews that don't belong to the user, but you should not rely on that for security because anyone can post a form and set the review ID to delete, regardless of what you were hiding and showing on the page.
You can use an <a> element and still POST the data. For example, using jQuery to perform an AJAX post:
HTML:
Delete
jQuery:
$(document).ready(function(){
$('.delete-review').click(function(){
$.ajax({
type: "POST",
url: "thispage.php",
data: { reviewId: $(this).data('review-id'), userId: $(this).data('user-id') },
success: function(data) {
//Do whatever you want to do when the delete succeeds such as redirect to another page
},
error: function(jqXHR,textStatus,errorThrown) {
//Handle your error here
}
});
return false;
});
});
As stated in my comments, for security concerns, you definitely need to validate the data before performing the delete. Don't trust it just because the delete option should only been seen by a valid user and you're using POST. Always validate.

change a field value of database table on button click

Is there any way to change database field value on button click using PHP,HTML, Javascript?
What I need to do is, I have a list of layouts from database and displaying in a webpage. I need to add one button for each layout. When I click a button of one layout, it will be the active layout and the database field called 'active' should be changed to 1. All other value of 'active' will be 0. SO that user can select one active layout at a time.
Is there any simple way to do this? Any tutorial or example?
Thanks!
Yes. you should use an ajax call with Jquery.
First include the jquery on your header template. Don't forget that (I always do).
Let's say that for the first active layout
you have
...
switch one
...
after the table you will make a
<script>
$("activeOne").click(
function()
{
$("activeOne").fadeOut("fast",
function()
{
$("activeOne").load('get_page.php?act=switch_one','',
function()
{
$("activeOne").fadeIn("fast");
}
);
}
);
}
);
</script>
I hope you understand what I'm saying.
1. for every layout you have an ID.
2. for any of that IDs you have a script that calls a get_page.php with an parameter called switch for you layout
3. now, for the php function that does that... you either check if it is inactive and you make it active (or check if active to make inactive) ...either you send another parameter with the status you want to set.
Hope this is useful... I used exact same tehnique for exact same problem.

What is the best way to go about creating a page of stickies with savable and retrievable content?

I have had a look at sticky notes with php and jquery and jStickyNote, and while both seem to look pretty nifty they lack some elements I am after. I haven't been able to find a way to allow particular users to modify the stickies they create, nor have I found a good way to save their stickies into my database. I am, and would like to keep using php, mysql and jquery. I have thought with the first link that I could just save the image created into a folder and save the url into that database but then I cannot go back and allow the user to change the content of the sticky. With the second link there does not seem to be support for saving the sticky at all. I'd also like to create a function where adding stickies to a message board (for everyone to see) does so in a randomly placed way that looks natural. Any ideas for either of these problems?
Here is some javascript that should help:
// Called when the edit (A) button is pressed
function edit(event, editButton)
{
// Get existing title and change element to textarea
var stickyTitle = $(editButton).parent().find('p.stickyTitle');
var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
$(textareaTitle).text(stickyTitle.html());
// Get existing description and change element to textarea
var stickyDescription = $(editButton).parent().find('p.stickyDescription');
var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
$(textareaDescription).text(stickyDescription.html());
// Create save button
var saveButton = $(document.createElement('div')).addClass('jSticky-create');
// Add save button, then replace title, then replace description, then remove edit button
$(editButton).before(saveButton);
$(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
$(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
$(editButton).remove();
// Set description textarea focus and set button actions
textareaTitle.focus();
setActions();
}
// Called when the save (tick) button is pressed
function save(event, saveButton)
{
// Get existing title and change element to paragraph
var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
var newTitleValue = textareaTitle.val();
$(stickyTitle).html(newTitleValue);
// Get existing description and change element to paragraph
var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
var newDescriptionValue = textareaDescription.val();
$(stickyDescription).html(newDescriptionValue);
// Create edit button
var editButton = $(document.createElement('div')).addClass('jSticky-edit');
// Add edit button, then replace title, then replace description, then remove save button
$(saveButton).before(editButton);
$(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
$(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
$(saveButton).remove();
// Set button actions
setActions();
// Add the object to the ads div
$('#ads').append(object);
// Update your database here
// by calling the saveAd.php
}
function setActions()
{
// call these after changes are made to anything
$('.jSticky-create').unbind('click').click(function(e)
{
save(e, this);
});
$('.jSticky-edit').unbind('click').click(function(e)
{
edit(e, this);
});
$('.jSticky-delete').unbind('click').click(function(e)
{
remove(e, this);
});
}
function remove(event, deleteButton)
{
var stickyMaster = $(deleteButton).parent();
$(stickyMaster).remove();
//then call savead.php with delete parameter
}
Have you looked at any of the code? I took a really quick look at jStickyNote.
Basically, the "sticky note" is a css-styled, text area (that is surround by a div element).
If you want users to be able to save sticky notes/edit past notes, here's what I'd recommend:
Add some button to each note that says "Save" or with a similar meaning.
When a user clicks the "Save" button, you'll need to grab the text from that specific textarea element and then save that text to a database.
With that said, you'll probably need to design some sort of database with a user table and sticknote table. The sticknote table can have a foreign key to the user table.
You'll also want to add some sort of login functionality to your site and then load the correct sticky notes for the authenticated user.
Good Luck!
You can have a look at http://sticky.appspot.com - the code has been released by the google appengine team.
Sorry for not going into specifics, but you could modify the plugin code to load a php script whenever a save button is clicked (or the box is moved, or even on keyup) with $.ajax(), passing it the horizontal and vertical positions and content of the note ( say, $("#note-content").text() ) and have the script plug those things into a database with a MySQL query. Just serialize your data and send it away. This gets more complicated if you want let your users have multiple notes, but start with one. Where is you hangup, exactly? I would be more specific, but I'm not sure what you already know.
I was thinking earlier about adding this feature to an app I'm working on. The thing is, I don't like those plugins. It should be very simple to write your own though. Let me know if you need help with something specifically.

Categories