Cannot select grid element through jQuery - asp.net

This is a follow-up question to ASP.NET How to pass container value as javascript argument
Darin Dimitrov has kindly provided his answer using jQuery,
But for some reason, I was not able to select the grid row I wanted to.
Here is the jQuery used to select row.
$(function() {
$('#_TrustGrid input[name^=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
Here is the actual output HTML markup.
<input
id="_TrustGrid_ctl16_ctl05_ctl00_trustDocIDTextBox"
type="text" value="198327493"
name="_TrustGrid$ctl16$ctl05$ctl00$trustDocIDTextBox"/>
I have just started using jQuery tonight and been going through the official jQuery Selectors documentation but have been unsuccessful.
Am I missing something here?

What I did to save the full id of the control I used in my .aspx page:
<input type="hidden"
id="SubcontractorDropDownID"
value="<%= SubcontractorDropDown.ClientID %>" />
You can then just get the value of the id and then use that in your query to know which row to use.

At first glance, I think you just want a '$' instead of '^' and you should be targeting the ID and not the NAME in your selector?
$(function() {
$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});

I do not know why selecting through #_TrustGrid would not work.
I was able to get around the problem by specifying :input as shown below.
$(function() {
//$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(':input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});

Related

Can Ractive events work in markup rendered with the triple-stash syntax?

If I have the following in my Ractive template:
<span on-click='handleClick'>click me</span>
Then I can listen for the click with this:
app.on({
handleClick:function() {
alert("clicked!") ;
}
})
But lets say I have that same markup stored in a string variable called clicklyspan:
app.set("clicklyspan", "<span on-click='handleClick'>click me</span>")
and I render it in the template using the triple-stash syntax:
{{{clicklyspan}}}
The handleClick listener no longer gets fired. Is there anything I can do to force some kind of update to the rendered template so that the listener works? Say, after I do that app.set() call?
Here's a fiddle demonstrating the problem.
Thanks,
Dave
I have never used Ractive, but I did some research and it seems you have to use partials, like this:
var app = new Ractive({
el: 'container',
template: '#template',
data: {
myFunction: function() {
var template = '<a on-click="handleClick">I can now be clicked as well!</a>';
if (!this.partials.myFunction) {
this.partials.myFunction = template;
}
else {
this.resetPartial('myFunction', template);
}
return 'myFunction';
}
}
});
You will also need to use this instead of the triple mustache:
{{> myFunction() }}
Here's the corresponding jsfiddle.
Of course, replace myFunction with whatever name you like.
Related question I found useful:
RactiveJS events on tripple mustache

Appending Additional HREF Link to jQuery fullcalendar

I'm attempting to append an additional link to each "event" in my jQuery fullcalendar implementation. However, the code below results in essentially nothing:
eventRender: function(event, element) {
$(element).find("a.fc-event").after($('link').html("link"));
}
Any help would be appreciated.
You will probably need to append this to the .fc-event-title instead.
Something like this:
eventRender: function(event, element) {
var eventText = element.find('span.fc-event-title').text() + "<a href='/TEST'>link</a>";
element.find('span.fc-event-title').html(eventText);
}
Hope that helps!

How do I change the style of an input box in IE7 on focus?

I know IE7 has issues...
I've read posts here and on Google telling me I need to set the style by hand onfocus() and onblur(). However, everything I try isn't working!
Here is my jQuery
$(document).ready(function(){
if (jQuery.browser.msie === true) {
$("input.date-picker").each(function(i)
{
var $foo= $(this);
$foo.bind('onfocus onblur', function() {
$(this).toggleClass('smalltxt-active');
});
});
}//end if
});
The a corresponding box
<input name="ctl00$SelectionContent$Selections1$txtDestinationDate" type="text"
id="ctl00_SelectionContent_Selections1_txtDestinationDate" class="date-picker"
style="width:80px;" />
I have already confirmed that my code is detecting MSIE. That I am getting a count of 2 input.date-picker objects.
Any ideas?
Thanks in advance,
$foo.bind('onfocus onblur', function() {
should be
$foo.bind('focus blur', function() {
You don't need the each-loop really,
$("input.date-picker").bind('focusin focusout', function(){
$(this).toggleClass('smalltxt-active');
}
Is just fine. It will select all input elements with the class 'date-picker' and bind the events to it.
You may also want to read about the .focusin() and .focusout() events.
try this for many form element
$("input,select,button").bind('focusin focusout', function(){
$(this).toggleClass('focu');
});

jquery adding an onclick event to a href link

i am converting over from websforms to asp.net mvc and i have a question.
i have a loop that generates links dynamicallly where picNumberLink is a variable in a loop and image is a variable image link.
i want to avoid putting javascript actions inline so in my webforms project is did the following:
hyperLink.Attributes.Add("onclick", "javascript:void(viewer.show(" + picNumberlink + "))");
what is the equivalent using jquery in asp.net mvc?
I have seen examples of using the $(document).ready event to attach on clicks but i can't figure out the syntax to pass in the picNumberLink variable into the javascript function.
suggestions?
EDIT: If you generate your links with the ID of this form:
<a id="piclink_1" class="picLinks">...</a>
<a id="picLink_2" class="picLinks">...</a>
<script type="text/javascript">
$('a.picLinks').click(function () {
//split at the '_' and take the second offset
var picNumber = $(this).attr('id').split('_')[1];
viewer.show(picNumber);
});
</script>
var functionIWantToCall = function(){
var wrappedLink = $(this);
//some serious action
}
//this should be called on document ready
$("#myLinkId").click(functionIWantToCall);
If you need to get URL of picture, keep it in anchor`s href:
var functionIWantToCall = function(event){
event.preventDefault(); //this one is important
var link = $(this).attr('href');
//some serious action
}
$(document).ready(function()
{
$('#LinkID').click(function() {
viewer.show($(this).attr('picNumber'));
});
});
You can add an attribute called picNumber to your hyperlink tag and set this is your mvc view
The link in your view might look something like this:
<%= Html.ActionLink("Index", new { id = "LINKID", picNumber = 1 }) %>
Assuming you're able to change the HTML you output, can't you put the picNumberLink in the id or class attribute?
HTML:
<img src="..."/>
jQuery:
$(function() {
// using the id attribute:
$('.view').click(function() {
viewer.show(+/-(\d+)/.exec(this.id)[1]);
});
// or using the class attribute:
$('.view').click(function() {
viewer.show(+/(^|\s)foo-(\d+)(\s|$)/.exec(this.className)[2]);
});
}}

jQuery AlphaNumericPlugin - Copy Paste Issue

I am using the .alphanumeric plugin for jQuery which is certainly doing what I would expect as users type directly into the textbox. But, if a user were to copy and paste a value into the text box, all bets are off.
$("#<%= txtNumber.ClientID %>").alphanumeric({allow:"-"});
I can certainly do this:
$(document).ready(function() {
$("#<%= txtNumber.ClientID %>").blur(function() {
$("#<%= txtNumber.ClientID %>").val(
RemoveInvalidCharacters(
$("#<%= txtNumber.ClientID %>").val()
)
);
});
});
//FUNCTION REMOVES ANY ; IN TEXT TO PREVENT SQL INJECTION
function RemoveInvalidCharacters(text) {
return text.replace(';', '');
}
But... I'd rather not have to kluge up my code even further with .blur() functions. Are there any other ways around this?
Handling the paste event is fairly straightforward. I'm using this technique in my masked input plugin with good results. Feel free to browse the source to see it in use.
Here is the relevant bits modified for your example above.
var pasteEventName = $.browser.msie ? 'paste' : 'input';
$("#<%= txtNumber.ClientID %>").bind(pasteEventName, function() {
setTimeout(function() {
RemoveInvalidCharacters(
$("#<%= txtNumber.ClientID %>").val()
);
}, 0);
});
I found this solution here:
http://www.devcurry.com/2009/10/allow-only-alphanumeric-characters-in.html
<script type="text/javascript">
$(function() {
$('input.alpha').keyup(function() {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
}
});
});
</script>
<input type="text" name="test" value="" class="alpha">
I too was needing a solution to the paste problem, and I figured out something that will work for me. A person can still use the Edit > Paste in the browsers menu, but Ctrl-V, as well as right click paste is handled. Tested in FF,IE,Opera,Safari,Chrome:
<!DOCTYPE html>
<html>
<head>
<title>Only Allow Certain Characters</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<br>
<form id="myform" action="">
<input id="element1" name="mytext1" type="text">
<input id="element2" name="mytext2" type="text">
</form>
<script>
/* removes evil chars while typing */
(function($){
$.fn.disableChars = function(a) {
a = $.extend({
allow: ''
}, a);
b = a.allow.split('');
for ( i=0; i<b.length; i++) b[i] = "\\" + b[i];
a.allow = b.join('');
var regex = new RegExp('[^a-z0-9' + a.allow + ']', 'ig');
$(this)
.bind('keyup blur', function() {
if (this.value.search(regex) != '-1') {
this.value = this.value.replace(regex, '');
}
})
.bind('contextmenu',function () {return false});
}
})(jQuery);
$("#element1").disableChars();
$("#element2").disableChars({allow:".,:-() "});
</script>
</body>
</html>
Copy and Paste is definitely a challenge for masked inputs.
Have you considered "encoding" special characters when the form is submitted as opposed to when the user enters values? We do the same thing to allow users to enter the < and > characters in TextBoxes (we convert them to < and > via javascript and then back in to < and > in the code behind.
This way you will not prevent an SQL injection. I’m not required to use your form, I can make mine and POST it to your script. Even easier: I can disable javascript and go drop your database.
Instead, check the input validity on server side.
The easiest ways are escaping it or using parametrised queries.

Resources