How to change name and id of element using jQuery? - javascript

I'm new at jQuery. I'm cloning one specific HTML block and trying to change last cloned html's element's nameor id, class but i couldn't. I can find and alert name of element that i want to change, but i can not change it. Hope you can help me.. thanks in advance.
My code
jQuery(document).on("click",".smclass",function(){
var html = jQuery(this).closest(".entry-edit").clone().appendTo(".main-col-inner").html();
html = jQuery(html).find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
}
HTML
<div class="entry-edit">
<!-- html codes -->
<button id="Addfield" title="Field Ekle" type="button" class="smclass" onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
<!-- html codes -->
<select id="Type" name="optional[1][type]" class="start">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
<!-- html codes -->
</div>

Your code is just putting an html string into a variable and then creating a new jQuery object with said html. You are not selecting the new element and changing it
//Just remove the .html() call and you will have the cloned element
var ele = jQuery(this).closest(".entry-edit").clone().appendTo(".main-col-inner");
ele.find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
You also do not need to make multiple .attr calls, you can pass it an object with the name value pairs you want to set
ele.find(".start").attr({
"name":"optional[2][type]",
"id":"Type1"
});

just try vise versa
var clonedObject = jQuery(this).closest(".entry-edit").clone();
clonedObject .find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
clonedObject.appendTo(".main-col-inner").html();

Related

How to pass a JavaScript variable to DIV tag?

I am trying a code to pass a javascript variable to the div tag to change its attribute. If anyone knows how to do this, help me.
<div id="rate" class="money" data-wpac-chan=""></div>
I want to pass a javascript variable to the data-wpac-chan.
<script type="text/javascript">
var div = document.getElementById("rate").data-wpac-chan = "bal";
</script>
It is not working.
I want to replace data-wpac-chan=" " to data-wpac-chan="bal"
This should do it:
document.getElementById("rate").setAttribute("data-wpac-chan", "bal");
SetAtrribute will set any attribute on an HTML element.
You can also use dataset to assign the value to the attributes that has data-. Notice that, you need to use the camelcase as attribute name. So, wpac-chan becomes wpacChan
document.getElementById("rate").dataset.wpacChan = 'bal'
<div id="rate" class="money" data-wpac-chan="">sadasd</div>

How to display dropdown menu items inside the dropdown using javascript?

Below is my html:
<div class="row">
<div class="col-lg-11">
<ul class="list-unstyled" id="slider">
</ul>
</div>
</div>
Below is my javascript:
var locationbegin="<div class='form-group'><label>Location</label><select
class='form-control' id='location'><option>test</option>";
$("#slider").append(locationbegin);
var locationoptions = "<option>tester</option>";
$("#slider").append(locationoptions);
var locationend="</select> </div>";
$("#slider").append(locationend);
Below is the output:
The problem is the tester comes out of the location dropdown. I'm not sure where i'm going wrong. You can also use http://rendera.herokuapp.com/ to render the code.
Edit: The reason the javascript is separated is because of some other javascript code in between in the code.
You are going wrong in not using proper HTML. You have to close the tags or the browser does this for you whenever it computes it should. append first turns your HTML into NodeList (which results in the select and div being closed) and afterwards i is appended to the slider. Now, if you append further options onto that HTML structure, you are ffectivly appending thos behind the closed div.
You should keep a reference to the select to be able to add more optinos whenever you like:
a) create the surrounding markup:
var myFormField = $('<div class="form-group"><label>Location</label><select class="form-control" id="location"><option>test</option></select></div>')
b) find the select and store it to a variable:
var mySelect = myFormField.find('#location');
c) add as many options as you like
mySelect.append('<option>Value 2</option>');
mySelect.append('<option>Value 3</option>');
mySelect.append('<option>Value 4</option>');
Oh this is not how it works. .append will automatically add closing tags if your HTML strings doesnt have it.
So just after the first append call, your html will become:
<div class='form-group'>
<label>Location</label>
<select class='form-control' id='location'>
<option>test</option>
</select>
</div>
And further insertions will happen after this HTML.
So instead, do this:
var locationbegin="<div class='form-group'><label>Location</label><select
class='form-control' id='location'><option>test</option>";
var locationoptions = "<option>tester</option>";
var locationend="</select> </div>";
$("#slider").append(locationbegin + locationoptions + locationend);

