Develop Reference

Strange behaviour with jquery load function

I am using jquery's load function to updated a div inside my jsp. However the issue is, even if I give the wrong div id the correct div gets updated but if I give the correct div id , it doesn't work.
Inside my jsp:
<div id="markers" class="height-400"></div>
Inside Js:
$("#marker").load(location.href + " #marker>*", ""); //works (notice marker instead of markers)
$("#markers").load(location.href + " #markers>*", ""); // Doesn't work
Can someone please help me understand what's going on here.
Referring to this post Refresh/reload the content in Div using jquery/ajax

Try using the code without the double quotes after your CLASS/ID.
$("#markers").load(location.href + " #markers>*");

Appending div with onkeypress event

The main problem: I want a inputfield to change its width based on what the user types in. This is solved. The problem comes when appending the same code several times using the onKeyPress-event with javascript append.
The first picture here shows how the code looks like before the user appends it. The inputfield is changing it's width based on the user input successfully:
The second picture here shows how the same code looks like in the "append"-function before executing:
The third picture shows how the append should look like (the code at the top) to work, while the code below shows how the code looks like after being executed by append. It seems like the 'px';'> is missing out every time it gets appended and the input width change does not work:
The fourth picture shows where all the "bubbles" end up when being appended:
So the question is, how can i get the appended code to act like in the first picture? Right now it's just adding the inputfields/boxes while not changing it's width when the user enters text.
Edit: the code:
var inv = 1;
$("#faPlus0").click(function () {
if (inv < 10) {
$(".bubbleBox").append("<span id='input-append' class='badge badge-secondary'><input type='text' name='invo" + inv + "'id='bubble' placeholder='Navn' onkeypress='this.style.width = ((this.value.length + 2) * 9) + 'px';'></span>");
inv++;
};
});
<span id="input-append" class="badge badge-secondary"><input type="text" name="invo0" id="bubble" placeholder="Navn" onkeypress="this.style.width = ((this.value.length + 2) * 9) + 'px';"></span>

The problem is that you're using single quotes for the keyup function and also for the string inside the function. This will cause some trouble because you'll be closing the tag once you put the second quote (+ 'px').
This is the generated HTML:
<span id='input-append' class='badge badge-secondary'><input type='text' name='invox'id='bubble' placeholder='Navn' onkeypress='this.style.width = ((this.value.length + 2) * 9) + 'px';'></span>
See anything wrong there? StackOverflow's code highlight will show you your mistake.
You'll have to escape those quotes to make this work. My recommendation would be to use this:
.append("... onkeypress=\"this.style.width = ((this.value.length + 2) * 9) + 'px';\"> ...
Also, add a space before the id part.

PHP echo appears to work but doesnt show up in HTML

I am trying to use a php script to generate HTML in order to save lines and what not. I am using jQuery to call my php and then put the result into a specified div as shown below:
function createSidebarRow(div, cellNum, rowName, rowDesc) {
$("#" + div).load("createIndexSidebarRow.php?cellNum=" + cellNum + "&rowName=" + rowName + "&rowDesc=" + rowDesc);
}
However, when this is executed the HTML is not updated on the page, I can see that the code has worked because the browser network activity confirms it. I am trying to figure out what is causing it to not update.
This is the network activity confirming the echo'd HTML.

Sorry for stating the obvious, but the div you are trying to fill up does exist with that particular id right?
If so, try this:
$("#" + div).load("createIndexSidebarRow.php?cellNum=" + cellNum + "&rowName=" + rowName + "&rowDesc=" + rowDesc, function() {
alert('success');
});
If the id does exist (and it's unique) and you get an alert there should be no reason for it not to work.

It might be so, that the div is not yet created in the DOM. (the div that should received the html).
Are you calling createSidebarRow directly on page load?
If so, put the function call in a document ready:
jQuery(document).ready(function(){
createSidebarRow (... );
});

Turns out jQuery doesn't play ball when you include spaces in the POST URL. I removed the space and used %20 instead and all is well now. Thanks for any advice.

prevent execution of innerHTML

I have a Chrome extension in which I'm fetching tab title and url, and putting them into one single line. Same as Chrome History. I want to separate them visually, dark title, lighter url.
and for that I'm using this code
nodeTitle.innerHTML = tabs[j].title + "<span id='url'>" + ' - ' + tabs[j].url + "</span>" ;
CSS for #url is set and everything works fine, unless page title have some actual HTML code/tag in it, and title get messed (ofc. innerHTML works as it supposed to).
example page...look at title
innerText doesn't help in this situation, because I need < span > treated as it is.
Is there any way to cancel HTML execution for that first part (which can be any variable) or I have to separate them into two different elements and style them?
(and I'm really trying to avoid that)
...maybe check for tags and insert space if any exist??!... relized while writing this question, span tag in pointy brackets :)

You can use createTextNode as an easy (though perhaps not very efficient) way to do this:
function textToHtml(str) {
return document.createTextNode(str).innerHTML;
}
nodeTitle.innerHTML = textToHtml(tabs[j].title) + "<span id='url'>" + ' - ' + textToHtml(tabs[j].url) + "</span>" ;

ASP.Net Change ImageButton.ImageUrl on mouseOver

I am learning ASP.Net. I have a dynamically created ImageButton that I would like to change the ImageURL for when the user hovers over the control. I have tried this but it does not work:
imgStars.Attributes.Add("onmouseover", "this.src= '~/Images/4Stars.png'")
If I set the imgStars.ImageURL in the codebehind to ~/Images/4Stars.png it works. But it does not work in javascript.
Please help. I have tried searching for my answer for hours, but I do not have a clue what to do.

"xanadont" answered you right but your solution will not work for every scenario. To ensure that every relative directory will be usable by the client, use this code snippet:
imgStars.Attributes.Add("onmouseover", "this.src= '" + this.Page.ResolveClientUrl("~/Images/4Stars.png") + "'");

in VB you should use the following code:
*imgBtnRegister.Attributes.Add("onmouseover", "this.src='" + Page.ResolveClientUrl("~/Images/Register_2.jpg") + "'")
imgBtnRegister.Attributes.Add("onmouseout", "this.src='" + Page.ResolveClientUrl("~/Images/Register_1.jpg") + "'")*
use *Page.ResolveClientUrl("~/Images/Register_2.jpg")* instead of *this.Page.ResolveClientUrl("~/Images/Register_2.jpg")*