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/
Related
So I stumbled upon a weird one...
I am using angular material's form field component to create my forms...
I noticed that if I use a button inside the mat input field as matSuffix, if I try to submit the form from another field (pressing enter for example)... that field get's the focus and the button (suffix) gets clicked...
Even wrapping the angular material's example and wrapping it in a form I get the same:
https://stackblitz.com/edit/angular-frc7tj?file=app/form-field-prefix-suffix-example.html
<div class="example-container">
<form>
<mat-form-field>
<input
matInput
placeholder="Enter your password"
[type]="hide ? 'password' : 'text'"
/>
<button
mat-icon-button
matSuffix
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide"
>
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<input
matInput
placeholder="Amount"
type="number"
class="example-right-align"
/>
<span matPrefix>$ </span>
<span matSuffix>.00</span>
</mat-form-field>
</form>
</div>
Just type something into the first (password field) and then click into "amount" field and press enter, observe what happens
the first one gets the focus and the button suffix is clicked....
how can I prevent this behaviour and actually enforce the normal, expected one (form submission on enter key)?
Just add type="button" to buttons inside the form. By default, type="submit" is using and you are trying to submit the form by pressing Enter key. See StackBlitz.
I'm using Jquery mobile, and I have a input form with clear text button.
ex) <input type="text" name="" id="" value="" data-clear-btn="true" />
Then What about the Textarea tag ?
<textarea name="" cols="" rows="" data-clear-btn="true"></textarea>
This does not working.
Is there any way to solve this problem ?
data-clear-btn is only for textinput, not for textareas.
If you want a similar function, you must create a button near the text area, and clear that programically on button click, setting val('') to the textarea.
<textarea id="myTextarea" name="" cols="" rows=""></textarea>
<a id="clrTextarea" data-role="button" href="#" onclick="clearTextarea()">Clear</a>
<script>
function clearTextarea(){
$("#myTextarea").val('');
}
</script>
If you want the same efect than data-clear-btn in textinputs, you must hide the button when the textarea is empty, and show it when the textarea has data, with an onChange event over the textarea. Also you can put the button over a textarea's corner using css, and make it translucent when the mouse is not over it, with a hover tag in the css.
HTML:
<div data-role="page">
<div data-role="content">
<input type="text" />
<a data-role="button" href="#">Click to Change Input's Value</a>
</div>
</div>
jQuery Script:
$('a').bind('click', function () {
$('input').val('');
});
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/
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();
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.