Creating a span in an input field like Facebook messages - php

All,
I'm trying to create the same type of functionality that works with the Facebook messages. I'd like to basically have a list of spans (i'm guessing they do something like that) in an input textbox followed by the little to close it out.
Does anyone know how to create something like that?
Thanks in advance!

It's the tag and autocomplete textfield. You might want to check the plugin called chosen:
http://harvesthq.github.com/chosen/
or, this plugin, I think it's more relevant:
http://textextjs.com/

It's not actually an <input>. It's actually a list <ul> with a leading <input> for typing. Whatever you type, it appends to the list behind it, depending on the auto complete options.
there are several attempts to do this, found here:
http://ajaxian.com/archives/facebook-style-input-box

Related

arrange data into special manner (3 in a row) with a show n fields button

I want to display my data coming from sql db to front end. I want it to be displayed in some special manner.
Lets assume I have 8 element in total. I want to display only 3 data field at first in a row, and below that a message saying 'show remaining 5'.
Once someone click that another three should load and below a message would show 'show remaining 1'.
I am not asking for a ..read more type option. I want to display remaining data into segments, but not all at once. If anyone can guide me, what can I use or if there is any useful plugin, I am already grateful.
Thanks in advance for anyone who put some effort.
This sounds like something that would be done by JavaScript. This means building the whole table right away, but hiding all but the top 3 rows. Then hook a function to the "Show three more" button, that displays three more rows (until all is shown).
jQuery is a JavaScript library that is easy to get into and would help you get this kind of functionality going, but it is of course entirely possible to do without it.
If you are entirely new to web development with php, sql, html, and javascript I suggest looking at basic tutorials on how to accomplish the basics first, such as fetching data from a db, displaying that in html and how to modify the DOM with javascript.
You need to provide more information, but im gonna answer according to what i understood.
First you need to put the data in a table using <table><tbody><tr></tr></tbody></table>.
Then you can hide the other 5 data fields using css, you can use visibility: hidden or display:none.
Then you can display a message using bootstrap alert class thats says 5 other fields remaining.

How can I capture a form textarea value in WordPress and insert into mysql?

I see all sorts of people asking this but no solid answers. I want to take text from a textarea form where users can enter their bio and then insert it into the bio field in mysql. This might be fairly easy normally, but alas, it seems nearly impossible with WordPress. I have to use the "Php for posts and pages" plugin and for some reason, the php script I have cannot be found (404 error) no matter where I place it. Then I thought I would try to just make the form and php all on one WordPress page, but it apparently can't be done like on a normal php web page. Anyone have any experience doing this? Any approaches that are known to work?
You can make form using normal php and insert it into mysql.
You can do this by making page template in wordpress.
http://codex.wordpress.org/Page_Templates
I've went through the same process! :)
My solution was:
Installing a PHP insertor plugin (specifically this). It's lot easier than creating a template.
I used it like this (inserted into the post's source):
[insert_php] include('myphpfile.php'); [/insert_php]
Then the included PHP's contents will be processed and printed out inside the page's body (the article's main part), so you don't have to create the html, head and body tags.
Then came the problem with posting form data to a page like this. This was because some of my form's fields kinda conflicted with WP's variables.
Some of the conflicting field names I've noticed: info, name
Just have a look at your form' field names and replace them to something else, and everything will be fine! :)
PS.: It's possible to put the form and the form data "receiver" in the same PHP script. I've done so and it worked in this scenario.
PS. 2: Optionally, you can disable the annoying auto-paragraph-insertor wpautop stock WP plugin, as it's affecting the included PHP's output. There is a per-post wpautop disabler plugin: Toggle wpautop

Javascript .Append() and Dynamic Hidden Fields?

I want to create something where you enter text into a text box, and when you press enter or a button it changes a section of words below to match what you entered into the text box... i have heard it has something to do with the stuff in the title but have not been able to find anything close to what i need to do with it, and all the tutorials i could find didn't make sense and still didn't solve my problem even if it did make sense... Can anyone help me in terms of giving me a good link or showing me sample code that is like this? Thanks!
$("#divid").append($("<div />").text($("#inputid").val()));

Editing information from a MYSQL database from website frontend.

I wonder is someone can help, I'm building a website, which is driven from a database. It will consist of user submitted information.
Currently all the information is pulled from a record in the database and is being output via a PHP echo, what i would like too do is add a feature that would allow me to edit the information if incorrect from the websites front end.
I have seen many websites have some form of edit icon next to information in there databases, when clicking this icon the echoed text changes from text to a text field and you are able to update the field being echoed from the database.
Im a designer so have limited knowledge of how functionality for this kinda feature might work.
please could anyone let me know how something like this might be achieved.
many thanks.
You would need to build some kind of javascript functionality to allow the in-place editing of those data bits. One possible solution is a jQuery plugin like jEditable.
Then you need to build a server-side script in something like PHP or ruby where it would take the submitted information and update the database.
well the process is the same for the front-end and back-end. it depends whether you want you build a password protected editable forms or just editable for everyone.
One way you can do this is
echo your information into text inputs
give them a css class that removes the border and makes it transparent
make it readonly(so someone couldnt tab into it and change it)
add a javascript onclick event that changes the class to a normal
text box that is not readonly
add a javascript onchange event that uses ajax to save the new
information into the database when they are done typing, or press enter
after the ajax is done turn the text box back to the first css class
EDIT also add a onblur event that changes it back as well
you could even change the cursor for the text input to a pointer instead of the default (text) cursor so that is looks like you can click on it.
.
now html5 has contenteditable attribute which you can set for elements
simple example:
www.hongkiat.com/blog/html5-editable-content/
simpler demo:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable

form review after submit with symfony

With symfony, I use widgets to display a form.
Once everything is filled and validated, I land on a "review" page where all the information the user entered appears as text (<span>). To do this, I created a formatter (instead of table, I called it "review"). The formatter spits out <span> instead of <input>
It works great for basic inputs, but when it comes to Choices, or Dates, it's not working super great... I feel there is another way to have a review page without having to write a whole page just for this?
Any ideas?
Unfortunately, I find it sad that there is no concept of displaying the data already posted on a page with Symfony.
Using getValues() to recreate the whole UI with the same exact design with the exception of using <span> instead of <input> doesn't keep the code DRY at all...
I decided to create a formatter as I mentioned in my question with adding some "if" clause to make sure everything displays correctly.
You could adjust your formatter to handle other types of form elements, or you could try using some type of lightbox before the form is submitted. But in the end, I'd just go ahead and write that extra page. Everything your trying to do sounds so much more complicated than just a separate page.
I find this approach such a hassle. Why don't you pass the result of $form->getValues() to the view and output them however you want in the template?

Categories