We Keep Coding

Grab Gridview textbox input value Jquery

I have built the following Gridview (Employees and their weekly target):
Desired result: I have a submit button at the bottom which will take all the data from the Gridview using jQuery and push it into my database.
At the moment, I cannot even retrieve the textbox values though, i have the following code:
$(document).ready(function () {
$("#btnSubmit").click(function () {
$("#GridView1 td").each(function () {
var value = $(this).text();
alert(value);
});
});
});
This Selects all the "Table Data" cells... It is selecting the names perfectly, but as soon as it gets to a textbox, it doesnt get the value I type in, it just alerts nothing.
I have tried the following too, each with different, but not the desired results:
.html
.val
.innerHTML
Would anyone be able to point out where I am going wrong please? please let me know if you need anymore info...

You have to check if the control exists in the table cells or not
Give this a try
var value = $(this).find('input').length > 0 ? $(this).find('input').val() : $(this).text();
Hope this will work!

You must select the input textbox in your selection as given below
$(document).ready(function () {
$("#btnSubmit").click(function () {
$("#GridView1 td input").each(function () {
var value = $(this).val();
alert(value);
});
});
});

displaying more information by clicking onlink button more

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...');
}
}
});
});

How to pass parameters to an action that's called on JQuery dialog() Open event

Good morning.
I have a modal JQuery dialog that on Open calls and loads a Partial View. Good example can be seen here https://stackoverflow.com/a/4802423/1193841 but I'll re-paste:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
In my case ActionMethod "CreateAlbumPartial" takes an ID parameter that's passed from another page with onclick="" event.
How can I make that Id available to pass to an ActionMethod when its called as shown above ? Something like
$('#dialog').dialog('open',Id)
Would be awesome but I dont think that's how it works.
P.S. Right now I'm displaying my popup by doing $.post() to load .html(data) to div and then displaying that DIV in a .show().dialog('open').
However, instead of having my Action method call and Dialog related stuff separately I would really like to re-do it the way I'm asking to keep all logic in one place.
Thank you in advance.

Why dont you make a hidden control and assign the value to that and use it in the dialog

jquery alertbox is getting disabled automatically

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();

Required textbox in javascript

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;
}
});
});