I am using this code below
var delLink = $('#deleteItem').attr('href');
to get the URL (href) of a link identified by #deleteItem.
The problem occurs when I use JQuery to add new variables onto this URL and I want to see the new dynamically added variables also displayed by the above code.
How can this be done, now it only displays the orginal URL without any of the new variables.
Thanks
delLink contains the result of your query. It is not a reference to href.
// Assigns the value of href to delLink
var delLink = $('#deleteItem').attr('href');
// Changes the href value on the DOM element
$('#deleteItem').attr('href',delLink+','+allVals);
delLink does not know about the update, to update delLink you again need to execute:
delLink = $('#deleteItem').attr('href');
What you could to make it a little easier for you is cache the jQuery object reference to the anchor element in the DOM and simply keep accessing the href attribute from it:
// Create a jQuery object reference to the anchor element in the DOM
var $delLink = $('#deleteItem');
// Changes the href value in on DOM element
var currentHref = $delLink.attr('href');
$('#deleteItem').attr('href', currentHref + ',' + allVals);
// Results are available through your reference
$delLink.attr('href');
Related
I am trying to save a variable that contains HTML Element, into localStorage, this way I can call that variable again (from localStorage) anytime I want.
I am executing the javascript in the background & content script of chrome extension
So I create the variable and load it with the HTML Element that I want to save:
var btnelm = document.getElementById("ELM_ID");
I then attempt to save that variable into localStorage (hoping to be able to use that variable later)
localStorage["btnelm"] = btnelm;
But when I called the localStorage which I need it to contain the html element in my variable
localStorage["btnelm"]
I get this string text (and not the actual html element that was in my btnelm variable:
[object HTMLInputElement]
Which of course means, when I treat localStorage["btnelm"] as a variable containing my html element, it does not work:
localStorage["btnelm"].innerHTML returns undefined
I understand that localStorage stores only string values, so what are my options to be able to store my
btnelm and when called, be able to treat it as when I first created (i.e. accessing it with .childern for example)
Thanks in advance
You can't save the DOM element itself... But you can save its outerHTML.
<div id="ELM_ID">My Div</div>
var btnelm = document.getElementById("ELM_ID").outerHTML; // <== here
localStorage["btnelm"] = btnelm;
console.log(localStorage["btnelm"]);
The outputs is :
"<div id='ELM_ID'>My Div</div>"
EDIT
To use the outerHTML once retreived... And look for its properties as is was a real DOM element, simply use the .createElement() method to "recreate" it...
let tempElement = document.createElement("div")
tempElement.innerHTML = localStorage["btnelm"]
console.log(tempElement.children[0].innerText) // Will output "My Div"
Trying to open a picture in a new tab, the values comes from a looping object.
How will I pass the value of doc.strDocument to onClick ?
PUG:
a(onClick="window.open('/userImages/documents/'+doc.strDocument);")
HTML:
<a onClick="window.open('/userImages/documents/'+doc.strDocument);"></a>
Your concatenation is fine (as long as strDocument has a value that when concatenated with the static text forms a valid URL).
But, this is much simpler when it comes to <a> elements - no onclick needed because <a> elements can target new windows with the target attribute.
function getLink(){
var someData = "foo";
return "some/path/" + someData;
console.log(link.href);
}
test
And, even that should be improved by moving the JavaScript out from being inline with the HTML:
var someDynamicallyGottenValue = "foo";
var link = document.getElementById("dynamicLink");
link.href = 'http://someDomain.com/' + someDynamicallyGottenValue;
console.log(link.href);
test
You can pass JSON data to Pug.
{"book": {"name": "Dracula"}}
And your PUG code would be,
a(onClick="window.open('/userImages/documents/#{book.name}');")
Pug also support variables.
- var foo = book.name;
a(onClick="window.open('/userImages/documents/#{foo}');")
Tested using - http://naltatis.github.io/jade-syntax-docs/#variables
Hope this helps.
I created a constructor that will handle a custom list control. I created a method in order to allow the user to add elements to the list, and I need to assign event handlers to the click events of the list elements (divs).
A simplified version of the code is here. The list elements are created using the innerHTML property and a string template upon which I substitute specific parts. Later I get the element by it's id and assign it a function in closure:
function prueba(){
var plantilla = '<div id="«id»">«texto»</div>';
var f = function(nombre){
return function(){console.log('mi nombre es ' + nombre)};
};
this.agregar = function(id, texto){
var tmp = plantilla.replace('«id»', id);
tmp = tmp.replace('«texto»', texto);
document.body.innerHTML += tmp;
document.getElementById(id).onclick = f(id);
};
};
The problem is that, apparently, the event handler is unasigned to previous created divs, so is only retained by the last one, as it can be tested with the following code:
var p = new prueba;
p.agregar('i1', 'texto1');
console.log(document.getElementById('i1').onclick.toString());//shows the function code
p.agregar('i2', 'texto2');
console.log(document.getElementById('i2').onclick.toString());//shows the function code
console.log(document.getElementById('i1').onclick.toString());//returns 'null' error
p.agregar('i3', 'texto3');
console.log(document.getElementById('i3').onclick.toString());//shows the function code
console.log(document.getElementById('i2').onclick.toString());//returns 'null' error
This happens in Iceweasel as well as in Chromium. It does NOT happen when I add 'onclick = f(«id»)' in the template (which I cannot do here because of the assigned function scope), and neither happens if I use document.createElement. What am I doing wrong?
You destroy elements previously created when you do this:
document.body.innerHTML += tmp;
Instead use insertAdjacentHMTL() if you want to append using HTML markup.
document.body.insertAdjacentHTML("beforeend", tmp);
Now instead of going through this destructive process...
serialize the existing DOM nodes to HTML
concatenate the new HTML fragment to the serialized nodes
destroy the old nodes
recreate the nodes with the new nodes
...it simply creates the new content and places it before the close of the body element.
Basically, remove element.innerHTML += ... from your coding practices. It's never necessary, it's inefficient and it causes problems like what you've described.
FYI, the .insertAdjacentHTML() method receives 4 different string possibilities as the first argument. Each one designates a position relative to the element on which you're calling it.
The strings are...
"beforebegin"
"afterbegin"
"beforeend"
"afterend"
The labels are pretty self-explanatory. They position the new content before the current element, inside the current element at the beginning, inside the current element at the end, or after the current element, respectively.
Your full code will look like this, which I shortened a bit too since the tmp really isn't needed here:
function prueba(){
var plantilla = '<div id="«id»">«texto»</div>';
var f = function(nombre){
return function(){console.log('mi nombre es ' + nombre)};
};
this.agregar = function(id, texto){
document.body.insertAdjacentHTML("beforeend",
plantilla.replace('«id»', id)
.replace('«texto»', texto));
document.getElementById(id).onclick = f(id);
};
};
In this case:
var count = $(count_el).data("count");
$(target).html("hello"+count);
Does it mean that only if we can change the data('count') in the url can we use this dom xss?
like <script>codes</script> etc.
jQuery.data stores the information on the element or object itself (if it is an element it first pulls the data from the data-* tags).
$el = $("<div data-count='1'></div>")
$el.data('count') // 1
$el.data() // {"count":1}
If, however, you are worried about XSS and somehow malicious HTML is embedded in your data tags, you could use .text() instead of .html().
$parent = $("<div></div>");
$child = $("<div data-count='<script>alert(\"malicious code\");</script>'></div>");
count = $child.data('count')
$parent.html(count) // this will run the embedded script
$parent.text(count) // this will not
I tried to use the method data (jQuery 1.7.1) in this code:
var q = '<div class="form-error-marker"></div>';
var t = $(q).data('message', message).insertAfter(el);
and it does not work.
Note that this works:
var t = $(q).attr('data-message', message).insertAfter(el);
Why does the first variant not work?
EDIT: insertAfter works correctly and new div is added after el (which is instance of one element which I get by getElementById() function; long story short I have a library that I extend).
When I say 'it does not work' I mean that the attribute 'data-message' is not stored.
Using data like that sets an arbitrary piece of data for this node; it doesn't add a new data- attribute. Just add the attribute with the attr function, and then access it with data
var q = $('<div class="form-error-marker"></div>').attr("data-message", message);
Now access it like this:
var message = q.data("message");
Here's a fiddle
When you use jQuery.data you don't change element attributes, instead your data saved in $.cache.
So if you want to change element attributes use jQuery.attr, when you want to save some info use jQuery.data