Develop Reference

How to assign HTML text to a JavaScript variable?

Is it possible to assign HTML text within an element to a JavaScript variable? After much Googling, I note that you can assign HTML elements to a variable, but I want the actual text itself.
Details about my goal:
I am currently working on a CRUD application, and with the click of a delete button, a modal will display and ask the user for confirmation before deleting the record. Once the button has been clicked, I want to retrieve HTML text within a specific element used for AJAX call data. However, what I have tried so far is not being logged to the console; even when I change the global variable to var deleteLocationID = "test"; I doubt the modal displaying will affect the click function?
The code:
var deleteLocationID;
$("#deleteLocationBtn").click(function () {
deleteLocationID = $(document).find(".locationID").val();
console.log(deleteLocationID);
});
What I have tried so far:
Changing "deleteLocationID = $(document).find(".locationID").val();" to the following variations:
deleteLocationID = $(document).find(".locationID").html();
deleteLocationID = $(".locationID").val() / deleteLocationID = $(".locationID").html();
deleteLocationID = document.getElementsByClassName("locationID").value;
Any help would be much appreciated.

Use the text() method from JQuery, with this you can get the text inside of your element.
Use this way, it may help you:
deleteLocationID = $(document).find(".locationID").text()
Here is example of getting text from class element:
$('.locationID').text()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="locationID">45</div>

It depends on the type of element you are trying to find your value.
for input types you can find the value by .val() in jQuery like:
$(document).find(".locationID").val();
you can grab innerHTML of the element by .html() in jQuery like:
$(".locationID").html();
but if you want to grab innerText of an element you can use .text() in jQuery like:
$(".locationID").text();

JS : .prepend() an option to 2 select doesn't work

I hope the title is self explanatory but i'll try to explain my problem nonetheless.
in my HTML file, i have 2 select, with no option. On the page load, a ajax request is performed to fetch some datas. In the success callback of my Ajax request, i create an option element for every data i just got. I also prepend those newly created option element to both of my select, but the only prepend that works is the one done on the last select
Here are SC of my code, in this examlple, the option have been prepended on the into_APPNAME select only, and not into the from_APPNAME. If i would revert the prepend such as
$("#into_" + repoName).prepend(option)
$("#from_" + repoName).prepend(option)
only from_APPNAME select would have got options in it.
Any ideas what's going on ?

You have to create two different HTML elements or clone the first one you created in order to create a new one. This code for example should populate both of them:
var option1 = $('<option></option>').attr('value', branch).text(branch);
var option2 = $('<option></option>').attr('value', branch).text(branch);
$("#into_" + repoName).prepend(option1);
$("#from_" + repoName).prepend(option2);
Of course better to clone the option1 into the option2
var option2 = $(option1).clone();
Another way can be the following, getting rid of variables:
$("#into_" + repoName).prepend($('<option></option>').attr('value', branch).text(branch));
$("#from_" + repoName).prepend($('<option></option>').attr('value', branch).text(branch));

How to get ids from divs that were dragged into a drop zone on button click javascript

I'm trying to find a way to get the ids from dragged divs after they are in the drop zone.
All the drag components have an id from drag1 - drag8 and the drop zone is div drop zone. Because there are no divs in the drop zone when the page loads I want to gather the ids on a save button for now with a text box entry and drop down menu select.
I have tried the code below:
$(document).ready(function() {
$("#dropzone div").click(function() {
var index = $("#dropzone div").index(this);
$("#dropzone_drag").html("Index " + drag + " was clicked");
});
});
And I use jQuery for the text box, which works nicely:
$(document).ready(function() {
$('#save').click(function() {
alert($('#name').val());
});
});
How do I find the ids from dragged divs after they are in the drop zone?

After playing around i came up with the following:
var ids = {};
$("#dropzone>div").each(function(i){
ids[i] = $(this).prop('id');
});
which at the moment says undefined, but i did manage to put it on the save button so it no longer pops up when i open the page.
Any suggests please?

