Using Dialog with Form plugin
Hi,
I'm attempting to use the UI Dialog with the Alsup form plugin. I've had success using both on their own. But using them combined has not gone well. There is something I am missing. I've done a lot of digging but have not found any suitable solution.
I'd like to set the target of the form plugin so that it loads into the dialog on form submission - or any other DIV for that matter.
The form is not submitting - only the first of the alerts is called (beforeSubmit) and then - and when clicked - it just defaults back to the open dialog and the form - I can submit all I like - just the beforeSubmit - until I close the dialog.
Here is my js:
- $().ready(function() {
- var $dialog = $("#f2-content").dialog({
- autoOpen: false,
- });
- $('#f2').click(function() {
- $dialog.dialog('open');
- });
- var myFormOptions = {
- target: '#hot_result',
- beforeSubmit: formBeforeSubmit,
- success: formAfterSubmit
- };
- function formBeforeSubmit() {
- // PERFORM ACTIONS BEFORE FORM SUBMIT HERE
- alert("before submit");
-
- }
- function formAfterSubmit() {
- // PERFORM ACTIONS AFTER FORM SUBMIT HERE
- alert("after submit");
- $(this).fadeIn();
-
- }
- $('#hot_find_form').ajaxForm(myFormOptions);
- });
Here is the html:
- <div id ="f2-content" title="enter id">
<form action="http://redsofa.dev/index.php/member_search" method="post" id="hot_find_form">
<input name="member" value="" id="f2-input" type="text">
<input name="sendit" value="sendit" type="submit">
</form>
<div id = "hot_result"></div>
</div>
Is what I am trying to do even viable? Importantly I'd like to keep the solution to within the ui dialog and the form plugin if possible. Any help will be greatly appreciated.