I have some records from a database that are shown in table rows and columns.
I show this information in plain text. But I want change them to a text box whenever a user clicks them, and update the contents as the cursor is blurred.
I hope I could give my mean.
Is there anybody to help me ?
Here are references to sites and/or projects to help you accomplish your task.
http://www.mysqlajaxtableeditor.com/
http://www.phpclasses.org/package/3104-PHP-Edit-data-in-an-HTML-table-using-AJAX.html
http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html
If you are looking for inline editing, there are plenty of plugins available.
This one looks promising http://www.appelsiini.net/projects/jeditable (haven't tried it)
To turn the contents of a table cell into a test input:
//bind event handler to click event for all table cells
$('td').on('click', function () {
//cache this table cell in a variable
var $table_cell = $(this);
//add a text input with the text of this table cell,
//then select that text input, focus it (so the user doesn't have to click on the text box to gain focus),
//then add an event handler to the text input for the blur event
$table_cell.html('<input type="text" value="' + $table_cell.text() + '" />').children('input').focus().bind('blur', function () {
//run your code to update the text within this <td> element
//sent a POST request to your server-side script with the value of the text-input
$.post('path_to/server/script.php', $(this).serialize(), function (response) {
//here you get the response from the server and you can update the table cell
//if the response from the server is the new text for the cell then you can do this...
$table_cell.text(response);
});
});
});
Related
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.
There is a HUGE database of cities and other stuff in the system (locations) waiting to be driven out as a drop down list, div(s) or something what can compress huge amount of choices - instantly after every character of wanted location is entered into that input field.
Its similar like adding tags here when we are submitting questions. So if we enter "L" London and Lazio gonna be listed, after "La" - only Lazio will stay available.
Any steps or cool examples how to accomplish this? Tried to find something cool by myself but no luck. I'm using jquery.
This may be not the best sollution but it works on my site. This script implements street name auto complete, which depends on the state and city the user had entered before. This particular piece of code listens to the event "keyup". If user has entered more than one letter, the script launches ajax request in which .php script analyses the parameters we sent, makes SQL query and replies. If the user is lucky enough and he gets some suggestion for the street name he tries to find, we show him div with id=hintsTable. We also create event listener (click) for each auto complete option, in which we replace the value of input field for the one from auto complete option and hides the drop-down list.
I hope it helps.
$("#street input").keyup(function(){ //street enter
var input = $('#street input').val(); //we get what user has already entered
var code = $('#mregionSelect').val(); //city id
if(input.length > 1)
{
$.ajax({
type : "POST",
url : "components/com_areas/ajaxhelper.php",
data : "input=" + encodeURIComponent(input) + "&code=" + code,
cache : false,
}).done(function(msg){
if(msg.length > 0)
{
$('#hintsTable').html(msg); //fill drop-down list with auto complete options
$('#hints').css('display', 'block'); //show the list
$('#hintsTable tr').click(function(){
var hint = this.cells[0].innerHTML;
$('#street input').val(hint);
$('#hints').css("display", "none");
})
}
else
{
$('#hintsTable').html('');
$('#hints').css('display', 'none');
//$('#findButton').css('display', 'none');
}
})
}
else
{
$('#hintsTable').html('');
$('#hints').css('display', 'none');
//$('#findButton').css('display', 'none');
}
})
You could create a textbox with a div under
<input name="txtSearch" type="text" onkeydown="jscriptfunc();" autocomplete="off"/>
<div class="autoDiv"></div> (could use CSS to format the div accordingly)
Now the jscriptfunc for when the user presses a key down could be coded to call a PHP script with the help of ajax. This PHP script is taking whatever the user typed thus far and performing a simple pattern match search e.g.
Select * from table where field like '$input%' limit 5;
Then we just take the result and feed it into the div
I am new to Jquery and working on a small project with PHP, and Jquery. Below is on of the table cell. I would like to replace this cell with a text box and read the vale entered by user and bring back the original cell(replaced cell) with this new value. I am not sure how can I do this with Jquery.
Any help is highly appreciated.
<td><?php echo money_format('%.2n', $Cashup['actual_cash']); ?></td>
Thanks,
Bhaskar
I assume in your example you want to replace the a temporarily (you wouldn't want to replace the td, the table would go funny).
Here's a quick version:
$("#theTable").delegate("td > a", "click", function(event) {
var a, parent, input, doneLink;
// The `a` has been clicked; cancel the action as
// we're handling it
event.preventDefault();
event.stopPropagation();
// Remember it and its parent
a = $(this);
parent = a.parent();
// Insert an input in front of it, along with a done link
// because blur can be problematic
input = $("<input type='text' size='10'>");
input.insertBefore(a);
input.blur(doneHandler);
doneLink = $("<a href='#'>done</a>");
doneLink.insertBefore(a);
doneLink.click(doneHandler);
// Put the text of the link in the input
input.val(a.text());
// Temporarily detach the link from the DOM to get it
// out of the way
a.detach();
// Give the input focus, then wait for it to blur
input[0].focus();
// Our "done" handler
function doneHandler() {
// Replace the content of the original link with
// the updated content
a.text(input.val());
// Put the link back, remove our input and other link
a.insertBefore(input);
input.remove();
doneLink.remove();
}
});
Live example
That's not the only way you can do it, but it's fairly clear and simple. See the inline comments for description, and the docs (of course!) for details. Note that we use a closure for temporary storage of the detached link; for more about closures, read Closures are not complicated.
i create two input text fields , one for title and another for permanent link
i need to update the second filed automatically when user is typing the tilte
how can i do such a thing in jquery /php
somehow im looking for a way to simulate wordpress creation of permanent link in post section
$('#first_input_id').bind('keydown', function(e){
var inputmirror = $('#second_input_id');
inputmirror.val(inputmirror.val() + String.fromCharCode(e.which));
});
Something similar to this should do it.
Write a function to read from the current input, munge it however you like, and insert it into the other input.
Then bind that function to the keypress and change events.
You can intercept keyup event on the first input text, and then update the output of the second input:
$('#titleInput').keypress(function(e) { alert ('typed' + String.fromCharCode(e.keyCode))//update your 2nd input text...
}
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.