CODEWITHSUNDEEP
jquery
ioan ghip
ioan ghip

Reputation: 1222

Exclude div from JQuery mobile?

I have a form that works fine without JQuery. The form has 2 text inputs and a "file upload". The "file upload" is a DIV with a few inner SPAN elements. If I change the form to JQuery mobile, the "file upload" doesn't render the right way anymore. Is there a way to show this "file upload" the same way as without JQuery mobile, while the rest elements are shown with JQuery?

Thanks, -ioan

Edit: Here is the template I'm using with JQuery:

<div data-role="page" id="reportselect">

<div data-role="header">
    <a href="" id="BTNCLOSE" data-theme="b">Close</a>
    <h1>Web to Fax</h1>
</div><!-- /header -->
<div data-role="content">
    <div data-role="fieldcontain">
        <label for="ETONAME">To (Name)</label>
        {%eToName%}
    </div>
    <div data-role="fieldcontain">
        <label for="ESUBJECT">Subject</label>
        {%eSubject%}
    </div>
    <div data-role="fieldcontain">
        <label for="MTOFAXNUMBER">Fax number(s)</label>
        <textarea name="MTOFAXNUMBER" id="MTOFAXNUMBER"></textarea>
    </div>
    <div data-role="fieldcontain">
        <label for="MMESSAGE">Message</label>
        <textarea name="MMESSAGE" id="MMESSAGE"></textarea>
    </div>
    <div id="UPLOADER_DIV" class="UPLOADERCSS" name="UPLOADER" tabindex="5"></div>
    <a href="" id="BTNSENDFAX" data-role="button" data-theme="b">Send fax now!</a>
</div><!-- /content -->
<div data-role="footer">
    <h4>Web to Fax</h4>
</div><!-- /footer -->

The element with the problem is:

<div id="UPLOADER_DIV" class="UPLOADERCSS" name="UPLOADER" tabindex="5"></div>

Here is how the pages without and with JQuery looks after a SUCCESSFUL upload: https://i.sstatic.net/Q0ppA.jpg

The "Upload failed" should be actually hidden.

Edit3: Here are the two pages, with and without JQuery Mobile: https://secure.ipfax.net/withJQuery.htm and https://secure.ipfax.net/withoutJQuery.htm

Upvotes: 2

Views: 346

Answers (3)

Just code
Just code

Reputation: 13801

I have two suggestions on this questions first is the data-enhancement that is for the jquery mobile

data-enhance="false"

Add this to your div

The "Upload failed" should be actually hidden.

Another one is that when your file upload failed you want to hide div is 

.uploader-upload-fail
{
display:none;
}

Add this css to your class file and your i hope this will help you in your solutions regards....:) ask me if you have confusion

Upvotes: 1

mayabelle
mayabelle

Reputation: 10014

Try this:

<div id="UPLOADER_DIV" class="UPLOADERCSS" name="UPLOADER" tabindex="5" data-enhance="false"></div>

Note the data-enhance="false" attribute added to the div. This should prevent jquery mobile from enhancing the content of the div (changing the styling and functionality).

Upvotes: 1

foxtrotZulu
foxtrotZulu

Reputation: 1119

jQuery Mobile doesn't do anything to disable file uploads. It just doesn't style them due to browser security restrictions and you can't upload files with the AJAX navigation system.

If you want to use file uploads with jQuery Mobile you have to do two things: 1) Turn off Ajax navigation using data-ajax="false" on your form definition because you can't upload files using Ajax. 2) Specify the appropriate encoding type of enctype="multipart/form-data" on your form.

Upvotes: 0

Related Questions