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('');
});
Related
I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.
This is the code I'm using (note that the problem doesn't appear in jsFiddle):
<div data-theme="a" data-role="page">
<div role="main" class="ui-content">
<button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
</div>
</div>
And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div
How do I get rid of the extra div?
As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.
input is converted into a div that holds all styles.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" value="Submit">
</div>
If you call .button() on <a> or <button> tags, they will be wrapped in a div.
I was wondering how to allow jquery ui button to allow newline.
Before turning to jquery button.
<input type="button" id="btnFX" value="Button Name
With
New Line" />
turning to jquery button
$('#btnF9').removeAttr('disabled');
$('#btnF9').button();
It's nothing to do with jQuery really:
<button type="button" id="btnFX" >Button Name<br />With<br />New Line</button>
<script>
$(function() {
$("#btnFX").button();
});
</script>
I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.
This is the code I'm using (note that the problem doesn't appear in jsFiddle):
<div data-theme="a" data-role="page">
<div role="main" class="ui-content">
<button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
</div>
</div>
And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div
How do I get rid of the extra div?
As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.
input is converted into a div that holds all styles.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" value="Submit">
</div>
If you call .button() on <a> or <button> tags, they will be wrapped in a div.
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/
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.