We Keep Coding

Javascript function not called on dynamically created button in C#

I have created button in C# dynamically and added client side event
but that function not getting called instead getting error as:
Uncaught ReferenceError: setPropertyLocation is not defined
Javascript:
function setPropertyLocation() {
alert('Hello');
}
C#:
btnMap.Attributes.Add("type", "button");
btnMap.Attributes.Add("title", "Map");
btnMap.UseSubmitBehavior = false;
btnMap.OnClientClick = "setPropertyLocation();return false";
btnMap.ID = "btnMap" + objPMPropTypestructure.PMFields[fieldcnt].SystemName;
btnMap.CssClass = "dataButton";
btnMap.Text = "G";
btnMap.Enabled = true;
tablecell.Controls.Add(btnMap);

//Try to use this.
document.addEventListener('DOMContentLoaded', function () {
document.getElementById ("btnMap").addEventListener ("click", setPropertyLocation, false);
});

Consider creating this button via JavaScript instead of C#. I assume you are using an update panel. Update panels are a mess. They don't update the DOM elements, they just get rid of the old wrapper and create an entire new, what sets to undefined all JavaScript references to any element in that wrapper.
Well, some times we don't have time to refactor the solution, so we must work with what we have.
You may try add an onclick attribute to the element, just like you did for type and title attribtues.

second this is wrong? [duplicate]

I'm not quite sure if I'm not using this in the correct scope or what, but I have a script that basically captures a link click and causes the page to fade out before going to the linked page. However, if the link is a JavaScript onclick, the script fails.
Here's my code:
<script type="text/javascript">
pageObj = {
init: function(){
$("body").fadeTo("slow", 1);
},
redirectPage: function(redirect){
window.location = redirect;
},
linkLoad: function(location){
$("body").fadeOut(1000, this.redirectPage(location));
}
};
$(document).ready(function() {
pageObj.init();
$("a").click(function(e){
e.preventDefault();
if (this.attr('onclick') !== undefined) {
eval(this.attr('onclick').val());
} else {
var location = this.href;
pageObj.linkLoad(location);
}
});
});
</script>
As you can see, I'm trying to do a check to see if the link has the onclick attribute, and then call the onclick function if it exists. How can I achieve this?

Use: $(this).attr instead of this.attr
This forces it into the context of jQuery.

While Diodeus is correct that you need to wrap this in a jQuery collection before using attr() (it's a method of a jQuery collection, not of an HTMLElement), you can just as well skip attr().
$("a").click(function(e){
var location;
e.preventDefault();
if ($.isFunction(this.onclick)) {
this.onclick.call(this, e);
} else {
location = this.href;
pageObj.linkLoad(location);
}
});
Note that I used the property (when an HTML document loads, attributes are usually preloaded into properties, with on_______ attributes being preloaded as methods. Also note that I used this.onclick.call() rather than eval(), setting the correct this for onclick methods, and ensuring access to the event object as an argument.

How to target the replaced content after using `replaceWith`?

I want to use Jquery (1.10.2) to replace some content on my site with the results of a API request. Then I want to execute some more javascript on that content. I know the new content is HTML, but I don't anything about it. Even if it has an #id, or ".class" assocated with it, thus I cannot target the content.
jQuery.replaceWith() will return the OLD "this"; How do I get the "this" for the new content?
http://jsfiddle.net/G24X8/3/
$('#fix').on('click', function() {
$('#myStuff').replaceWith("<p>Hello new world!</p>"); // Hello new world content actually comes from a server
// since replaceWith returns the old content, how do I get the $(?this?) for the new content, when I don't know what is in it?
});
-daniel

You can just do this way to get hold of the newContent after adding it to DOM, if that is what you meant:
$('#fix').on('click', function() {
var $newCont = $("<p>Hello new world!</p>");
$('#myStuff').replaceWith($newCont);
//Do anything with $newCont
//$newCont.css('color', 'blue');
});

I suggest using .html() instead of .replaceWith() -- that way you're only replacing the contents of the target tag, not the tag itself.
$('#fix').on('click', function() {
$('#myStuff').html("<p>Hello new world!</p>");
//...
$('#myStuff').doSomethingElse(); //whatever else you need to do
});

Try this:
$('#fix').on('click', function() {
$('#myStuff').text('').html("<p>Hello new world!</p>");
});

Referring to another variable in the same object with jQuery

Alright, so I'm completely new to jQuery, so here goes:
I have a GameCard object which accepts a div in it's "constructor" which is then assigned to a variable. Within the object, I want to perform a function when that div is clicked.
function GameCard(imageSource, div)
{
this.cardImage = new Image();
this.cardImage.src = imageSource;
this.hiddenImage = new Image();
this.hiddenImage.src = HIDDEN_SOURCE;
this.div = div;
$(this).WHAT_HERE_?.click(function()
{
});
}
pretty much how do you refer to another variable within the same object using javascript?
Thanks in advance!

You wrap the div using the jQuery function.
$(div).on('click',function(){
//do stuff
});

What is the id of your div?
Don't use $(this) in this context.
$("#IdOfDiv").click(function(){});
But wrap the above in this;
$(function(){});
This ensures that the jQuery code is not run until the document is loaded.
So;
$(function(){ $("#IdOfDiv").click(function(){
//Do someting
});
});

Retrieving text on focusout/blur

I have mulitple textarea's, when you're finished editing them i'm looking to retrieve the new text when the field doesn't have focus anymore.
The solution i've been trying is
$('textarea').live('focusout', function() {
console.log(this.text);
});
or
$('textarea').live('blur', function() {
console.log(this.text);
});
Both return as undefined, due to it not knowing what 'this' is referring to.
Is there another event that can make this possible?

Use the value property (this.value) to get the contents. Even in JQuery, the .text() method doesn't return the right contents of a textarea.
If you want to use a JQuery method:
$('textarea').live('focusout', function() {
console.log($(this).val());
}