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...
}
Related
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);
});
});
});
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 am looking for a way to be able to start typing on a website without having selected anything and then have a specific input field in focus.
Google also employs this feature. In their search results you can click anywhere (defocus the search field) and when you start typing it automatically focuses on the search field again.
I was thinking about jQuery general onkeyup function to focus on the field, any suggestions?
Much appreciated.
You should bind the keydown event, but unbind it immediately so that typing may continue in other text inputs without reverting focus to the default input.
$(document).bind('keydown',function(e){
$('#defaultInput').focus();
$(document).unbind('keydown');
});
See example here.
The answer is as simple as this:
$(document).keydown(function() { $('#element').focus(); });
keydown is preferred after all because keyup will only be fired after the first key is pressed - and respectively not capture the first key typed in my search field.
This solution does not have the problem that #mVChr's solution has: Ie you can click on another input with the mouse and start typing without losing focus due to the keydown-binding.
Also this solution does not remove all the element's keydown-bindings, but uses a named handler instead.
var default_input_handler = function() {
$('.default-input').focus();
$(document).off('keydown', default_input_handler);
}
$(document).on('keydown', default_input_handler);
$('input, textarea, select').on('focus', function() {
$(document).off('keydown', default_input_handler);
});
If planning to do this I'd say use onKeyUp instead of onKeyDown. Its much earlier in the action which would help ease the flow of the interaction.
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.
Im looking for a way to have a form in cakephp that the user can add and remove form fields before submitting, After having a look around and asking on the cake IRC the answer seems to be to use Jquery but after hours of looking around i cannot work out how to do it.
The one example i have of this in cake i found at - http://www.mail-archive.com/cake-php#googlegroups.com/msg61061.html but after my best efforts i cannot get this code to work correctly ( i think its calling controllers / models that the doesn't list in the example)
I also found a straight jquery example (http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/) which does what i would like my form to do but i cannot work out how to use the cakephp form helper with it to get it working correctly and to get the naming correct. (obviously the $form helper is php so i cant generate anything with that after the browser has loaded).
I an new to cake and have never used jQuery and i am absolutely stumped with how to do this so if anyone has a cakephp example they have working or can point me in the right direction of what i need to complete this it would be very much appreciated.
Thanks in advance
I would take the straight jquery route, personally. I suppose you could have PHP generate the code for jquery to insert (that way you could use the form helper), but it adds complexity without gaining anything.
Since the form helper just generates html, take a look at the html you want generated. Suppose you want something to "add another field", that when clicked, will add another field in the html. Your html to be added will be something like:
<input type="text" name="data[User][field][0]" />
Now, to use jquery to insert it, I'd do something like binding the function add_field to the click event on the link.
$(document).ready( function() {
$("#link_id").click( 'add_field' );
var field_count = 1;
} );
function add_field()
{
var f = $("#div_addfield");
f.append( '<input type="text" name="data[User][field][' + field_count + ']" />' );
field_count++;
}
Of course, if a user leaves this page w/o submitting and returns, they lose their progress, but I think this is about the basics of what you're trying to accomplish.
This was my approach to remove elements:
In the view, I had this:
echo $form->input('extrapicture1uploaddeleted', array('value' => 0));
The logic I followed was that value 0 meant, not deleted yet, and value 1 meant deleted, following a boolean logic.
That was a regular input element but with CSS I used the 'display: none' property because I did not want users to see that in the form. Then what I did was that then users clicked the "Delete" button to remove an input element to upload a picture, there was a confirmation message, and when confirming, the value of the input element hidden with CSS would change from 0 to 1:
$("#deleteextrapicture1").click(
function() {
if (confirm('Do you want to delete this picture?')) {
$('#extrapicture1upload').hide();
// This is for an input element that contains a boolean value where 0 means not deleted, and 1 means deleted.
$('#DealExtrapicture1uploaddeleted').attr('value', '1');
}
// This is used so that the link does not attempt to take users to another URL when clicked.
return false;
}
);
In the controller, the condition $this->data['Deal']['extrapicture1uploaddeleted']!='1' means that extra picture 1 has not been deleted (deleting the upload button with JavaScript). $this->data['Deal']['extrapicture1uploaddeleted']=='1' means that the picture was deleted.
I tried to use an input hidden element and change its value with JavaScript the way I explained above, but I was getting a blackhole error from CakePHP Security. Apparently it was not allowing me to change the value of input elements with JavaScript and then submit the form. But when I used regular input elements (not hidden), I could change their values with JavaScript and submit the form without problems. My approach was to use regular input elements and hide them with CSS, since using input hidden elements was throwing the blackhole error when changing their values with JavaScript and then submitting the form.
Hopefully the way I did it could give some light as a possible approach to remove form fields in CakePHP using JavaScript.