The <form> tag of my overlay disapear as it loads, and the submit button doesn't work of course - submit

I am using bPopup to load a form in an overlay. The form is basically in a that is loaded hidden in the page, and by clicking a button on the page, the overlay shows up on top with the form in it.
I was using this code in another page before and it worked fine but wanted to go the overlay route as I felt the user experience was better.
So what happens is:
The overlay loads perfectly, all fields are visible, but the submit button doesn't do anything.
Using firebug, I looked at the code of the overlay and realized that my opening and closing tags are gone from the div.
I check and they are present in the when hidden.. so I'm guessing something happens with bPopup as I load the overlay.
I couldn't find anything in the regard and turn to the community.
Thanks
here is a sample of the code:
The div in the page I load:
<div id="fileuploadbox">
<div id="fileupload_div" class="contentcontainer">
<div class="headings alt">
<h2>Upload a file</h2>
</div>
<div class="contentbox">
<form action="**mycontroller**" method="post" enctype="multipart/form-data">
<p><span class='label'>File:</span><input type="file" name="file" value="" id="uploader" size="34" /></p>
<p><span class='label'>Description:</span><input type="text" name="description" value="" id="smallbox2" class="inputbox" maxlength="250" /></p>
<p><span class='label'> </span><input type="submit" name="" value="Upload file" class="btn" />
</form>
</div> <!-- content box -->
</div> <!-- contentcontainer -->
</div> <!-- fileuploadbox -->
The Button it self:
<a href="#" class="fileuploadpop">
<div id="fileuploadpop">
Upload a file
</div>
</a>
The Javascript:
<script language="javascript">
$(document).ready(function(){
$("a.fileuploadpop").bind('click', function(){
$("#fileuploadbox").bPopup();
return false
});
});
</script>

The code you provided works fine in my mac Firefox and Chrome with bPopup. The submit button works!
May be something to do with your btn class which I have not defined or you might try putting this in a bare-bone page to test with bPopup first to track and resolve any other conflict.

Related

Jquery external panel content not appearing correctly

I'm making a multi-page web app. I want it to have a left and right panel that are available no matter what page you're on. I managed to do that but the contents don't seem like they have the jQuery CSS rules applied to them. I did
$("[data-role=panel]").panel().enhanceWithin();
And that made my panel work... kinda of the labels for my check marks aren't formatted like they were when the panel wasn't external. I guess I'll just put the code up. I swear I've searched this site forever trying to find answers.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
<div data-role="panel" id="RoomInfoPanel" data-display="overlay" data-theme="b" data-position="right" data-dismissible=false>
<div data-role="main" class="ui-content">
<h2 id="roomNumberHeader">Panel Header..</h2>
<p class="main" id="CrewText">Crew Assigned:</p>
<select id="selectCrew" >
<option>Select Crew</option>
</select>
<div id="cblist" style="display:inline">
<label for="#compChk" class="ui-content">Completed</label>
<input type="checkbox" value="first checkbox" id="compChk" />
<input type="checkbox" value="first checkbox" id="paidChk" />
<label for="#paidChk">Paid</label>
</div>
<div data-role="main">
Edit Crews
</div>
</div>
</div>
Remove # in for attribute. It should be for="checkboxID" without hash.

jquery ui: is it possible to create a floating form?

I know that I can create a dialog.
I know that I can create a form.
Is it possible to combine the two and make myself a dialogbox which makes a post to the same page?
A jQuery UI dialog display a div and its content as a dialog.
So if your div contains a <form> element it will displayed fine.
Code:
<div id="dialog">
<form id="t2eForm" action="#">
<p>
<input type="text" id="t2e_w" name="t2eWrite" />
</p>
</form>
</div>
jQuery(document).ready(function () {
jQuery("div#dialog").dialog({title: 'Demo'});
});
Demo: http://jsfiddle.net/NdhkL/

jquery mobile trigger('create') method doesn't work with iframe

