I have a simple js function:
function changeContent(id, content) {
$(id).html(content);
}
which gets called on ajax callback. id is an id of a div, and $(id) does indeed find it.
On Chrome I get an unhandled exception that HTMLDivElement doesn't contain method html(), while on IE8 and FF simply nothing happens, although when viewing in degub, .html() does appear in the dynamic method list.
What am I doing wrong?
EDIT: No, I'm not passing the id with #. I've tried that, it returned null, now it actually returns something. Is there another problem??
EDIT again: seems I was doing something else wrong. I've put the # back, now it works.
Try use jQuery(id) instead.
You are sure you don´t pass the id without "#" right?
Are you passing simply the ID as a string? In which case I would think it's not truly being found, maybe try this?
function changeContent(id, content) {
$('#'+id).html(content);
}
Related
I'm working with JavaScript JQuery, and when i try to show the content of the vars in a field, it doesn't work.
There is my code:
function editEvolution(pos, nature, desc, di) {
$('#diE').val(di);
$('#natureE').val(nature);
$('#descE').val(desc);
$('#BtnAddEditEvo').attr('value', "Update");
$('#BtnAddEditEvo').attr('onclick', "doEditEvolution("+pos+")");
}
Thank's in advance for help.
the value of fields $('#diE'), $('#natureE') and $('#descE') doesn't change if the vars nature, desc, are strings but it works if it is a number
The problem is that you are mixing the worst from both the native JS, inline JS and jQuery worlds. You NEVER EVER put code inside a string, period. If you do it, you are doing it wrong.
So.. how to do it properly?
$('#BtnAddEditEvo').val('Update').on('click', function() {
doEditEvolution(pos);
});
In case you call editEvolution multiple times on the same object, add .off('click') before the .on(...) call to unbind previous handlers.
First do not use attr to set onclick...
I will explain what is wrong
$('#BtnAddEditEvo').attr('onclick', "doEditEvolution("+pos+")");
if pos="foo", it will render as
<div onclick="doEditEvolution(foo);"></div>
See the problem? It is looking for a variable foo. You would need to add quotes.
$('#BtnAddEditEvo').attr('onclick', "doEditEvolution('"+pos+"')");
^ ^
Why does a number work? Because numbers do not need quotes. It makes a valid call. It renders as:
<div onclick="doEditEvolution(3);"></div>
What you need to do is use jQuery the right way and use events.
$('#BtnAddEditEvo').on('click', function() { doEditEvolution(pos); });
and you should set value with .val()
I'm having one little iritating problem. I have simple if condition in javascript code.
It goes something like this:
if (istinito)
{
alert ('123');
document.getElementById('obavestavanje').value="Pobedi "+ime_igraca+"!!!";
kraj=true;
}
Alert apears when istinito=true, but element with id="obavestenje" never get its value, and variable kraj never is set to true. Variable kraj is global variable, and there are no conflicts with other parts of the JS code.
Any ideas why code stops after alert?
Looks like document.getElementById('obavestavanje') is returning null. You are trying to de-reference the null reference by using document.getElementById('obavestavanje').value which results in null pointer exception. If you look into the console, you should see some exception being raised. It is always a good idea to check if the document.getElementById() is returning a valid object before trying to dereference it.
e.g.
if (istinito)
{
alert ('123');
element = document.getElementById('obavestavanje')
if(element){
element.value="Pobedi "+ime_igraca+"!!!";
}
kraj=true;
}
First advice i could give you:
Use more console logging for debugging. Almost any modern browser got a console to debug and other things.
if (istinito) {
console.log("i am here");
}
from that same console you can also execute commands. Those dom manipulations are easily done from the console. just run them and see if it works.
the code:
document.getElementById('obavestavanje').value = "some value"
looks ok. nothing wrong with it. i guess you don't have an element with id "obavestavanje" ?
Looks like your code is okay. And you are sure you have an element by id 'obavestavanje'. Could you please tell what element is it? Is it a button, textbox or someting like that?
Also the String in the "Pobedi "+ime_igraca+"!!!" , what is 'ime_igraca'? Is it a variable and if it is have you defined this variable somewhere?
Or did you mean to give the value "Pobedi ime_igraca !!!" ??
Thanks
Ranis MK
I am not sure what's going on here.. I am trying to just match the val on an input from a variable, and every time I try, I get an object, object.
Here is the fiddle:
http://jsfiddle.net/GLnQx/1/
It's this piece of script that is screwing me up:
$("input.numberOfAccounts").keyup(function () {
$("input.pricingPerAccount").val($(newPricePerAccount));
});
newPricePerAccount will show me the correct number on alert, but when I try to put it in a val, it's no good.
What am I missing here?
$() is the jQuery selector method. newPricePerAccount is 5050, so it is trying to select a 5050 element (i.e. nothing), and it returns an object. I think you just want
.val(newPricePerAccount)
It should be
$("input.pricingPerAccount").val(newPricePerAccount);
Looking at your jsFiddle, newPricePerAccount is a JS variable, correct? In that case, you don't need the $() selector on it.
$ is only used to select DOM elements, not variables:
$('input.pricingPerAccount').val(newPricePerAccount);
I have an object that should be a valid jQuery object. When I look at the variable in FireBug it contains all the jQuery functions I'd expect (clone, remove, removeat, etc.). However, I don't see html() as a valid function and when I do this:
stringValue = myjQueryObject.html();
It does fail, saying html() is not a function. However if I do something like this:
stringValue = myjQueryObject[0].innerHTML;
It will correctly pass back the object, minus the parent div and text (which I would expect, seeing as how it is just getting the innerHtml). What do am I missing here?
As noted below, it was an external library that was generating myjQueryObject that had previously returning a valid jQuery object and was updated ... incorrectly. For posterity's sake, I've updated my unit tests to verify that the external library returns a correct jQuery object, make sure this doesn't return null or undefined:
myjQueryObject.jquery
Thanks all! Had a bit of a freakout when my code suddenly broke this morning.
Either something is modifying the jQuery object prototype, or you have a different library loaded.
Take your object, and test for the jQuery version like this:
alert( myjQueryObject.jquery ); // should give the jQuery version number
EDIT:
Additionally, you state that there's a removeAt method. jQuery doesn't have one of those, unless you mean removeAttr().
Are you sure it's a jquery object? Wrap it in $() again and .html() should exist.
it's [0].innerHTML or .get(0).innerHTML, in that innerHTML is a property not a method.
You should make sure that jquery exists by doing alert( jQuery == $) and you can check for the .jquery property.
That's odd; try $(myjQueryObject).html();. If that works, the object isn't really a jQuery node.
If you still can't figure out why the object lost the html() method, post the code which creates it. Then, we might be able to help.
How are you setting myjQueryObject?
<div id='myElement'></div>
//Good Javascript, Incorrect jQuery
myjQueryObject = document.getElementById('myElement');
myjQueryObject.innerHTML = '<b>My HTML Here</b>';
//Correct jQuery
myjQueryObject = $('#myElement');
myjQueryObject.html('<b>My HTML Here</b>');
//Compact Version of Correct jQuery
$('#myElement').html('<b>My HTML Here</b>');
Any good reason why $("p").html(0) makes all paragraphs empty as opposed to contain the character '0'?
Instead of assuming I found a bug in jQuery, it's probably a misunderstanding on my part.
jQuery only accepts a string as an argument for the val parameter of the html() method. If you pass a number like you are it will call the html() method override that sets the contents of the element but the value of the argument will end up being null or an empty string.
Try this:
$("p").html((0).toString())
Relevant documentation
I guess that at some point, it checks if (newContent == false), and doesn't continue with adding any content? I tried looking at the source, but got a bit lost...
I also guess that this would not be counted as a bug, since the function calls for a string, and if "0" is passed (as a string), it works as expected.
A workaround would be to do this:
var myNum = 0;
$('p').html('' + myNum);
The code performing the html call was within someone else's plugin and rather than modify it, making upgrading it tedious, I just wrote the following tiny plugin that modifies the html method to do as spoon16 recommended.
(function($) {
var oldHtml = $.fn.html;
$.fn.html = function (content) {
oldHtml.apply(this, [content.toString()]);
}
})(jQuery);
It's a little bit of a hack, but it's working for me and doesn't require me to modify the Plugin I'm using.
I just thought someone else might like to see this.
Try using text() instead html().
I geuss you missed part of how jQuery works,
$('p')
returns all paragraphs and the html( val ) function:
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
http://docs.jquery.com/Attributes/html#val
So if you just want to set the contents for the first p use
$("P").eq(0).html( 'something' );
or to get the html:
$("P").eq(0).html();
http://docs.jquery.com/Core/eq#position
more on jQuery selectors here:
http://docs.jquery.com/Selectors