jquery ui datepicker is not working - jquery-ui

expected identifier is showing an error in side the function.
jquery ui datepicker is not working in asp.net
i added these file in master page. but i used my class in aspx file.
added scripts:
<script>
function () {
$(".datepicker").datepicker({
dateFormat: 'mm-dd-yy',
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
</script>
code hear:
<td>Start Date:</td>
<td>
<asp:TextBox ID="txtStartDate" runat="server"
SkinID="txtboxCustomizedMSkin" AutoPostBack="True"
OnTextChanged="txtStartDate_TextChanged" CssClass="datepicker">
</asp:TextBox>
<asp:ImageButton ID="imgStartDate" runat="server"
ImageUrl="Images/calender.png" CssClass="calender"/>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="txtStartDate" PopupButtonID="imgStartDate"
Format="dd/MM/yyyy" CssClass="cal_Theme1" />
</td>

Related

hide/show div using radiobuttons in ROR

<%= f.radio_button :newCustomer, "Male",:value=>'NewCustomer',:checked=>true%>
`<%= f.radio_button :customer, "Female",:value=>'Customer'%>`
<div id="first"></div>
<div id="second"></div>
I am new in rails.I have two radiobuttons and two div.When i click NewCustomer i want to hide first div and when i click on the Customer show the hidden div.I want to do this in only Ruby code.Is there any radiobutton click event like in .net
You can achieve it by Javascript / JQuery / Ajax in rails:
Example:
HTML
<input type="radio" name='thing' value='valuable' data-id="female" />
<input type="radio" name='thing' value='valuable' data-id="male" />
<hr />
<div id="female" class="none">Div for Male</div>
<div id="male" class="none">Div for Female</div>
CSS:
.none {display:none;}
JQuery
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
Working Fiddle
Pipeline
To further Gagan's answer, you'll want to include your Javascript in the asset_pipeline:
#app/assets/javascripts/application.js
$(document).on("change", ".radio", function(){
// gagan's code here
});
--
Turbolinks
Something to note is the importance of the javascript "delegation" - when you use Rails applications with Turbolinks.
Because of the way in which Turbolinks will just update the <body> tag of your page, many JS event bindings will actually become invalid, preventing your application from loading correctly.
To fix this, you need to be able to either delegate your DOM events from a "container" element (typically document), or by encapsulating your code in Turbolinks events like so:
#app/assets/javascripts/application.js
var change = function() {
$(".radio").on("change", function(){
//Stuff here
});
};
$(document).on("page:load ready", change);

button click event is not working in asp.net mvc4?

I have asp button (in mvc4) and i want to execute server side code on button click event (using ASPX view Engine) but click event is not working. My code is in Index.aspx like
<script runat="server">
Protected Sub BtSend_Click(sender As Object, e As EventArgs)
text_mess.Value = Nothing
ScriptManager.RegisterStartupScript(Me, [GetType](), "showalert", "alert('Message Sent');", True)
End Sub
</script>
<textarea id="text_mess" runat="server" name="text_mess" draggable="false">
Message
</textarea>
<br />
<asp:Button CssClass="login-submit" ID="BtSend" runat="server" Text="Send"
OnClick="BtSend_Click" />

Select2 initial tags

I have been having this issue in select2. I cannot show the initial tags, as shown in select2's home page:
<input width="100px" type="text" id="e12">
<script>
$(document).ready(function(){
$("#e12").select2({multiple:'true',tags:["red", "green", "blue"]});
});
</script>
But the "colors" are shown if and only if I begin typing. Otherwise, the input is blank.
As simple as the hot water: I forgot to put the value in the input tag!
<input width="100px" type="text" id="e12" value="pippo,italy">

How to databind JQuery Mobile with Knockout and Upshot

I am trying to build a JQuery Mobile UI which uses upshot for getting data from the service and then uses Knockout.js to bind the values to a list. I am able to populate the data however, the JQuery mobile styles are not getting rendered.
Here is my code. Any help in this regard would be really appreciated.
<h2>Projects (<span data-bind="text: projects().length"></span>)</h2>
<ul data-inset="true" data-bind="foreach: projects" data-role="listview" data-theme="e" data-dividertheme="c" data-filter="true">
<li>
Project Type : <label data-bind="text: ProjectType"></label>
Description : <label data-bind="text: Description"></label>
</li>
</ul>
<p></p>
#(Html.UpshotContext(bufferChanges: true).DataSource<ProjectServiceController>(x => x.GetProjects()))
<script type="text/javascript">
$(function () {
var dataSource = upshot.dataSources.Projects.refresh();
var ProjectsViewModel = {
projects: dataSource.getEntities()
};
ko.applyBindings(ProjectsViewModel);
});
</script>
The refresh() call is asynchronous, so you can provide a callback function that is executed after the refresh. jQueryMobile docs say that if you add items you need to refresh the listview after the items are created: http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html
Here's an example of how you might do that:
var dataSource = upshot.dataSources.Projects.refresh(function() {
$("ul").listview('refresh');
});

jQuery Mobile - How to mobile-ize a checkbox rendered via jQuery Templates

On a jQuery Mobile site I have elements of a <ul> being populated by jQuery Templates, filling out <li> items so something like this:
<ul>
</ul>
<button>Fill</button>
<script type="text/x-jquery-tmpl" id="tmpl-items">
<li><input type="checkbox" name="guys" /> ${FirstName} ${LastName}</li>
</script>
<script type="text/javascipt">
$('this-page-id').live('pageinit', function() {
$('button').click(function() {
$('#tmpl-items').tmpl(MyApp.Model)
.appendTo('ul')
});
})
</script>
Everything works, except the checkbox renders as a normal checkbox, not a cool jquery-mobilized checkbox. I know that the trick is to call "refresh" on the widget but I have no idea what widget I should be using - there is no data-role here. Does anybody know?
Can you triggering a create on the ul,like this $('ul').trigger('create');

Resources