i am new to jquery.I looked to various demos but can't find what i am looking for.
I have a button.I want to add a functionality in which button Onclick would open a modal form through which a user can upload various details about a particular item like it's name,size,colour,brand,cost,images,description.
After filling the details these various fields will be stored in a mysql database using a php file.
I want to make this custom dialog form on the same principle as the form on jquery website.
http://jqueryui.com/dialog/#modal-form
I tried making a custom dialog form using the example in the above hyperlink but not being able to create one..
Please help.
The example on the page you linked is created by using jQuery UI, if you click the "view source" link on the page, it will show you how to do it (how it is created in their page).
I would suggest, though, to use a modal that would be easier to implement for a new user, fancybox, for example as it has clear examples on how to implement on their site and it will get you up and running much faster.
you have to use the UI pack for this , else you can do this by creating j query simple calls
1. onclick show form
2. on save send a ajax call
3.after saving record the function you have generated to fetch records from db call it, it will display the updated record from db.
i personally suggest you to make it your self for better understanding for work its just simple and easy
if you use UI then you have to make changes to it for as your requirement and that's also too easy.
Related
I am customizing a theme and a plugin in Wordpress. The plugin has a button where a user can click to bring up a form where they can ask a question. I want users to use post questions through this button on this plugin, but I don't fancy the visuals on it. So I thought I'd make a form on my landing page that will post into the plugin's form. If this is a terrible idea in the long run, please feel free to let me know because I am still new to web dev.
So the goal is to create a new form whose aesthetics are to my liking but still use the plugin's built in posting capability. How do I make my form paste into the plugin's form and then submit it? You'll notice that my form has 1 additional field: the add money field. I also need to integrate this into the plugin. If anyone know how to begin modifying the code for this I'm all ears to anything I need to start reading or a general way of how to approach this.
My form
Plugin's form
Summary:
Need to have my form paste to plugn form and submit
Need to add a field to the plugin code that my form can post to similar to how the other fields will do do
You can post from a different form if you get the destination URL or javascript that is handling the original form post. You can use the debugger in Firefox or Chrome to inspect the page contents to see how the form is handled.
Adding the money field will be more complicated because you will need to update the server side handling to accept the additional parameter so that it is not simply ignored or causing errors. How much work this is depends on what the server has to do. It may involve adding a column to the database or creating a new table which you will likely want to do the wordpress way if you want to have something that is maintainable.
Lastly keep in mind, that every time the original plugin is updated, it may bust your add on code unless you create your own plugin from the original.
I have an application in which I display a form so a user can search for client records based on last name. After entering search parameters, the record or records (there could be multiple clients with the same last name) are displayed. I then want the user to be able to select a client record, possibly with a radio button, and hit one of two buttons: Display details, or Create Reservation. The Display Details button should cause a new display with details of the selected record. The Create Reservation button should cause a new form, with its own handling, to be displayed.
Now, I know I can set things up according to this login
<?php
if (display button was pressed)
{
php code to retrieve more data and display details
}
else if (create reservation button was pressed)
{
php code to generate and display the reservation form, with appropriate handling
}
?>
display the original form with the search results
The problem is, I end up with really ugly, hard to read code because the php code to generate and display the reservation form is lengthy, and needs its own validation, database interaction, and form handling. The code, to my Java-oriented eye, looks ugly and non-modular. Plus, the code for handling the reservation form is icky, with lots of flag setting to determine if we are in form entry mode or form handling mode. I would like a much cleaner way to do this. So my question is, what is the best practice for handling the situation where there are multiple buttons and the action associated with each button is complex?
I could call a function, obviously, but I still end up with the ugly flags determining which state the script is in (are we displaying the reservation form or handling it?). I could create another php file and include it, but the ugliness persists. Or, I could use header, and pass the client record id in a session variable to the new php script. But that would mean a second, unnecessary retrieve from the database to get the client information again.
All the code examples I see on the web show very simple processing after a form button is pressed. What is the best way to do complex processing and displaying a second form based on a button press?
Have you considered using a framework like Laravel for your site. It would seem to me that you must be doing this "manually". With the complexities you described, having a system with routes and "build-in" functionality (like Eloquent ORM) might serve to simplify things for you.
I would go for using ajax and a rich jQuery plugin (or some other framework) to do what you want.
Basically you will handle lists and the functionality that you mentioned with the php reading data and jQuery scripts to dysplay it. And the information that you have to show would be through ajax. Or when you want to edit.
Here is a cleaner example of what you need:
http://jqueryui.com/dialog/#modal-form
I'd like to create a custom field in Drupal 7. This field should have a textfield and a button, when the user click on the button, it open a popup which load an external page, this page generate a link. Then the user copy and past this link in the textfield.
My question is, how can I create this custom field which open a popup window ?
Any suggestions?
Have you tried using Colorbox for building modal ajax dialogs? You could put
the necessary fields inside the popup. It is working, and it is also easy to understand.
There are also other modules available like Modal Frame API, Chaos tool suite, Popups API, etc.You can find a lot of modules needed for your purpose.
The following links might help you:
https://drupal.org/project/colorbox
https://drupal.org/project/popups
https://drupal.org/project/modalframe
I am building a page with a button which opens a popup and allows to create a new record in MySQL table. Now I would like to refresh part of the parent page with summary results after the popup window closed. Could you please let me know if there are any examples or sample code? I gooled but couldn't find any example. Thanks for your help.
Are you using any JS lib?
Assuming you are using jQuery + jQuery UI for popup, you can look at jQuery UI modal form example (one note - there is no ajax used, but it's fairly simple to do so).
Idea is simple, bind to onClose popup event, serialize form, submit, and insert recived data into page content.
I guess you will need to call javascript function of parent which will change a particular div based upon your requirement..
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