EDIT
I solved most of the problems on this issue by rewriting the script. However, there is one remaining problem that I’ve posted as a new question.
Problem
Clicking on the submit button fails but only in WordPress pages. Static pages work as expected.
Question
Does anyone have experience using jquery.form inside WordPress and if so does this plugin have any special requirements to make it work in WP?
Scenario
I’m attempting to use jquery.form to handle a form that appears in a dialog. The arrangement works on static pages on the server, outside of WP but in the same domain.
However, when the form is presented in the dialog on a WP page the submit function fails, usually resulting in the dialog closing having not submitted the form.
The plugin and the triggering script are both enqueued.
Where I can see it, and its appropriate, I’ve altered $ to jQuery.
I’m looking for ideas on why the failure is occurring.
One question that occurred to me is how do jquery plugins respond if used with WordPress with regard to the use of “$”? Perhaps its not an issue but I wondered if it might be the cause of the problem here.
The triggering script is just the standard script with a few options added, again this works on static pages:
jQuery(document).ready(function($) {
var options = {
target : '#output1',
url: 'form1_processing.php',
clearForm: 'true'
};
// bind 'myForm' and provide a simple callback function
jQuery('#myform').ajaxForm(options);
return false;
});
The php to process the form is below, note that whatever weaknesses this may have it does work on the static pages.
<?php
ini_set ('display_errors', 1);
error_reporting (E_ALL & ~ E_NOTICE);
if (isset ($_POST['submit'])) {//Handle the form
if ($dbc = @mysql_connect('localhost', 'DB-user', 'DB-password')) {
if (!@mysql_select_db ('DB-name')) {
die ('<p>Could not select the database because <b>' . mysql_error() . '</b></p>');
}
}else{
die('<p>Could not connect to MySQL because <b>' . mysql_error() . '</b></p>');
}
//Define the query
$query = "INSERT INTO table-name (ID, name, url_problem, description, url, browser, operating_system,date_entered)
VALUES (0, '{$_POST['name']}', '{$_POST['url_problem']}', '{$_POST['description']}','{$_POST['url']}','{$_POST['browser']}','{$_POST['operating_system']}',NOW())";
//Execute the query
if (@mysql_query ($query)) {
print '<p class="response">Your comment has been added. Please close the form and continue with your evalation. Thank you.</p>';
}else{
print "<p>Could not add your comment because <b>" . mysql_error() . "</b> The query was $query.</p>";
}
mysql_close();
}
?>
The dialog script is
jQuery(document).ready(function() {
jQuery('#openform a').each(function() {
var cancel = function() {
$dialog.dialog('close');
};
var $link = jQuery(this);
var $dialog = jQuery('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 700,
height: 800,
modal: true,
//buttons: { "Close": cancel, "Cancel": cancel},
beforeClose: function (event, ui) {//clear previous success messages
jQuery("div#output1, div#output2, div#output3").empty();
},
open: function (event,ui) {//write the url value into the form
jQuery("input[name='url']").val(pageAddress);
}
});
$link.click(function() {
$dialog.dialog('open');
jQuery( "#accordion" ).accordion({
collapsible: true,
active: false,
fillSpace: true,
clearStyle: true
});
return false;
});
});
});
I’d appreciate any suggestions as the possible cause of the problem.
Thanks.