In my comprehension .index(this) returns the index of the element relative to the list "#dropzone div"., which may or may not contain the elements in the order you want. But if all your elements have a common class, say ".foo_bar" it probably would be easier to know the id given an clicked element.
Otherwise, as you're using this on the function, if this is one of your "drags" it is probably easier to pick the id from this than to try the indexes.
Try doing it like that and maybe it'll word better.
ids = {};
$("#dropzone>div").each(function(){
ids[$(this).prop('id')] = $(this).prop('id').replace(/[^0-9]/g, '');
});
the code .replace() means that we are removing characters (in this case anything that isn't a number) from the string so we end up with it's true number. Instead of it's place in the DOM.
If i didn't comprehend well your problem, correct my comprehension errors and i will edit the answer. And an html of the zones would be nice ;)

The following code worked for me:
<script>
var div = document.getElementById('dropzone')
</script>
and on the button i added:
alert( div.innerHTML )
The result gave me all of the div information from it's html page so i could select the information i wanted to push to the database.
Thank you all for you input and advice.
Matthew

Issue in select option in Jquery mobile

I have a table which contains input text and select option and button.The table row is cloned when the button is clicked. Every thing is working fine except the select option. After the table row is cloned the select option not display what i select. Here is the JsFiddle http://jsfiddle.net/aravinth/Ad22d/
Javascript code like
var b = 1;
function cloneRow() {
var row = document.getElementById("table");
var table = document.getElementById("particulars");
var clone = row.rows[1].cloneNode(true);
var clones = row.rows.length;
var workerName = clone.cells[0].getElementsByTagName('input')[0];
var position = clone.cells[2].getElementsByTagName('select')[0];
var date1 = clone.cells[3].getElementsByTagName('input')[0];
var fromHr = clone.cells[4].getElementsByTagName('input')[0];
var toHr = clone.cells[5].getElementsByTagName('input')[0];
var add = clone.cells[1].getElementsByTagName('input')[0];
workerName.id = "workerName" + b;
position.id = "position" + b;
date1.id = "date1" + b;
fromHr.id = "fromHr" + b;
toHr.id = "toHr" + b;
add.id = "add" + b;
$(date1).datebox();
table.appendChild(clone);
b++;
}
Also i referred this
1 . Change Select value using jQuery Uniform.js
2 . jquery cloning a block of element. select element acting weired
3. select not working after .clone
but not get success. Please suggest some solutions.

It seems, jQuery mobile doesn't recognize the cloned selectmenu.
What you can do, is remove the selectmenu and re-add only the HTML select and then initialize it with selectmenu()
$('.ui-select', clone).remove();
clone.cells[2].appendChild(position);
$(position).selectmenu();
See modified JSFiddle
Update:
I just followed jquery cloning a block of element. select element acting weired and found #malko's answer, which is a lot more elegant than removing and reinserting. This reduces it to
$(position).closest('.ui-select').replaceWith(position);
$(position).selectmenu();
See JSFiddle

I think you solved select option issue by using this answer. And another one issue you need to fix in your fiddle. The issue is time picker for last two columns (fromHr and toHr).
To fix this you need to add the bellow lines in your javascript code.
$(fromHr).datebox();
$(toHr).datebox();
because those rows are dynamically created. So you need to add the above lines to show time picker in your fromHr and toHr.
See this working FIDDLE

The issue is that jQuery Mobile recreates a lot of elements, for example your select, to be non-native widgets, and then binds functions to certain events. When you just clone the row, you aren't getting the event-bindings, so what you need to do is actually append the raw html -- what it was before it got re-rendered -- and then trigger the create method:
var template="<tr><td>..your row here..</td></tr>";
$("#particulars").append(template).parent().trigger('create');
I have a barely working fiddle, but I removed a lot of your code so I could easily illustrate what I am talking about.
http://jsfiddle.net/Ad22d/81/

I had the same issue and fixed it by calling selectmenu("destroy") on the original select box before cloning, and then re-initializing select boxes by calling selectmenu() after cloned select is appended.

Select an option of select box using the value

I have a dropdown box and I want to select the option based on value. Somehow I am getting handle to value say 3. Now I want to manually select the option which has got value 3.
I have tried something like this
selectBoxElement.options[selectedValues].selected = true;
where selectedValue = 3, but it is not working.

If using jquery (as per your tag), you can do:
$(document).ready(function() {
$("#yourSelectId option[value='3']").attr("selected", "selected");
});

Something like that should work (assuming $ is not overwritten and is alias for jQuery):
$(selectBoxElement).find('option[value="selectedValue"]').prop('selected', true);
or rather:
$(selectBoxElement).val(selectedValue);
which is simpler and achieves similar result :)

If you're using plain JS (except for the jQuery tag, you didn't explicitly say whether you want plain JS or jQuery), this should do what you want:
for (i=0; i<selectBoxElement.options.length; i++) {
if (selectBoxElement.options[i].value == selectedValues) {
selectBoxElement.options[i].selected=true;
break;
}
}

This is simple please try the following
When using the index position of the option tag within the select box
selectBoxElement.selectedIndex = index; // Where the index starts from 0
When using the value
selectBoxElement.value = value;// Where the value is the attribute defined within option tag
Hope this solves your problem.