Having a file upload form in qTip, possible? Help!

[lancelot_one]

Hi! This one has me stumped. I'd like to have a file upload form in a qTip.

But when I put a file upload form in the qTip content it gives me this error on submit:

Notice: Undefined index: fileToUpload

The same form works correctly when used outside of qTip. but when I copy that form into the qTip content it gives me the above error.

Help! =) I may absolutely not be doing something special that i need to, but I'm losing hair on this one. =)

Here's my code:

JS Code

// Create the tooltips only on document load
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $('#content a[rel]').each(function()
   {   
   	  var form_data=$(this).attr('rel').split(";");
	  var form_name = form_data[2];
	  //$(this).parents('.qtip').qtip('hide').queue(function(){ $(this).qtip('destroy') });
      $(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use			
            text: '<TABLE cellSpacing=0 cellPadding=0 border=0><FORM id='+form_data[2]+' name='+form_data[2]+' action="upload_CGO.php" method="post" enctype="multipart/form-data" ><TR><TD class=label_text align=right nowrap><SPAN>*</SPAN> <LABEL accessKey=P for=site>Select Image:</LABEL></TD><TD noWrap width=10><SPACER width="10" type="horizontal"></TD><TD align=left><INPUT id=fileToUpload size=18 type=file name=fileToUpload></TD><TD align=left></TD></TR></TABLE></TD></TR><TR><TD noWrap colSpan=3><TABLE cellSpacing=0 cellPadding=0 border=0 style="margin-top:-4px;""><TR><TD class=label_text align=right nowrap><SPAN>*</SPAN> <LABEL for=image_width>CSS Width:</LABEL></TD><TD noWrap width=10><SPACER width="10" type="horizontal"></TD><TD align=left><INPUT id=image_width name=image_width maxLength=6 size=4 value="'+form_data[0]+'"></TD><TD noWrap width=10><SPACER width="10" type="horizontal"></TD><TD class=label_text align=right nowrap><SPAN>*</SPAN> <LABEL for=image_height>CSS Height:</LABEL></TD><TD noWrap width=10><SPACER width="10" type="horizontal"></TD><TD><INPUT id=image_height name=image_height maxLength=6 size=4 value="'+form_data[1]+'"> <img src="../../img/btns/question_mark_white.gif" width="16" height="16" alt="coming soon..." title="coming soon..."></TD><TD noWrap width=10><SPACER width="10" type="horizontal"></TD><TD><INPUT id=CSS_NAME name=CSS_NAME value="'+form_data[2]+'" type=hidden><INPUT id=IMAGE_NAME name=IMAGE_NAME value="'+form_data[3]+'" type=hidden><INPUT value=262144 type=hidden name=MAX_FILE_SIZE><INPUT id=IMAGE_DIR name=IMAGE_DIR value="myImages" type=hidden><INPUT id=buttonForm value="Update Image" type=submit ></TD></TR></FORM></TABLE>',
            title: {
               text: 'Edit Image - ' + $(this).attr('alt'), // Give the tooltip a title using each elements text
               button: 'Close' // Show a close link in the title
            }
         },
         position: {
            corner: {
               target: 'bottomMiddle', // Position the tooltip above the link
               tooltip: 'topMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
         },
         show: { 
            when: 'click', 
            solo: true // Only show one tooltip at a time
         },
         hide: 'unfocus',
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 0,
               radius: 4
            },
            name: 'light', // Use the default light style
            width: 570 // Set the tooltip width
         }
      })
   });
});

Any help is much appreciated, I used a demo set of working code above and just added my upload form to it's content text.

Anyone else been able to do this? Something I am missing. Please help before I go bald. =)

-C

[Craig]

Well first off I'd recommend against using HUGE HTML strings like that for your content. If you're going to be using complex content, stick it in a hidden div and grab it using a jQuery selector instead.

Regarding the file-upload, it should simply be a case of attaching some event handlers to handle their submission using the render event callback:

JS Code

events: {
	render: function(event, api) {
		$('form', api.elements.content).submit(function(e) {
			// handle it here
			return false; // Prevent normal submission
		});
	}
}

[lancelot_one]

Hi Craig, I just want to say thanks very much for your help and the creation of a fun set of software. Much appreciated.

