Develop Reference

How To fetch the value of a DIV

I have integrated froala editor on my HTML page. I need to fetch the data I have written inside the div with its HTML properties.
Below is my code:
html
<button>
click
</button>
<div id="froala-editor-br">
The editor can use <code>BR</code> tags. When ENTER key is hit, a <code>BR</code> tag is inserted.
</div>
js code
$('div#froala-editor-br').froalaEditor({
enter: $.FroalaEditor.ENTER_BR
});
$("button").click(function(){
var chk = $('#froala-editor-br').html();
alert(chk);
});
And here is the working jsfiddle
If you press the click button, it is fetching the froala code, not the code I am entering.

Just replace your code with below script.
$("button").click(function(){
var chk = $('#froala-editor-br').froalaEditor('html.get');
alert(chk);
});
Here is the documentation link.
getHTML

Just need to update selector in the one line inside button click function to:
var chk = $('#froala-editor-br .fr-element').html();

The froala editor adds its own divs dynamically and wraps many elements. If you want only the text inside the resulting editor, you need to change your selector.
So, your selector should be $('#froala-editor-br .fr-view') instead.
As in:
$("button").click(function() {
var chk = $('#froala-editor-br .fr-view').text();
alert(chk);
});
As mentioned in the comments, #Smit Raval's answer uses the API for the froala editor and it seems like a better option to use that instead.

Pure JS code
let button = document.querySelector("button");
let div = document.getElementById("froala-editor-br");
button.addEventListener("click", function(e){
alert(div.innerHTML);
});

Wordpress & jQuery: Hide parent div if span is zero

I am trying to do this on a wordpress website. I have searched and tried a few suggestions already posted but none have worked.
I want to hide the span if it contains zero when the page loads.
I have used the following code (placed in the head) but it won't hide the span.
<script type="text/javascript">
(function ($) {
var propertydata = $('span.property-data');
if (propertydata.text().trim() === '0') {
propertydata.closest('span.propertydata').hide();
}
});
</script>
Here is the HTML I am trying to hide:
<div id="dbst-show12" class="column rows other">
Year Built :
<span class="property-data">0</span>
</div>
Ultimately I would love to hide the parent "column" if possible but would settle if I could just get the zeros to disappear.

You can use a jQuery selector to select all 0's inside a span like this:
var selecton = $("span:contains(0)");
Then you can hide all the elements with the jQuery .hide() method:
selection.hide();
You also need to make sure that function is included inside a $(document).ready so the browser knows once the page is loaded it can run your function.
This would be the whole snippet:
$(document).ready(function(){
var selection = $("span:contains(0)");
selection.hide();
});
Here's a link to a JSFiddle with your given code: https://jsfiddle.net/kgill/uzpqdsoj/1/
You could similarly hide the whole column by selecting the div with a jQuery selector and hiding it the same way.

The problem is that doing:
var propertydata = $('span.property-data');
proertydata is getting all the values from all the spans texts so it will never be equal to 0.
You may want to do it this way:
<script type="text/javascript">
(function ($) {
jQuery.each( $('span.property-data'), function( i, val ) {
if ($(val).text().trim() === '0') {
$(val).hide(); //hides only the span
$(val).parent().hide(); //if you want to hide parent div also
}
});
})(jQuery);
</script>
Here's a JSFiddle:
https://jsfiddle.net/bv7u4hxb/1/

How to bind change event dynamically in jquery

I am doing username availability check. I made jquery ajax call, its working fine and if username already in use i want to make label and textbox in red color. for this purpose i am adding css class in the callback function of $Post() method. The problem I have is css is not applying. I think the problem is in dynamically binding the event So please can any one help me in this. Here is my jquery script,
$(document).on('change', '#uName', function() {
var uName = $(this).val();//get the string typed by user
if (uName!=''){
$.post('<%=request.getContextPath()%>/controller/UserNameCheckController',{'uName':uName},
function(data) {
$('.status').html(data);
var status = $.trim($("#status").text());
if(status=="Username in use try another"){
$('#unameBlock').addClass('error');
}
});
}
else{
$('.status').html('');
}
});
Help me to fix this please. Thanks.

I think the error lies on your class selector
Change
$.trim($("#status").text());
to
$.trim($(".status").text());
//--------^-----------------

try changing it to
var status = $.trim($("#status").html());
it could be .status or #status depends upon the class or id you have used in your html.

Drop down search by tags input

I'm trying to build a search by tags input box that's similar to the demos by Xoxco found here
http://xoxco.com/projects/code/tagsinput/example.html
I would have used his project from github but my implementation is within an already existing app that breaks when I import his project into mine.
So currently i've got most of basic features up and running at http://jsfiddle.net/Newtt/3eHXN/2/.
Currently when i click on an option it appears in the search box. My question is that how do I make more than one item appear and secondly, how do I style the words that appear inside the search box after clicking?
For the second question, I was thinking of something like:
$('.options`).click(function(){
var c = $(this).html();
var a = c.css('background':'#ccc',
'color':'#000',
'width':25px');
$('#search-by-tags').val(a);
});
It doesn't work in Fiddle so I was wondering where I'm going wrong and how do I correct it?
Thanks!

Working Fiddle
$(document).ready(function(){
$('#search-by-tags').focus(function(){
$('#input-tags').show('slow');
});
$('#search-by-tags').blur(function(){
});
$('.options').click(function(){
var currentval=$('#search-by-tags').val()
if(currentval!="")
$('#search-by-tags').attr('value', currentval+','+$(this).html());
else
$('#search-by-tags').attr('value',$(this).html());
$('#input-tags').hide('slow');
});
$('#search-button').click(function(){
$('#search-by-tags').attr('value','');
$('#input-tags').hide('slow');
});
});

For this i have changed little bit, like i have declared a global array arr which holds the value selected by user, You can try this updated one:
$(document).ready(function () {
var arr = []; //<-----------------------------declare a global array here
$('#search-by-tags').focus(function () {
$('#input-tags').show('slow');
});
$('#search-by-tags').blur(function () {
});
$('.options').click(function () {
arr.push($(this).html()); //<------------push the selected item
$('#search-by-tags').val(arr); //<------place the current array arr
$('#input-tags').hide('slow');
});
$('#search-button').click(function () {
$('#search-by-tags').val(''); //<------use .val('') to make it blank
$('#input-tags').hide('slow');
});
});
Demo Fiddle
Note:
instead of using .attr() this way:
$('#search-by-tags').attr('value',$(this).html());
you can try this as suggested in the answer above using .val():
$('#search-by-tags').val(arr);

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.