I am trying to use jQueryUI autocomplete.The Autocomplete is completely rendered using jQuery. However I want to be able to access the "project" input control in my .cs code as well. Is it possible?
I tried putting in runat server but the _renderItem throws an error during page load in that case. The autocomplete and rendering works fine without the runat="server attribute.
<input id="project" runat="server" />
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
}
Any pointers would be very helpful
just add name attribute to your input element and get value on server side by Request.Form[name]
aspx page:
<input type="text" id="project" name="project" value='<%= ViewBag["project"] %>'>
server side getting value
var project = Request.Form["project"];
passing value back to the client
ViewBag["project"] = project;
Related
I am using jQuery UI controlgroup to style checkboxes in an HTML form. After the input values are processed by a PHP script, the results are displayed on the the same page along with the form itself, so that the user can adjust the filters. What I am trying to do, is to have the boxes that were checked previously remain checked after the form has been processed, so that the user sees what selection criteria were used. To achieve that I store all the PHP $_POST data in a JS variable using json_encode, which I'd like to use to iterate through the labels and mark those that were checked previously. The problem is that the only option of the controlgroup widget that I can use is classes with ui-controlgroup-item which shows every single label within the group as active, and for the life of me I cannot figure out how to make it conditional, e.g. so that I can use if(label[for=' + var.value +'])', var being <?php echo json_encode($_POST) ?> or something similar. Will appreciate any suggestions.
Here is the HTML:
<div id="currencyList">
<label for="gbp">GBP</label>
<input type="checkbox" value="gbp" name="currency[]" id="gbp" >
<label for="usd">USD</label>
<input type="checkbox" value="usd" name="currency[]" id="usd">
<label for="eur">EUR</label>
<input type="checkbox" value="eur" name="currency[]" id="eur">
</div>
And this is the JavaScript bit:
$( "#currencyList" ).controlgroup({
classes: {
"ui-controlgroup-item": "ui-checkboxradio-checked ui-state-active"
}
});
After trying to find a solution for several days I decided to skip trying via the classes option and instead to move outside the controlgroup widget. So here is my not-so-pretty-but-working solution:
var postData = <?php echo json_encode($_POST) ?>;
$( "#currencyList" ).controlgroup();
$('#currencyList').children('label').each(function () {
if(postData.currency.indexOf($(this).attr("for")) >= 0){
$(this).addClass( "ui-checkboxradio-checked ui-state-active");
}
});
Is it possible to create a spinbox with this plugin dynamically? I wasn't able to find any examples anywhere.
If it's not possible, does anyone have any other suggestions for a jquery mobile spinner?
That plugin uses jQuery's Widget Factory as well as jQuery Mobile's enhancement methods. Simply, it is a controlgroup with two buttons and an input, therefore, it auto-initializes itself on pagecreate.
All you have to do is to inject the markup dynamically and then call .enhanceWithin() on parent div of the spinbox.
var spinbox = '<div class="ui-field-contain">' +
'<label">Spinner</label>' +
'<input type="text" data-role="spinbox" value="60" min="0" max="100" data-type="vertical" />' +
'</div>';
$(".ui-content").append(spinbox).enhanceWithin();
Demo
I've got a little problem: I have an Edit View with this time-picker inside
<label for="mytimeedit">Time</label>
<input name="Time" id="mytimeedit" type="text" data-role="datebox" data-options='{"mode": "timebox", "overrideTimeFormat": 24}'>
#Html.ValidationMessageFor(model => model.Time)
Then (in the same view) I have this script to replace every ":" character inserted on the early described text input with a comma (","):
<script type="text/javascript">
$("#mytimeedit").change(function () {
var val = $("#mytimeedit").val();
$("#mytimeedit").val(val.replace(':', ','));
});
</script>
Everything worked, until I had to insert a data-ajax=false attribute (and I cannot remove it, for the consistency of my site) in the link calling the Edit controller: this way the replacing doesn't work anymore.
My question is: is there a way to "translate"/rewrite my script avoiding Ajax, which is now disabled?
Hope for your help,thanks!
With knockoutjs and jquery mobile, I need to create a list of checkboxes from an array. It seems the checkbox list is rendered, but it did not respond to click. http://jsfiddle.net/9zx7F/
I used a fieldset tag with data-role of controlgroup to build the list. I tried ul with listview as well, same issue.
Edit: further details - I found it seems related to timing of ko.applyBindings happens. I created a page with same code running on my localhost, it was okay. Then added a timer around ko.applyBindings, the issue happened again. http://jsfiddle.net/gonglei/9zx7F/12/
I solved this with two steps;
1) unwrapping the label from the input and hooking them together with 'for' attribute
<input type="checkbox" data-role="checkbox" data-bind="uniqueName: true, uniqueID: true, value: ID />
<label data-bind="uniqueIDFor: true" >Click me</label>
ko.bindingHandlers.uniqueIDFor = {
init: function (element) {
element.setAttribute("for", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
ko.bindingHandlers.uniqueID = {
init: function (element) {
element.setAttribute("id", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
2) telling jqm to update the new content
$('input:checkbox').trigger('create');
I would change the model for this:
<!-- ko foreach: listItems-->
<input type="checkbox" name="itemsList" value="name" />
<span data-bind="text: name"></span>
<!-- /ko -->
the main thing to consider is the "value" property in the input control to render in the proper way.
Regards.
#tredder's solution works! Here's a fork of your fiddle using the attr data-bind attribute to bind the label, which to me looks cleaner: http://jsfiddle.net/aib42/AnKR6/
I've got a checkbox that I want hidden on the page. My obvious first attempt was the following:
<input type='checkbox' style='display:none' />
However, I noticed jquery mobile automagically wraps the checkbox in a div that looks like this:
<div class='ui-checkbox'>
<input type='checkbox' style='display:none;' />
</div>
I would assume that there's some kind of data- element that would prevent this additional styling, but haven't found it in the docs or elsewhere. It's easy enough to override the .ui-checkbox in css to hide it as well, but would prefer a more jquery mobile-standard approach. Does such a thing exist?
The attribute that prevents styling is data-role="none"
<input type='checkbox' style='display:none' data-role="none" />
See the Jquery doc: "Preventing auto-initialization of form elements"
For future users.
Just in case you want to disable for every form element or your forms are loading dynamically where you cannot edit markup use this.
$(document).on('pagebeforecreate', function( e ) {
$( "input, textarea, select", e.target ).attr( "data-role", "none" );
});
I have too many places to change inputs and add data-role="none"
The following code works for me:
<script>
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select,input";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>