Using public methods

[danielme85]

Hi!

This might be a total noob question... sorry :p

I´m struggling to get access to the public methods. I´m trying to use isValid(). Getting the following error: "Cannot call method 'isValid' of undefined"

Im using jquery a jquery UI dialog button to submit the form (form is loaded in a dialog):

buttons: {
        "Send Form": function() {
        if ($myform.isValid()) { 
            document.form.submit();
            }
        else {
            window.alert('There are errors in the form!');
            } 
        },

made idealforms a variable:

var $myform = $('form').idealforms({
        inputs: { etc...

Also im getting the following error everytime idealforms loads: "Object [object Object] has no method 'updateCounter'" This disappears when I remove the

markup in the form (which messes up the style). Have no idea if these errors are related at all, and I´m not suppressed if I messed up somewhere. I´m a totally lost with jquery, but in these times people expect fancy things so I have no choice :)

Any help/tips is much appreciated! Thanks!

[elclanrs]

Could you post some more relevant code or a link to the site where this is happening? I'm trying to figure it out but can't really tell what's going on unless I see it in action.

Also, the error you get with updateCounter I've experienced it before and I thought I fixed it. Could you download the latest version and see if its gone?

[danielme85]

Thanks for the fast reply!

I had done some minor style "tinkering" with the css, and I saw you recently updated the project so I tough it would be best to downloaded a fresh version earlier today to be sure. Same result. Weirdly, if i try the non minimalized version, I get a different error: "getFilters is not defined", and the idealform fails to load.

Here is a page generated by the default styling of the website. Don´t mind the wrong placement of the labels, it is a bug in the main css on the site (looks great in correctly set up styling).

http://video.adm.ntnu.no/openVideo/mdekstern.php

[elclanrs]

One thing to notice is that the heading Metadata should be inside the section, although this wouldn't give any JS errors. But you can also not put any sections at all and it should work fine. I just copy/pasted your code in my testing environment and everything works fine, I don't get any errors with updateCounter. I dropped in this html with your script and it works. Are you sure you're using the latest revision of Ideal Forms?

<form id="mdeksternPres" style="width:550px; padding:10px;" method="post">

<section name="dust">

<div>
  <h1>Metadata</h1>
  <p>Hei! Vennligst skriv inn relevant metadatainformasjon</p>
</div>

<!-- Text -->
<div><label>Tittel:</label><input type="text" name="tittel"/></div>
<div><label>Beskrivelse:</label><textarea name="beskrivelse"></textarea></div>
<div><label>Nøkkelord:</label><input type="text" name="keywords"/></div>
<div><label>Foreleser:</label><input type="text" name="foreleser"/></div>
<div><label>Dato:</label><input type="text" name="dato" id="dato" placeholder="2012-12-24 18:00:00"/></div>

<!-- File -->
<div><label>Fil:</label><input type="file" multiple name="datafiler"/></div>

</section>

<!-- Separator -->
<div><hr/>
Du kan laste opp følgende filer som supplement til videoen: txt, pdf, doc, docx. Maks størrelse 5MB. Har du en nettleser som støtter HTML5, kan du laste opp flere filer. 
</div>

<!-- Buttons -->
<div><input type="submit" value="Send skjema"/></div>

</form>

You could try it on your own. Just clone my repo in any folder with git clone https://github.com/elclanrs/jq-idealforms.git and then go to the new folder and checkout the site branch with git checkout gh-pages, once in there you can opne the index.html file and replace the form and the script with your own stuff. That's what I did and it worked.

Also FYI the file jquery.idealforms.js is not the unminified version, it's just the Ideal Forms plugin but all the dependencies get built into the minified version, so that's what you should use exclusively. If you want an unminified version the you can modify concat.sh to your needs and re-concatenate everything, but this is probably not necessary.

[elclanrs]

I uploaded a little video showing your form working as well as the isValid method. I can't seem to reproduce the bugs you're experiencing. As you can see no errors show in the console.

http://www.filedropper.com/20120717211147

[danielme85]

hehe... nice video. Sorry for those strict norwegian filter-rules there :) I see what I have done wrong. The load order of the js files. I was trying to get idealform play nice with jqueri-ui tabs and dialogs and experimented with the load order... then i forgot about it... Putting idealforms before jquery-ui made the layout work with ui-tabs and dialogs, but the updateCounter error occurs.

Using this order makes idealform work great by itself, but together with ui-tabs and dialogs it generates errors

<script type="text/javascript" src="http://video.adm.ntnu.no/openVideo/include/jq/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://video.adm.ntnu.no/openVideo/include/jq/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="http://video.adm.ntnu.no/openVideo/include/jq/jquery.timepicker.addon.js"></script>
        <script type="text/javascript" src="http://video.adm.ntnu.no/openVideo/include/jq/jquery.pnotify.min.js"></script>
        <script type="text/javascript" src="http://video.adm.ntnu.no/openVideo/include/jq/idealforms/jquery.idealforms.min.js"></script> 

Uncaught TypeError: Cannot call method 'removeAttr' of undefined jquery.idealforms.min.js:10 e.fn.tabs jquery.idealforms.min.js:10 e.extend.each jquery-1.7.1.min.js:2 e.fn.e.each jquery-1.7.1.min.js:2 e.fn.tabs jquery.idealforms.min.js:10 (anonymous function) /openVideo/admin/:100 <- this is a call for the jq-ui tabs function f.Callbacks.n jquery-1.7.1.min.js:2 f.Callbacks.o.fireWith jquery-1.7.1.min.js:2 e.extend.ready jquery-1.7.1.min.js:2 c.addEventListener.B

Now I´m (clearly) no genius at this... but it seems to be a conflict with the jq-ui tabs. This probably has nothing to do with the error you have been checking since i created that one myself :p Sorry for giving you the wrong problem... Sadly the page in question is behind a University login, and has about 1000 lines of code printed out in the browser. Im not making you look trough all that :)

Maybe you have any tips on avoiding a conflict with jq-ui tabs? I think jquery has a "no-conflict" function (using a defined variable for all jquery functions?) , I`l try that and report back. idealforms is the last awesome touch i need to the final finish :)

Thank you for all the great support!

[elclanrs]

Can you post your markup with the tabs and the Ideal Form? I've been doing some tests and it seems to work fine for me with both tabs and dialogs...

[danielme85]

This is what triggers the error:

<script>
    $(function() {
    $('#tabbar').tabs();

Even without any idealforms html or script code it still triggers error in idealforms.js if i try to call tabs() from jq-ui...

It actually snaps up this code and sets idealform css vaules to the tab element that is supposed to be jquery tabs:

<div id="tabbar">
    <ul>
        <li><a href="#tab1">Mine Serier</a></li>
        <li><a href="#tab2">Alle Serier</a></li>
        <li><a href="#tab4">Videorendring</a></li>
        <li><a href="#tab5">Systemlogg</a></li>

    </ul>   

<div id="tab1">
    <section class="adminMeny"><ul>
    <li><a href="#" id="dialog_nySerie_link">Legg til ny serie</a></li> </ul>
    </section>

[elclanrs]

I found the bug! I committed a fix, check if it works now...

[danielme85]

It´s working now! Thanks!

I´l let you know when the project is done, so you can check out your work in action :)