views:

88

answers:

3

I'm using Ben Nadel's iFrame Upload function for an editing tool on a site I'm working on. I'm learning jQuery. The function works beautifully. It's part of a reuseable modal window and everything works. But, I want to dynamically tell the function where the call came from so it loads the proper form into the modal window. How would I pass that into the function. Right now it's hard coded to receive for #uploadform. Essentially, I want to re-use the function and drop in the varialbles like the action, preview and form ID etc...

$(function(){
                var jForm = $( "#uploadform" );
                jForm.submit(
                    function( objEvent ){
                    var jThis = $( this );
                    var strName = ("uploader" + (new Date()).getTime());
                    var jFrame = $( "<iframe name=\"" + strName + "\" src=\"about:blank\" />" );
                    jFrame.css( "display", "none" );
                    jFrame.load(
                        function( objEvent ){
                            var objUploadBody = window.frames[ strName ].document.getElementsByTagName( "body" )[ 0 ];
                            var jBody = $( objUploadBody );
                            var objData = eval( "(" + jBody.html() + ")" )
                            var thumb = ('thumbnails/' + eval(jBody.html()));
                            $("#header").css("background", "url(" + thumb + ") no-repeat center");
                            $("#preview").attr("src", thumb);
                    setTimeout(
                        function(){
                            jFrame.remove();
                            },100);
                });
            $( "body:first" ).append( jFrame );
            jThis
                .attr( "action", "upload_act_single.cfm" )
                .attr( "method", "post" )
                .attr( "enctype", "multipart/form-data" )
                .attr( "encoding", "multipart/form-data" )
                .attr( "target", strName );
            });
        });
A: 

try $(this).attr("id")

GerManson
A: 
var myFunction = function(formid) {
  var jForm = $( formid );
  // ....
}

$(function() {
  myFunction("#uploadform");
});
$(function() {
  myFunction("#uploadform2");
});
Tobias P.
+1  A: 

I was going to suggest something similar except create a separate function for the occasion:

function formSubmit(formId) {
   var jForm = $("#"+formId);
   //remainder of your code
}

Next, for each form create your onSubmit connection either directly when declaring the html form:

<form id="myForm" class="pageForms" onsubmit="function(formSubmit(this.id))> ...

Or programatically:

$("#myForm").submit(function() {
   formSubmit("#myForm");
});

[OR]

$(".pageForms").submit(function() { //to apply to all forms within the document
    formSubmit("#"+this.id);         //with that class
});

OR for all forms in the document (but not sure if it will work)

$("form").submit(function() { 
   formSubmit("#"+this.id);
});

Remember to perform the attachment in the onLoad function [$(function(){ ... })] or otherwise javascript errors could occur :S

lintal
So, essentially my upload is wrapped in the formSubmit function, correct? If that is the case, I suspect that would also allow me to define my other vars like where the for submits and some other data I would like to include in the submit. Would this also allow me to auto-submit if I did an onChange in my file input field as opposed to onSubmit?
Ofeargall
Exactly, you can define the method and action within the standard HTML form element and call them with basic javascript via this.action/this.method. Therefore, only need for one jQuery function! Yes you could use an onChange trigger instead and just use the $("formElement.id").val() in the data to be submitted. You should look at the dojo toolkit, specifically dojo.xhrGet / dojo.xhrPost (or dojo.io.iframe.send for multi-part form data) methods ;)
lintal