When I try to call .trigger('create') method to iframe contents, it does not work and css classes are not applied to input:text elements. but when I call .trigger('create') method for html content outside the iframe, it works
please go to this link 'here' on jsfiddle and click on "load mobile view"
javascript code
$('#mobile_view').contents().find('body').append("<div id='fbm_mob_menu'></div>");
$("#load_mobileview").click(function(){
var content = ' <form class="fbm_contactform">\
<div>Contact Us</div>\
<div data-role="fieldcontain"><label for="name" >Name</label>\
<input name="name" type="text" class="m-field" /></div>\
<div data-role="fieldcontain"><label for="email">Email</label>\
<input name="email" type="text" class="m-field" /></div>\
<div data-role="fieldcontain"><label >Message</label>\
<input name="message" type="text" class="m-field" /></div>\
<input name="submitButton" type="submit" class="m-field" value="Send Message" /></div>\
</form> ';
$("#mobile_view").contents().find("#fbm_mob_menu").before(content);
$("#mobile_view").contents().find(".fbm_contactform").trigger("create");
});
html code
<a href="javascript:void(0)" id="load_mobileview" >load mobile view </a>
<iframe id="mobile_view"></iframe>
<div id="test"></div>
iFrame contents should not be "easily" accessible, so to me this is correct behavior.
If you check the jQuery Mobile API examples, you can see that all pages are done using iFrames and every iFrame has it's own version of jQuery Mobile.
So if you have an iframe, include JQM inside the iFrame and everything should be allright.
I could solve this problem by writing a javascript function inside iframe. and calling that function outside from the iframe.
in iFrame
<script>
window.trigerCreate =function(){$(".fbm_contactform").trigger("create");}
</script>
parent
window.frames[0].trigerCreate();

jquery mobile Popup on pageinit popupinit?

Is there a way to use some pageinit event for a popup, in order to populate an input box with an email address from the main page?
So in my html, I have 1 page declared as data-role="page" and one popup declared as data-role="popup". In the "page" I have an input containing an email address, and a button that calls the popup. In the popup I have some text, another input text and 2 buttons. This input box must be populated with the contents of the main page input box value. How can I achieve that? Is there some pageinit event for popups too?
So here is my main page declaration (pg_main)
<div data-role="page" id="pg_main">
<input type="email" name="emailadr" is="emailadr" value="" />
<input id="sendemail" class="emailclass" type="button" name />
</div>
and now the popup (sendm)
<div data-role="popup" id="sendm" class="ui-content">
<h3>Send the email</h3>
<p> Confirm email address below</p>
<input type="email" name="adresa" id="adresa" value="" />
<input type="button" id="emailok" value="Send" />
<input type="button" id="emailno" value="Give up" />
</div>
Of course I have some code that fills the input in pg_main with a valid email address, but that is not my issue.
In my script, I call the popup like this:
$(document.body).on('click','.emailclass', function(){
$('#sendm').popup("open");
});
How can I fill the $('#adresa') from popup sendm with the value of $('#emailadr') from page pg_main?
Thank you
What you need is this code:
$("#sendm").on("popupafteropen", function( event, ui ) {
$('#adresa').val($('#emailadr').val());
});
It will be executed when popup is opened. Event used here is called popupafteropen and you can find more about it in an official documentation.
Working example made form your code: http://jsfiddle.net/Gajotres/Q5KSV/

Customizing jQuery Mobile checkboxes labels

I've a <fieldset> of checkboxes with custom labels that contains both item names and descriptions, as you can see here:
Demo: http://jsfiddle.net/Zw823/
On the third checkbox I need to have a custom <input type="number" /> below description, which will be editable only if its checkbox is checked. Is it possible? I tried to put a <div data-role="fieldcontain"> with label+input below the <p>, but the <input/> number didn't display as expected... How can I achieve that goal? Thank you in advance!
This is how I managed to do what you want. The trick is to load the jquery scripts at the bottom of the page, so you don't have to call trigger('create') and break your code.
<fieldset data-role="controlgroup" >
<label for="check-1" >
<a class="ui-li-heading" href="">Service 1</a>
<p class="ui-li-desc">Lorem ipsum text</p>
</label>
<input type="checkbox" id="check-1" data-iconpos="left">
</fieldset>
<!-- rest of your data-role="page" -->
</div> <!-- end of page -->
<script src="jquery.min.js"></script>
<script src="jquery-mobile.min.js"></script>
</body>
</html>

Resources