I have this code
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").click(function () {
if (this.checked) {
document.getElementById('<%=ddlTypeSpecialIntegration.ClientID %>').style.visibility = 'visible'; }
});
});
When this is checked then a textbox is no longer required. How can I do this?
If all you want to do is make ddlTypeSpecialIntegrationvisible when chkSpecialIntegration is checked, you can just do:
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").toggle(function() {
$("#<%= ddlTypeSpecialIntegration.ClientID %>").show();
}, function() {
$("#<%= ddlTypeSpecialIntegration.ClientID %>").hide();
});
});
There are two ways that an html textbox can be forced to be required. You should implement both.
The first is to validate the data prior to form submission. You can accomplish this in javascript by hooking into the onsubmit event. An example is at http://www.w3schools.com/js/js_form_validation.asp
Inside that method you will need to test if your checkbox is selected or not. If it isn't, then see if they typed something in your textbox.
The second is to validate it server side after form submission. For this you could simply provide some validation code in your button's server side onclick method.
I say to implement both because you will want to provide immediate feedback when something is required client side and you want to enforce it server side in case javascript is turned off.
Of course, if JS is turned off then they will probably never see the textbox to begin with.
Why do you need JS for that?
Isn't something like this enough?
<input<% if some_condition %> required="required"<% endif %> name="field" />
Give id for textbox like
<%: Html.TextBoxFor(model => model.FirstName, new { #tabindex = "1", maxlength = "50" ,id="Name"})%>
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").click(function () {
if (this.checked) {
document.getElementById('<%=ddlTypeSpecialIntegration.ClientID %>').style.visibility = 'visible';
$("#Name").hide;
}
});
});
Related
I have the following fiddle: http://jsfiddle.net/kmgj8ny9/
JQuery:
$(document).ready(function(){
$(".chosen-select").chosen();
$("body").on("focus", ".htLeft", function (e) {
//alert(this);
$(this).parent("div").parent("div").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft", function (e) {
$(this).parent("div").parent("div").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
If the textarea is focused, the Comments label is bold, but if the dropdownlist is focused, the Issue label isn't bold.
The dropdownlist is a HTML generated ASP.net control.
How can I resolve it?
Update
Based on the new HTML provided, I have tweaked the selectors to target the input elements created by the chosen plugin as well as your inputs:
$(document).ready(function () {
$(".chosen-select").chosen();
$("body").on("focusin", ".htLeft, .chosen-search input", function (e) {
console.log(this);
$(this).closest(".section").find(".span_small:first").removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft, .chosen-search input", function (e) {
$(this).closest(".section").find(".span_small:first").removeClass("setBold").addClass("setNormal");
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/12/
You can also combine the event handlers into one and check the event.type property to decide if you are focusin or focusout and toggle the classes accordingly:
$("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
var focusin = e.type == "focusin";
$(this).closest(".section").find(".span_small:first").toggleClass("setNormal", !focusin).toggleClass("setBold", focusin);
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/13/
Typically you would only need one class, which you toggle, rather than two as the default styling should be the same as setNormal. That means you can shorten it further to this:
e.g.
$("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
$(this).closest(".section").find(".span_small:first").toggleClass("setBold", e.type == "focusin");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/14/
Original answer
Because of the plugin you are using for the dropdown, the control that gets focus in the dropdown is not .htLeft. That element has been buried within other elements to make the "pretty" control you see.
Try this as a quick fix:
$(document).ready(function () {
$(".chosen-select").chosen();
$("body").on("focusin", ".htLeft,:has(.htLeft)", function (e) {
//alert(this);
$(this).closest(".section").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft,:has(.htLeft)", function (e) {
$(this).closest(".section").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/3/
Normally I view the DOM in my browser to see what elements get created by plugins and target something specific to them.
Note: closest is always preferable to something like parent("div").parent("div") as it handles DOM changes.
You can also use mouseover and mouseout :http://jsfiddle.net/kmgj8ny9/6/
$(document).ready(function(){
$(".chosen-select").chosen();
$("body").on("mouseover", ".htLeft", function (e) {
$(this).parent("div").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("mouseout", ".htLeft", function (e) {
$(this).parent("div").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
UPDATE
After I gave it a little more thought, I believe .mouseup() would work better for this task.
I have a jquery function where upon clicking on a more link I display more information of a specified summary.
I am relatively new to jQuery and I was hoping for a pointer as to where I am going wrong as it is not working as it is.
$(document).ready(function () {
$('#more').on("click", function () {
"$('#more').hide(); $('#content').show();"
});
});
This is my C# code on code behind
topicGenerator.InnerHtml += summary.Substring(1, 100);
topicGenerator.InnerHtml += "<a href='#' id='more'> more...</a>";
topicGenerator.InnerHtml += "<div id='content' style='display:none;'>"+summary+ </div>";
Kind regards
Try changing
"$('#more').hide(); $('#content').show();"
to
$('#more').hide();
$('#content').show();
You don't need to wrap these statements in "quotations".
You could also condense .hide() and .show() into .toggle():
<script>
$(function(){
$("#more").click(function(){
$("#content").toggle();
});
});
</script>
See fiddle.
this will swap between show and hide and change the <a> to less then again more
$(document).ready(function () {
$('#more').click(function () {
$('#content').toggle();
if($('#more').html()=='more...'){
$('#more').html('less...');
}else{
if($('#more').html()=='less...'){
$('#more').html('more...');
}
}
});
});
I have a jQuery variable like
Default.aspx:
$(function () {
$("#divimgbtnGo").click(function () {
var ServiceNo = $(".ddlService option:selected").val();
});
});
Here I am getting value into ServiceNo. I want to use these value in my codebehind (Default.aspx.cs).
Can anyone please help?
All information in search is about getting codebehind to aspx. SO could not found any useful result and stuck here
Have a hidden feild in your aspx page then pass your variable value to that hidden field like this
$(function () {
$("#divimgbtnGo").click(function () {
$("#<%= yourhiddenfield.ClientID %>").val($(".ddlService option:selected").val());
});
});
In your Code behind get the value of hidden field as yourhiddenfield.Value
You can use, for example, a Hidden field, so ASP.NET will take care of transfering that data to the server and mapping it to CLR datatype after.
You can take hidden field and set ServiceNo value to hiddenField and u can use hiddenfield in server side.
add hidden field in Default.aspx page
<asp:HiddenField ID="hdnServiceNo" runat="server" />
set hidden field value.
$(function () {
$("#divimgbtnGo").click(function () {
var ServiceNo = $(".ddlService option:selected").val();
$('#hdnServiceNo').val(ServiceNo );
});
});
I have written the code on
ascx script:
<script src="JScripts/jquery.alerts-1.1/jquery.alerts.js" type="text/javascript"></script>
<script>
$(function() {
$('#ImageButton1').click(function() {
jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
</script>
and on
Code behind:
Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);
the problem is alert box is automatically getting disabled after some time when page load fully
What could be the reason that the alert box is being disable after clicking on OK button and how to call the callAlert function in proper way.
If you are using Master page or pages then you won't get the Client Id of the button as you are declared it should be declared as $('#<%=ImageButton1.ClientID%>') or $('[id$=ImageButton1]') hope it will solve you problem.
$(document).ready(function(){
$('#<%=ImageButton1.ClientID%>').click(function() {
alert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
You can try to put the following line before the function
$(document).ready(function() {
This will make it:
$(document).ready(function() {
$('#ImageButton1').click(function() {
jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
});
If you wait till the page is ready, the alert box won't be overwritten (I hope x)).
Also when you check that text box, check if the condition is false, then give the alert.
Is the condition not false? Build in a check to check if the condition is really true. If so? Redirect.
EDIT:
var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
//redirect
else
return
OK, so first it's important to understand that $(function(){... and $(document).ready(function() {... are equivalent, and nothing inside either will execute until the page is fully loaded. In other words, there's no need to use
Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);
That can be removed. Also, I see that you're probably using web forms. Be mindful that the Id attribute that will be rendered is not equal to the Id of the control attribute. In other words, if you have a runat="server" control with an Id of ImageButton1, using the syntax $('#ImageButton1') in your jQuery won't work.
Taking this into account, I've added an example below that uses selectors based on class attributes.
<script type="text/javascript">
$(function () {
$('.ImageButton1').click(function (e) {
var text = $('.TextBox1').val();
var redirect = true;
if (!text) {
redirect = confirm('Empty...are you sure?');
}
if (redirect) {
window.location.href = 'http://your-redirect-here.com';
}
});
});
</script>
<input class="TextBox1" type="text" />
<input class="ImageButton1" type="button" value="Click" />
That should get you where you want to go. Let me know if you have any questions.
var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
{
//redirect
} else
{
return false;
}
Put this after jAlert Box:
return false;
And call the function like this:
return callAlert();
I need to detect a postback in the frontend so I can use it with JQuery to change a class on page load. How can I do this?
You can check the IsPostBack property. Eg:
<script type="text/javascript">
$(function()
{
var isPostBack = <%=Page.IsPostBack.ToString().ToLower()%>;
if (isPostBack)
{
alert("Postback");
}
});
</script>
Stolen from this post:
On the server side have this
if(IsPostBack)
{
// NOTE: the following uses an overload of RegisterClientScriptBlock()
// that will surround our string with the needed script tags
ClientScript.RegisterClientScriptBlock(GetType(), "IsPostBack", "var isPostBack = true;", true);
}
On client side this
if(isPostBack) {
// do your thing
}
I put this variable inside the header tag of my asp.net web forms page.
<script type="text/javascript">
var isPostBack = ("true"==="<%= Page.IsPostBack ? "true" : "false" %>");
</script>
The var contains a Boolean. The comparison can probably be shortened.
Simple:
if you're using jquery it has to go after(jquery goes nuts otherwise):
$(document).ready(function(){
});
var isPostBack = <%=Convert.ToString(Page.IsPostBack).ToLower()%>;
Then
function whatever(){
if (isPostBack){
//Whatever you want to do
}else{
//Whatever else you want to do
}
}
I'm actually using it with jquery to show a web service status box then force a postback to refresh a ListView, so when it posts back it doesn't invoke the web service or show the status box just the updated ListView data.
$("a[href^='javascript:__doPostBack']").click(function () {
// do something
});