search

arvgta / ajaxify

Ajaxify - The Ajax Plugin
https://4nf.org/
274 stars 124 forks source link

Using on Forms #143

Closed oleteacher closed 6 years ago

oleteacher commented 6 years ago

Hello Arvind. I had asked question on your site comment form but content was stripped.

Below is my simple test form. Not positive I am using ajaxify correctly. Form seems to reload page when submitted:

<!DOCTYPE html>
<html>
<head>
    <title>Update Data Ajax Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ajaxify/7.1.1/ajaxify.min.js"></script>
    <script>
        $(document).ready(function(){
        jQuery('#myform').ajaxify();});
    </script>
</head>
<body>
    <div style="width: 800px; margin: 20px auto;">

        <table width="100%" cellpadding="5" cellspacing="1" border="1">
            <form name="myform" action="" method="post">
            <input type="hidden" name="id" value="<?php echo $id;?>">
            <tr>
                <td>AD URL:</td>
                <td><input name="adurl" type="text" value="<?php echo $data['adurl'];?>"></td>
            </tr>
            <tr>
                <td>Support URL:</td>
                <td><input name="supporturl" type="text" value="<?php echo $data['supporturl'];?>"></td>
            </tr>
            <tr>
                <td><a class="no-ajaxy" href="list.php" target="_top">Back</a></td>
                <td><input name="submit_data" type="submit" value="Update Data"></td>
            </tr>
            </form>
        </table>
    </div>
</body>
</html>

Thank you for taking time to look.

Susan

arvgta commented 6 years ago

Hi Susan,

Thanks for posting back in here!

The first problem is, that Ajaxify expects a div to be supplied in the selector, not a form as such. A good candidate is the div you're using to wrap the form in. Simply give the div and id such as

...and then pass it to the Ajaxify call something like this:

$(document).ready(function(){ jQuery('#mydiv').ajaxify();});

(The above div should be used consistently across all pages that use Ajaxify)

Give it a try, but it could be though, that your form is too complex for Ajaxify to handle... (You could also try omitting the table logic - I doubt, that Ajaxify will tolerate it)

Thanks, Arvind

oleteacher commented 6 years ago

Thanks Arvind.

My thick head did not grasp that it must be a div even though your docs state that clearly:) I was using another ajax script and it worked from the form tag...

I think your response has fixed my issue.

Appreciate your help and thank you for sharing your wonderful ajaxify.

Susan

arvgta commented 6 years ago

Hi Susan,

Thanks for the kind words and am glad that it helped! Does that mean, that your form works now, too?

Thanks again, Arvind

oleteacher commented 6 years ago

Yes, form is working and think ajax is working on the test form. Seems page is reloading when clicking the submit button but not positive.

When I get the project fully together will test completely, will get back to you if issue.

Thank you much for help.

Susan