Can I use html5 data attribute in HTML select box element?

Any idea can I use .data attribute in HTML select box?I red HTML5 documents but I didn't find any information that could help me.
Is it legal:
<span>Select depatament</span>
<span>
<select id="department" onchange="EnableSelectBox(this)" data-spacing="10cm">
<option selected disabled>-Select-</option>
</select>
</span>
Yes it fine to use data in Html5 tag. I don't know why you want to use in such a way, but you can use it.
for example like this
$(document).ready(function() {
alert($('#department').data('spacing'));
});
jsfiddle link
Using data attributes
Any attribute on any element whose attribute name starts with data- is a data attribute.
To answer the question: Yes. You can use data attributes on any element.
It works fine. Test in JS using:
alert(document.getElementById("department").getAttribute("data-spacing"))

Get text inside HTML comment tag?

I have the following HTML:
<!--
<option value="HVAC">HVAC</option>
<option value="Cooling">|---Cooling</option>
<option value="Heating">|---Heating</option>
-->
....
I fetch this file dynamically using jQuery's get method and store it in a string variable named load_types.
How can I strip the HTML comment tags and everything outside of them? I only want the inside HTML:
<option value="HVAC">HVAC</option>
<option value="Cooling">|---Cooling</option>
<option value="Heating">|---Heating</option>
I tried to use the solutions here but nothing worked properly--I just get null as a match.
Thanks for the help!
Please never use regex to parse HTML. You can use the following instead:
var div = $("<div>").html(load_types),
comment = div.contents().filter(function() {
return this.nodeType === 8;
}).get(0);
console.log(comment.nodeValue);
DEMO: http://jsfiddle.net/HHtW7/
You can simply get the html of the parent tag where the comment is and do a .replace("<!--","").replace("-->", "") which will simply remove the comment tags and then append this markup to some other parent or replace your current markup or create a new parent for it and append it.
This will allow you to use the jQuery selectors to retrieve the required data.
var comment = '<!-- <option value="HVAC">HVAC</option> <option value="Cooling">|---Cooling</option> <option value="Heating">|---Heating</option> --> ';
jQuery("#juni").append("<select>"+comment.replace("<!--", "").replace("-->", "") + "</select>")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="juni"></div>

getElementById returns allways null if i search for new created Element

i want to duplicate one element and then assign to new id and names. my aim is later i want find that element again. here is an example:
<div id="contDiv">
<div style="float:left"> filename </div>
<div style="margin-left: 323px"> playtime(in Sek.) </div>
<div id="tl_Einst" class="editor-field">
<select id="Medianames" onchange="change(this)" name="TL_Medianame">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg- for="Filename"> </span>
<select id="playtime" class="playtime" name="playtime" disabled="">
</div>
<input id="More" type="button" onclick="Addfiles()" value="+">
</div>
in the runtime i duplicate the Element "tl_Einst" with its children. then the user changes the content of the combox then i read them and send them to the server. later i get an answer. so i call the GetelementById("newElementID"), but i get always null, if search for the new created element. what can i do?
thank you
marek
The proper syntax is:
var el = document.getElementById("newElementID");
Typically, # is for JQuery or other javascript frameworks, or as #Quention mentions below, can also be used with document.querySelector.
Where are you adding the element to the DOM? Could you include that code too?
Have you added it to the page?
getElementByID will only find an element in the DOM. You can either add it to the page or simply assign it to a variable.
var newElementID= document.createElement("p");
You can now find it in your code with newElementID even if it's not in the page.

Categories