Button on jQuery UI - jquery-ui

I am writing a script using jQueryUI's button http://jqueryui.com/dialog/#modal-form.
The button is pretty fancy looking.
Now, when I tried to use jQuery to change the display name of the button:
$('#signin').text("new name");
The Button revert to the original style of the browser, with no padding and etc. I don't know why change of style happens when I just change the display name of the button. Please suggest me a way to fix it.

To change button text use this :
$('#btnId').val('new-text');

I figured out how. I used a span tag around the display name and just change text of that span tag.

Related

data-placeholder and jQueryUI autocomplete

Is there a simple way to have a default text in the textbox using jQueryUI's autocomplete ?
I have tried using data-placeholder but it doesn't seem to work.
I have searched online, and people suggest using the textbox value to display the text, and clear it on focus. But then I would need to change the font style just for the default text, and check onKeyUp when the text is manually erased etc...
Is there no easier way to do this ? or am I missing something ?
A lot of people will use a span that is positioned to be over the text box. When the text box gets focus then you hide the span. When the text box blurs and has a value, you don't show it. If it doesn't have a value then you can show it again.
You can style the span however you want independently of the text box so you would not have to change the font style on the text box itself. You would have to subscribe to the focus and blur events, but it would be much easier if you created a jQuery plugin to do this. In fact, I'm sure there are ones that already exist that do this.

Can I exchange the position of the cancel/set buttons on Mobiscroll?

I'm using Mobiscroll 2.0.3. The datepicker view gives ok button on the left and cancel button on the right. Can I exchange the position, like the cancel button on the left and set button on the right? Because I have ok/cancel buttons placed in the opposite way to Moviscroll on the site. Users would get confused if the button positions are different at each.
You should be able to do that just using CSS and overriding the styles. I did it for the scroll-wheel view but the idea is the same (also note that that this was for mobiscroll 1.5.3 so the the markup and classes may have changed)
/* overide stlyes for mobi date/time picker */
.dwb-c
{
float:left;
margin-bottom:12px;
}
.dwb-s
{
float:right;
margin-bottom:12px;
}
I know it's late but if someone try to google it, just try this https://docs.mobiscroll.com/jquery/datetime#opt-buttons
You can set an array of buttons to display and you can use string names if you wanna show default buttons. So if you wanna change direction just set buttons like this:
buttons: ["cancel", "set"]

angularjs same textarea to edit multiple elements

I have this case where I set a current item from a list and I need to use a textarea to edit that element's value.
Because of some constraints I have to use a keyup event but I don't think that's a problem.
Check this fiddle: http://jsfiddle.net/terebentina/Euj2C/
click on first/second buttons - it works, it changes the text in the textarea to the value of each element.
change the text in the textarea to something
click on the first/second buttons again - the textarea is not updated anymore. If you look in console, you can see that it switches between the elements, it's just that the textarea is not updated anymore.
Any suggestions? this is driving me nuts!
I know there is a better way modifying your directive to do this but as a quick fix for now you can try binding your textarea to a ngModel value that is just a copy of the current text in the selected element:
<textarea keyup="" ng-model="keyupText"></textarea>
With this in as your current function:
$scope.current = function(idx) {
$scope.current_element = $scope.elements[idx];
$scope.keyupText = $scope.current_element.value;
console.log('current is', $scope.current_element.value);
}
See this fiddle for an example.

jquerymobile button's css not applied

I'm trying to add a delete button to a custom div. However when the page is loaded, the jquery mobile button does not take the format of jquery and displays it like a hyperlink.
var currDelButton = $("<a>").attr("href","#").attr("data-role","button").attr("data-icon","delete").attr("data-iconpos","left").text("حذف");
anyone has an idea about this issue?
Best Regards
Ali
If you are adding the button after the page is loaded then you need to refresh the element for example $("#mybutton").button(); should work.
here is a working example with the code you provided: http://jsfiddle.net/ashanova/RQVd8/1/
call the .page for the main wrapper where new buttons are added.
$("#content").page();

How to change the color of some text in textbox - Silverlight 3?

I have a usual TextBox. I know in order to change the color of some text I can use Run tag. But when I try to use it imperatively instead declaratively (because I need to do that dynamically) I have the text in TextBox like
AAA<Run...>Text to be changed in color</Run>
and sure nothing in color changes.
How can I change the color of some text in some program way?
Thanks
I'm fairly sure you have to use a RichTextBox for that, TextBox only works with plaintext.

Resources