Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am facing strange problem .I am building ajax contact form plugin.My problem When I add jquery script in theme footer there is no problem at all everything works fine. But if I add same script from plugin directory it does not work any more.My coding to add script .Please note that if ace.js is added in footer in script tag it works

Here is the source https://www.dropbox.com/s/8m64xzueohppuxd/ajax_contactform.zip

add_action( 'wp_enqueue_scripts','webangon_ajax_contact'); 
function webangon_ajax_contact() {
wp_enqueue_script('ajcontact', plugins_url("/inc/ace.js", __FILE__),array(jquery));}

The form section

    <form method="post" id="mailinglist" action="">
<div id="message"></div>
<input type="text" name="mailinglistname" id="mailinglistname" placeholder="John Doe" /></br>
<input type="text" name="mailinglistemail" id="mailinglistemail" placeholder="johndoe@hotmail.com" /></br>
<textarea name="mailinglistcomment" id="mailinglistcomment" cols="58" rows="5" tabindex="4" placeholder="Do you develope websites for FREE?"></textarea></br>
<input type="submit" name="submit" class="read-more" id="mailinglistsubmit" value="Send" /><img src="<?php bloginfo('template_directory'); ?>/image/89.gif" alt="" class="ajaxsave" style="display: none;" />
</form>

The jquery part ace.js

jQuery(document).ready(function(){
jQuery("#mailinglist").submit(function()    {
    if(jQuery("#mailinglistname").val()=="") {
        jQuery("#mailinglist #message").text("Please enter your name.");
        return false;
    }       
    if(jQuery("#mailinglistemail").val()=="") {
        jQuery("#mailinglist #message").text("Please enter your email address.");
        return false;
    } else {
        var email = jQuery('#mailinglistemail').val();
        var name = jQuery('#mailinglistname').val();
        var comment = jQuery('#mailinglistcomment').val();
        if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
            jQuery("#mailinglist #message").text("Please enter a valid email address.");
            return false;
        } else {
            var data = {
                action: 'join_mailinglist',
                email: email,
                name:name,
                comment:comment,
            };
            jQuery("#mailinglistsubmit").hide();
            jQuery(".ajaxsave").show();
            jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data,
            function(response){
                jQuery(".ajaxsave").hide();
                jQuery("#mailinglistsubmit").show();
                jQuery("#mailinglist #message").html(response);
            });     
            return false;
        }
    } 

});

});

Finally ajax admin part

add_action('wp_ajax_join_mailinglist', 'join_mailinglist_callback');
add_action('wp_ajax_nopriv_join_mailinglist', 'join_mailinglist_callback');
function join_mailinglist_callback() {
$email = $_POST['email'];
$name = $_POST['name'];
$comment = $_POST['comment'];
$emailTo = "raisulangon@hotmail.com";
$body = "Name: $name Email: $email Comment: $comment";
if(wp_mail($emailTo, $name,$body)){
echo "<div class='success'>Enquiry has been sent successfully</div>";
}
else
{
echo "<div class='error'>Please Try Again</div>";
}
die();
}
share|improve this question

closed as off-topic by kaiser Mar 6 at 8:30

  • This question does not appear to be about WordPress within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

    
Is this exactly how your code looks? If so, make sure you add quotes around jquery in wp_enqueue_script like wp_enqueue_script('ajcontact', plugins_url("/inc/ace.js", __FILE__),array("jquery")); –  czerspalace Mar 6 at 6:41
    
Thank you for your edit but It is not working –  ashraf Mar 6 at 6:48
    
Is there a website where I can see what is happening? Which part is not working? Is the javascript not added at all? –  czerspalace Mar 6 at 6:54
    
Go through your source code on the browser and see if the JavaScript file is there. –  RRikesh Mar 6 at 7:04
    
I have added dropbox link please see the edit –  ashraf Mar 6 at 7:09

1 Answer 1

up vote 0 down vote accepted
wp_register_script('ajcontact', plugins_url("/inc/ace.js", __FILE__),array('jquery'));
wp_localize_script('ajcontact', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ));
wp_enqueue_script('ajcontact');

And then in your ace.js do

jQuery.post(MyAjax.ajaxurl, data, ....
share|improve this answer
    
Almost done but ajax functionality breaks.It refreshes the whole page –  ashraf Mar 6 at 7:53
    
Are you able to inspect the page? If so, do you see any javascript errors? –  czerspalace Mar 6 at 7:59
    
No error found but the form input value are not sent to admin ajax. –  ashraf Mar 6 at 8:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.