is it possible to attach load event to a DIV using jquery "on" inside a dynamically loaded content

Question

I am trying to setup validation using the $('#form').validate. most examples use document.ready for this. since my page is dynamically loaded I cant use document.ready.

Also most examples of $(#div).on('event') use the click event, is it possible to bind the 'load' event?

<div id="DivWhichIsntLoadedDynamically">
<div id="DynamicallyLoadedDiv">

<form id="myform">  
     <input type="text" name="entry[email]" />  <br/>  
     <input type="text" name="field2" /> <br/> 
     <input type="submit" />
</form>

</div>
</div>

$('#DivWhichIsntLoadedDynamically').on('load', function () {
    alert('div load');

    $('#myform').validate({
        rules: {
            'entry[email]': {
                email: true
            },
            field2: {
                equalTo: '[name="entry[email]"]'
            }
        },
        submitHandler: function(form) { // for demo
            alert('valid form');
            return false;
        }
    });

});

http://jsfiddle.net/JCY2E/6/

updated fiddle: http://jsfiddle.net/JCY2E/8/

I still don't understand why you refuse to show the code that loads the content. — Sparky, Jun 21 '14 at 17:34
my apologies but it is not easy to create that much code on JSFiddle. Say we have a side bar full of links loaded dynamically depending on list of urls of partial view(asp.net MVC) given. Those links load content in the middle-right section of page. In some of those content there can be forms with controls which needs to be validated. — krprasad, Jun 21 '14 at 18:08
The answers from linked question may work, but believe me I have been searching for solution since last 2 days and I could not find that question with my keywords. — krprasad, Jun 21 '14 at 18:22
Bottom line, no matter how you can do it, you can only call `.validate()` _after_ the form is created. — Sparky, Jun 21 '14 at 18:53

score 0 · Answer 1 · answered Jun 21 '14 at 16:17

0

jQuery allow you to attach an event on a parent container. See jQuery API on. Like that, you can attach an event on a content which isn't currently loaded.

$("#containerWhichIsntLoadDynamically").on("myEvent", "#myform", myFunction);

answered Jun 21 '14 at 16:17

vdubus

446
3
16

The problem is that you cannot attach the `.validate()` method to anything that does not yet exist. There is no workaround, because one is not needed. Simply call `.validate()` _after_ creating the form. – Sparky Jun 21 '14 at 16:41

Sparky · Answer 2 · 2014-06-21T16:51:08.807

0

Quote OP:

"I am trying to setup validation using the $('#form').validate ... since my page is dynamically loaded I cant use document.ready."

You cannot attach the .validate() method to anything that does not yet exist. There is no workaround, because one is not needed, and there is no need to bind any events.

You would simply call the .validate() method immediately after dynamically loading your form. Since you never show exactly how you're loading this dynamic content, my answer uses a generic button as one example.

$(document).ready(function () {

    $('#test').on('click', function () {  // generic button -> trigger demo

        // load the form dynamically
        $('#notificationContainer').html('your form markup');

        // now you can initialize the plugin
        $('#myform').validate({ ... });

    });

});

DEMO: http://jsfiddle.net/DNZ9Y/

edited Jun 21 '14 at 16:51

answered Jun 21 '14 at 16:39

Sparky

98,165
25
199
285

This may not work for me, since I do not have access to document.ready. I will update my code to show a container which is not dynamically loaded. can I use a load event of that to setup validation? – krprasad Jun 21 '14 at 17:23
@krprasad, none of this is making any sense the way you're explaining it. **Show the code that dynamically loads the form.** – Sparky Jun 21 '14 at 17:26
Div DynamicallyLoadedDiv and its content are loaded dynamically. and I want to include the JavaScript inside this div. And I want all forms inside this div to have their own validate setup. – krprasad Jun 21 '14 at 17:30
@krprasad, Then the answer is no, you cannot do it like that. – Sparky Jun 21 '14 at 17:33
Thanks sparky but I am thinking of doing it another way: I will put the validation rules(data-rule-email="true") with the controls/elements and will simply use foreach to loop through each form and call validate on it, I can do this in document.ready since it is a generic global strategy. This should work right? – krprasad Jun 21 '14 at 17:35
@krprasad, try it and find out. I'm not going to make a blind guess without seeing exactly how you're loading this form. The limitations to HTML attributes is that you can only use rules that can be declared with a boolean or HTML5 validation. In other words, you cannot declare the `equalTo` rule with an HTML attribute. – Sparky Jun 21 '14 at 17:54

is it possible to attach load event to a DIV using jquery "on" inside a dynamically loaded content

2 Answers2