how do I load partial pages in lightbox using ajax? - php

thanks for coming in and looking at my question.
I have a page that has a bunch of dynamic a tags with ids like aTag1, aTag2 ans so on.
now I need to make these tags open the same lightbox that initially loads a partial page named register.php,
and the user will fill out the form, sumbit it then go to another partial page named payment.php and go on until the registration and payment are all settled.
this process needs to be done using ajax.
I think this should be relatively easy if appropriate ajax plugin is used.
Could you please advise any plugins and tips?
Thanks a bunch!

Check out jQuery and jQuery UI Dialogs. Of particular interest to you would be the modal form demo. If you definitely need to have the content loaded from separate URLs, you could put an iframe in the dialog or do something like this example.

Related

Displaying PHP result in the same page

I want to add custom PHP to my wordpress site.
I managed to do it but the result is displayed in another page and it is just simple text.
I created simple calculator, and when user hits submit I want a div with the result to occur right below this calculator.
What is the simple way to do it or where can I seek some advice? Couldn't find it on google.
PS I am using wordpress themes so I added the action for the form as another file.
You could use javascipt to toggle visibility of your calendar div after response or add your custom div into response. You didn't wrote much. At first you should check out what is AJAX and find out where your response is creating.
If you didn't choose to add that for response, you can simple add PHP block to your templates files with <?php ... ?>.
Good luck! :)

modal box login form ajax jquery php

I am looking for login / register using a form in modal box which appears as a pop up, ajax and jQuery to post data and php/mysql to update data in database. Please could you point me in right direction?
I have written code which opens a separate page when "login" is clicked. I am looking for functionality like
http://www.krizna.com/jquery/jquery-ajax-form-submit-using-twitter-bootstrap-modal/?demo
Also, let me know if twitter bootstrap is better or if should i use my own designs.
For nice looking Modal Window you can use - BootStrap
And BootStrap is better :)
Bootstrap would make this easier. Check out http://bootsnipp.com/snippets/featured/modal-with-tabbed-content for an example of how to make a login modal.

Creating a custom Jquery modal form to upload data

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.

Can't post data to self because of design

i have a website that uses a number of containers (div's). In this scenario, we have three boxes down the left side and one bigger box on the right of these boxes. The bigger box on the right is the only thing that changes when a link is pressed, this is done with Javascript.
SO i have the index which is the main layout of the website and i also have the "pages" of the site, so when a link is pressed the main box (on the right) loads the new data.
On one of my pages i want to collect data and then run it through a PHP script that is in the head of the file, but when i click the button i realise it refreshes the whole page and it doesn't run the script on the page with the form.
Anyone had a problem like this, or know of something i could do to work around it?
I'm not really sure what code would be useful for helping me but if you need something just ask.
Thanks for the help
Since you are loading all your content via JS already, you could just POST the form data via AJAX to a PHP script to process, then read the output and either provide an error message or remove the form from the page and show your success message.
How to approach your AJAX call is dependant on what you've used as a basis for the rest of your JS.
Personally I like to use the JQuery library, as it makes AJAX calls (and much more) very simple.
How about you make the page design able to do it. Have the backend be able to spit out the state of the page when it posted.
Or use Ajax to post the data back and set the new state like you do already.

Jquery Pagination with different URL's

I am looking to build a single page with 1000+ pages, dynamically generated from a database. One row in the db = 1 page.
I'd like the navigation to load a different, initially hidden with jQuery, and I believe I'll be ok doing so, however I'm also hoping for each individual post/div to be accessible with a direct URL, for example site.com/page.php?page=1
Is there a way to make the url change onclick, along with the div? This way, if I had a facebook share button, it would actually share a specific post, and not just the same static page.
Thanks!
You can use the jQuery plugin BBQ http://benalman.com/projects/jquery-bbq-plugin/

Categories