Having the content text inside the qTip allows us to have a separate .js file that we can then dynamically include or not when needed rather than having the entire code in each page. Helps encapsulate our qTip code inside just one .js file. Making it easier to manage, update, edit and find etc...

But your tip is a good one too. In the above, I just wanted to give it a quick go, so I dropped in the html above into the qTip content area text as the quickest way to do it. Is there a limit to the text in a qTip, we should be aware of?

As you can tell we're a bit new to JQuery and still learning it's ins and outs. I'll try using the selector as suggested. We did create a hidden div as well with the form in it, to test the form before placing it in the qTip, so should be easy. Thanks!

When you run the code I listed though, if you include an input of type=file in the form in a qTip the form doesn't work. It throws an error when posting a form input of type=file, when used in a content area in a qTip. Is this a limitation of the qTip? Of javascript? Or of JQuery?

We're using a regular form post and no Ajax, so this should theoretically work, right? Again we're new at this. =)

Thanks!

-C

P.s. would there be an advantage of using qTip v2? Instead of qTip v1? thx!

[lancelot_one]

(16th February 20:39)Craig Wrote:  Well first off I'd recommend against using HUGE HTML strings like that for your content. If you're going to be using complex content, stick it in a hidden div and grab it using a jQuery selector instead.

Regarding the file-upload, it should simply be a case of attaching some event handlers to handle their submission using the render event callback:

JS Code

events: {
	render: function(event, api) {
		$('form', api.elements.content).submit(function(e) {
			// handle it here
			return false; // Prevent normal submission
		});
	}
}

Hi Craig, I used a selector as suggested, this removed the html code from the qTip code, and sets the qTip content text to the code in the hidden div, but it's still set to the same html, just in a hidden div, is this what you meant?

In doing it that way we still get the same posting error when posting a form with an input of type file from the qTip content area, since the html form is the same, just from a hidden div.

The receiving php page from the example code we posted earlier throws this error...

Notice: Undefined index: fileToUpload

Meaning that the html form in the qTip Content area didn't post it.

If you use the example code provided on top and post it to a php page that echos out the post variables you'll see what I mean.

If we remove the input of type file from the html in the content area in the qTip and replace it with text inputs etc... it posts just fine.

The render/submit function you displayed looks great, but I'm not sure how it fixes the above not posting, if it doesn't work in a regular basic form in the qTip Content area.

Is there something I am missing? Is the html form displayed in the qTip content area effected by it's display there somehow?

Thanks for your help and persistence, I've recieved quite a number of emails on whether I found a solution to this, which surprised me. =)

So your help is much appreciated,

Thx,

-C

[lancelot_one]

Hi! I just need to verify if this is a bug or not.

It doesn't pass an input type of file in a pure html form in a qTip for me.

I'm guessing from the docs that the content from a qTip is is placed in a div inside the qTip, so theoretically it should work fine, but does not.

One way or another, no judgment here. Or if there is a work around how it should be done. I'll try using qtip 2. But any clue or verification is a huge help.

Thanks! Any help is much appreciated. Want to use this. Can't though without a quick verification. Thanks again!

Not being able to do this lessens my ability to use this as a modal window as well.

Very much respect the work that's put in and how busy you might be. We came from open source as well. Just need to know if we need to use it for more simple tasks.

Like I said really appreciate the work that you've put in. And the work in answering people's questions on your cool software. A yea or a nay is good thanks!

Much props,

-C

[lancelot_one]

Sup! Quick follow up. I upgraded to the freshest version of qTip2 in a last ditch effort to get this to work. Looks like qTip2 supports the ability to pass an input type of file in a pure html form in a qTip whereas qTip version 1 does not. Woot! Well no woot! for version 1, but a woot! for version 2. Looks like this is a bug in version 1 of qTip.

I don't know what's the difference, in how qTip version 1 or QTip version 2 handles the content text. But qTip version 1 doesn't seem to support form inputs of type file in a form whereas qTip version 2 does.

I can now use a qTip(ver2) to upload a file with a simple form, I will now see if qtip version 2 plays nicely with the JQuery form plugin.

That is all.

-C

p.s. Thanks for a great JQuery plugin, the above might need to go in your docs.