accessing html element after it gets loaded using jquery - javascript

I want to execute some code in javascript after one html element is loaded. The html element is generated by javascript code dynamically.
When I try to access the element I want to access I get undefined. I am accessing it in $(document).ready event
like this
alert($("#imgP").attr("src"));
$("#imgP").removeAttr("src");
$("#imgP").attr("src", "../../../../images/p.png");
How can I wait until the element is fully loaded so I can access it, is there any jquery event I use?

Try this:
$('body').on("load", "#imgP", function() {
alert($("#imgP").attr("src"));
$("#imgP").removeAttr("src");
$("#imgP").attr("src", "../../../../images/p.png");
});

have you tried onload function in html element?
ex :
<img onload="function()"/>

Always check the sequence of your method calls. I was trying to access the element even before it was created. Issue solved. Hope someone will find it helpful

If more than one object with same name exist, jquery simply operate on first object. So always give the context, which will tell jquery to find the object in particular div only. If no object find, jquery will not tell you or alert you still the you operate on its property or value.
So replace with $("#imgP") to $("impP", $("#yourparentdiv")) or you can check with $(#imgP)[0] (it is bad habbit, only for understand).
You can check via debugger before alert or count of object in $("#impP").length .
http://api.jquery.com/length/
http://api.jquery.com/jquery.each/
You can check .each via
$("#impP").each(function( key, value ) {
alert( key + ": " + value );
});

Related

jQuery lazy load of element's object or reload it on demand

I was wondering if it's possible to have only one creation of jQuery object from element query , even when the element is not available yet, and let's say will be added later by other function on page, reload the object to find this element on page?
What I was trying to do for tests is:
<script>
var crab = $('#crab');
</script>
<div id="crab">Hello Crab</div>
<script type="text/javascript">
crab.load();
console.log( crab.html() );
</script>
This, of course, still returns undefined.
I want to do it because PHPStorm complains about duplicate jQuery selectors in my functions, because something when this element exists, I have to grab it, do something and delete it, then when it's recreated, I have to get it again in the same function.
Possible? Or just leave 2 queries on the same element when necessary?
Thanks

Unexpected error using an indexed element id

I'm new to javascript and jquery, and stumbled upon an issue while writing a script.
My script is generated by php code which reads lines from a file, parses it and prints them out using arrays. js then validates form input, and outputs useful messages to the user.
I have successfully used js and jquery on $('#id').blur on various elements. However when I tried doing it on my indexed element, I came across this problem.
Code:
$('#NS_IN[0]').blur(function() {
alert("Called");
CopyNStoMain();
});
I noticed that this function would never get executed. I tried looking at the variables in console.
typeof($('#NS_IN[0]')) is an object; but typeof($('#NS_IN[0]').val()) is Undefined.
In my html code, I have:
<input type="text" id="NS_IN[0]" value="" name="NS[0]">
What am I doing wrong? If the id NS_IN[0] is defined and $(NS_IN[0]) refers to an object, shouldnt $(NS_IN[0]).val() exist and hold the value of the input box?
You need to escape the jquery selector characters.
$('#NS_IN\\[0\\]').blur(function() {
alert("Called");
CopyNStoMain();
});
You already have the answer here...I don't know how to tag your question as a duplicate.
//get
bla = $('#txt_name').val();
//set
$('#txt_name').val('bla');
In jQuery, the [] works in a different way, like:
div[id^="player_"]
So, one of the solutions, is to select the items which ID starts with something:
$("input[id^=NS_IN]").val();
It works when you use a different selector, as jquery uses the [] as an attribute selector itself. So use e.g. (see fiddle: http://jsfiddle.net/rePQm/1/ ):
$('input').click(function() { alert("clicked " + this.id); });
an element selector that selects all input elements and adds the click handler to all of them. See the selectors section of the jquery documentation at http://api.jquery.com/category/selectors/ for more possible selectors .

this.is(":checked") not working

I'm using the following code to loop through all the checkboxes in my form. The boxes are gerenated dynamicaly from a php script so I won't know the names or the number of check boxes.
I need to find out which checkboxes have been ticked so I only pass those ones to the php script that handles the form.
$("#panelform input:checkbox").each(function () {
if(this.is(":checked")){
fields = fields+"&"+this.name+"="+this.value;
}
});
When the script gets to the this.is(":checked") it errors but being jquery my console doesn't show me any error messages just stops.
if I alert or console.log "this" after the first line I get the form field so I know that that much works.
try with
if($(this).is(":checked")){
since this is just a reference to the node in the DOM (and you need instead to use the jQuery wrapper to chain the method is().
Try this:
if( this.checked)
this is the plain DOM node, checked is its property to tell you if it's checked or not. Creating a whole new jQuery object just to see if a property is set is redundant.
In that contect, this refers to the DOM element, not the jQuery object - and DOM elements have no method is(). You can wrap it in a jQuery object if you want to use is method:
if($(this).is(":checked")){
or use the DOM Element's checked property:
if(this.checked){
$(this).is(':checked')
if you want to serialize your form try this
$('your-form-selector').serializeArray()

how to change the value of <span lang> in javascript?

i have an element in html as shown below.
<tr><td class="HELPTEXT"><span lang="HLPMTXT1" id="HLPMTXT1"></span></td></tr>
i want to change the value of lang according to particular condition.
I tried as given below.but its not working.
<script>
document.getElementById("HLPMTXT1").lang ="HLPMTXT2"
</script>
Could anyone help me for changing the value of lang attribute of span?
You should use setAttribute(name, value) to do that, so your code would look like:
document.getElementById("HLPMTXT1").setAttribute("lang", "HLPMTXT2");
You can also use getAttribute(name) to retrieve the value using JavaScript.
https://developer.mozilla.org/en/DOM/element.setAttribute
https://developer.mozilla.org/en/DOM/element.getAttribute
Edit: It's also possible that your script is not working because you're trying to access the element before it exists in the DOM. Best way to insure that your element exists is by either: a) putting your script tag after the element, b) using the unload event to delay execution of your JS until everything is loaded, or c) use the DOMContentLoaded event. The latter, however, is a bit tricky to get to work cross-browser (without reusing somebody else's code that already addresses those problems) so you might want to read up on it first.
document.getElementById('HLPMTXT1').setAttribute('lang', 'HLPMTXT2');
Not all attributes can be accessed through the object properties

Find the ID of the window which generates alerts

Is there a way to find out the id of the IE window that generates alert boxes? I assume it is the document or window itself.
Either simple html or jQuery can be used.
I tried something like:
var id = $(this).parent().attr('id');
but to no avail.
Ultimately I want to find out the ID of the window/document which generates javascript alerts so I can override it.
Thanks.
If the document did not specified an ID attribute for the body, there's not much info you can gather... the html tag doesn't specify an ID attribute either...
You must build a mechanism yourself to identify your windows..
See the jQuery data() to attach a custom "property" to a DOM object if you want to keep your windows handles somewhere.
To override the alert function, see my response to this question: JavaScript: Overriding alert()
Good luck
Not sure why you would need to do this but if you mean that you want to override the alert function it's pretty easy:
alert = function() {
// do some custom stuff here
};

Categories

Resources