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>
Related
How to use Input button for #Html.ActionLink?
In my cshtml I have this code:
<div>
#Html.ActionLink("Back to menu", "HomeController")
</div>
Now I whant to use instead hyperlink button (Back to menu), input submit button, so this button:
<input class="btn" type="submit" value="Back to menu">
Thanks.
You can't - you can use css so the link will look like button, or you can utilize Url.Action and javascript instead. I.E.:
<input class="btn" type="submit" value="Back to menu" onclick="window.location='#Url.Action("Index", "Home")';return false" />
Ok, I solved it, Ondrej Svejdar thanks for advice, I use javascript and works fine:
<input class="someCss" type="button" value="Back to Edit Menu" onclick="Redirect()"/>
And under button I use this javascript:
<script type="text/javascript">
function Redirect() {
var url = "#Url.Action("Registration")";
location.href = url;
}
</script>
So result is:
<input type="button" value="Button" />
value="button" />
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/
I have a webpage with the page div set to data-theme D
<div data-role="page" data-theme="d">
I also have several inputs on the page with the data-theme set to A
<input data-theme='a' type='text'>
<input data-theme='a' type='text'>
<input data-theme='a' type='text'>
Is there an easier way to set all the input's data-theme's to A without having to set each input individually?
1- Solution 1:
Wrap them in data-role="content", but this will change the background color of the div.
<div data-role="content" data-theme="a">
<input type="text" />
</div>
Demo
2- Solution 2:
Globally, set theme to all input on mobileinit event.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.textinput.prototype.options.theme = "a";
});
</script>
<script src="jquery.mobile.js"></script>
</head>
Demo
3- Solution 3:
Set input theme on pagebeforecreate.
$(document).on("pagebeforecreate", function () {
$("input").textinput({
"theme": "a"
});
});
Demo
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();