I don't really know why I can't do this apparently silly thing.
I have a template that parses dynamically a js file with an html textarea only with the class attribute.
What I want to do is to add name attribute to it so I can get it with $_POST in php.
So far I have tried:
var txt = $('.note-codable');
txt.prop('name','description');
$('.note-codable').attr('name','description');
and other options that doesn't seem to work.
This is html that is added dinamycally:
<div class="note-editor">
//other divs
<textarea class="note-codable"></textarea>
</div>
when I do (in order to TRY the code):
var txt = $('.note-codable');
alert(txt);
the result is [object] [object]
what am I missing? why is attr name not writing?
Try this, tell me if there is anything else I can do.
window.onload = function(){
//get the element
var txt = $('.note-codable');
//set the name attribute
txt.name = 'yourName';
//get the name and console.log it
console.log(txt.name);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note-editor">
//other divs
<textarea class="note-codable"></textarea>
</div>
You seem to be doing it right... Here's an example for clarity.
$(function() {
var $el = $("#example");
var $out = $("#output");
$out.append("<p>Name is: " + $el.attr('name') + "</p>");
$el.attr('name', 'description');
$out.append("<p>Name is: " + $el.attr('name') + "</p>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="example"></textarea>
<div id="output"></div>
Your code is working on my end: the name is set dynamically. You are getting [object object] from the alert because you are returning the textbox itself, not its contents or the value of its name attribute.
Assuming you want the name put into the textbox instead of added as an attribute, you should set it with txt.val('your name here').
var txt = $('.note-codable');
txt.attr('name', 'description');
console.log(txt.get(0));
txt.val(
'html: ' + txt.parent().html().trim() + '\n' +
'name: ' + txt.attr('name')
);
textarea {
height: 100px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note-editor">
<textarea class="note-codable"></textarea>
</div>
If you alert an object(like what the jQuery selector will return) it will not give display the information. It will always read [object Object]. Using console.log would be a better way to read through it. Alternatively, if just want to test if the name attribute is in fact applied, this should the trick.
var txt = $('.note-codable').attr('name');
alert(txt);
Assuming the jQuery was successful, it should read description
Related
I'm trying to get the parent's attribute value and display that as text inside the child's div. It's returning as undefined.
My HTML:
<div class="info" data-info="whatever I want displayed" ></div>
My jQuery:
$(function(){
var $info = $(this).parent().attr("data-info");
$('.info').prepend($('<div class="new-info" >' + $info + '</div>'));
});`
My desired result:
<div class="info" data-info="whatever I want displayed" >
<div class="new-info" >whatever I want displayed</div>
</div>
There is no parent. And $(this) on the first line is not refer to info element. You need to select .info element first and followed by prepend like so :
$(function(){
// and if you already use html5 data attribute
// you can just select it value by using .data()
var
$info = $('.info'),
dataInfo = $info.data("info");
$info.prepend('<div class="new-info" >' + dataInfo + '</div>');
});
I have some code that is roughly along the lines of this:
exportValue = [];
function reduceArray() {
//does something
exportValue = parseFloat(exportValue)
}
From that, I get that exportValue is 73951. I then have to add that number to the page... so I tried both of these:
$("#exportValueDiv").append(exportValue);
$("#exportValueDiv").append("<li>" + exportValue + "</li>");
But that doesn't work.. I'm confused on how to add something like a variable to the DOM....
If I do something like:
$( "#exportValueDiv" ).append( "<li>value</li>")
it works, but I don't want to add a string, I want to add the value of the variable. I looked this up, but I'm still confused, so any help would be greatly appreciated!!!
Look into jQuery manipulation
$("#exportValueDiv").text(exportValue); //Replaces text of #exportValueDiv
$("#exportValueDiv").html('<span>'+exportValue+'</span>'); //Replaces inner html of #exportValueDiv
$("#exportValueDiv").append('<span>'+exportValue+'</span>'); //Adds to the inner html of #exportValueDiv
The .append() contract expects a DOM element or HTML String. You will need to do:
$("#exportValueDiv").append("<div>" + exportValue + "</div>");
Try this:
$("#exportValueDiv").append("<div>" + exportValue + "</div>");
The following appends your variable to a div that already has information:
<div id="exportValueDiv">
<p>
Some information.
</p>
</div>
<script>
var exportValue = "Hello world.";
$("#exportValueDiv").append('<p>'+ exportValue +'</p>');
</script>
https://jsfiddle.net/supadave57/f9tqw0d4/
I know scope in javascript in sometimes tough but this time I suspect the issue may be jQuery execution order. In the following code I try to define a simple HTML element (simulates a button) in javascript and pass different text to it when mounting it in HTML using jQuery:
var name;
var buttonsecondary = '<div class="buttonsecondary clicked"><p>'+name+'</p></div>';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-item" id="things4">
<a href="aFabrica.html">
<div class="itemHome">
<div class="bg" id="buttonsecondaryfabrica"></div>
<script>
$(document).ready(function() {
var name = "A Fábrica";
$("#buttonsecondaryfabrica").after(buttonsecondary)
})
</script>
</div>
</a>
</div>
<div class="content-item">
<a href="lojas.html">
<div class="itemHome">
<div class="bg" id="buttonsecondaryloja"></div>
<script>
$(document).ready(function() {
var name = "Loja";
$("#buttonsecondaryloja").after(buttonsecondary)
})
</script>
</div>
</a>
</div>
The problem is that I get the same text on both buttons: "Store" although in the first alert getting "Street" and in the second "Store"...
Does anyone know how to explain it?
The problem is that the buttonsecondary variable already contains the final HTML of the button because it's merely a concatenated string.
You need to generate the desired HTML each time:
function generateButton(name)
{
return '<div class="buttonsecondary clicked"><p>' + name + '</p></div>';
}
Then:
var name = "A Fábrica";
$("#buttonsecondaryfabrica").after(generateButton(name));
And
var name = "Loja";
$("#buttonsecondaryloja").after(generateButton(name));
In your original code, you are creating a string with variables that are changed later on. When you change the variables, the string does not get updated because the variables are not bound. You need to create a new string if you want to pass in a new value for the name.
Change this:
var buttonsecondary = '<div class="buttonsecondary clicked"><p>'+name+'</p></div>';
To this:
function createSecondaryButton(name) {
return '<div class="buttonsecondary clicked"><p>' + name + '</p></div>';
}
Or, since you are using jQuery:
function createSecondaryButton(name) {
return $('<div>').addClass('buttonsecondary clicked')
.append($('<p>').text(name));
}
Then simply call the function:
$("#buttonsecondaryfabrica").after(createSecondaryButton('A Fábrica'));
$("#buttonsecondaryloja").after(createSecondaryButton('Loja'));
I have some class name fawas that displays some content. Actually i have to add some content below the Div in java script.please help me.
<div class="fawas">
this is my name fawas khan.
</div>
my javascript code is
var dynamic = "this is my contact number.";
var _body = document.getElementsByTagName('body') [0].innerHTML
=dynamic;
what i'm getting is only a appended div.
In pure javaScript, getting an element by className is ugly. See How to Get Element By Class in JavaScript? for more information.
Basically, you'll want this function:
function getElementsByClass(tagType, className) {
var elems = document.getElementsByTagName(tagType);
var returns = [];
for (var i in elems) {
if ((' ' + elems[i].className + ' ').indexOf(' ' + className + ' ') > -1) {
returns.push(elems[i]);
}
}
return returns;
}
Once you have that, the rest is not too bad:
var dynamic = document.createElement("div");
dynamic.innerHTML = "this is my contact number.";
var elements = getElementsByClass("div", "fawas");
if (elements.length > 0) {
// just change the first, as you did in your post
elements[0].parentNode.insertBefore(dynamic, elements[0].nextSibling);
}
I dynamically create your new div, rather than just a text string.
Then, I get the parent of the element you want to insert after, use the insertBefore function on whatever is after the element of your choice.
Here is a working fiddle.
As others have shown you, this can be a lot cleaner using jQuery. I don't know enough node.js to know if it has functions that will be more convenient, so I gave a pure JS solution.
In case you're interested in jQuery solution, here's a Fiddle
<div class="fawas">
this is my name fawas khan.
</div>
$(function(){
var dynamic = ('this is my contact number.');
$('.fawas').after('<div class="fawas2">'+dynamic+'</div>');
});
Your html should be,
<div class="fawas">
this is my name fawas khan.
</div>
<div id="fawas-2">
</div>
Your script should be,
<script type="text/javascript">
var dynamic = "this is my contact number.";
document.getElementById('fawas-2').innerHTML =dynamic;
</script>
You can do this
var oldcontent = document.getElementsByTagName('body') [0].innerHTML;
document.getElementsByTagName('body') [0].innerHTML = oldcontent + dynamic
Where dynamic is the content you want to add
I have a list of URLs:
localhost/action/add/234
localhost/action/add/244
localhost/action/add/334
localhost/action/add/254
In front of these values there is a text box, and when a value is typed into the box I want to append it to the end of the URL.
localhost/action/add/234/test text1
localhost/action/add/244/test text2
localhost/action/add/334/test text3
localhost/action/add/254/test text4
Can someone explain me how can I do it? I found out that its possible to do it using .val() but I'm unsure how to use it.
If you want it to update immediately:
<script>
$(function(){
var a = $('#url').text();
$('#textbox').keyup(function(){
var b = $('#textbox').val();
$('#url').text(a + '/test ' + b);
$('#url').attr('href', a + '/test ' + b);
});
});
</script>
<input id='textbox' type='text'></input>
<a href="localhost/action/add/234" id='url'>localhost/action/add/234</a>
The key things here are
use the .keyup() event to run the function whenever a keyboard key is released
modify the .text() of the url element on keyup
modify the 'href' attribute of the url element so that the link matches the text
Normally .val() is used to set/get the value of input elements, like the text box ^, or a dropdown
Assuming, you want to append the text that you typed in the textfield to the href (URL).
I think we can make it more simple.
Here is the working solution.
$(document).ready(function(){
$('#search').on('click', function(e) {
var search_url = e.originalEvent.currentTarget.href; //or else you can grab the URL anywhere from your DOM;
e.originalEvent.currentTarget.href = search_url + $('#search_term').val();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search_term" placeholder="Search..StackOverflow" />
Search
$(function(){
var currVal = $('.url').text();
$('input[type="text"]').keydown(function() {
$('.url').text(currVal.trim()+$(this).val().trim());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="url">
localhost/action/add/234
</span>
<input type="text" id="search_term" placeholder="blabla" />