Converting escaped text to html in javascript? - javascript

I used $.get and received data like
'<option value=\"US-ID\" >Idaho<\/option>\n <option value=\"US-IL\" >Illinois<\/option>\n <option value=\"US-IN\" >Indiana<\/option>\n <option value=\"US-KS\" >Kansas<\/option>\n'
I want to use $(...).html(html_data) how do I make the data I get into html data that I can use?
what I'm getting when $(...).html(data)
http://jsfiddle.net/9WeUv/
Don't know if this matters, but console.log(data):
'...data...'
whereas console.log('regular_string'):
regular_string // no quotes

What's wrong with:
var html_data = '<option value=\"US-ID\" >Idaho<\/option>\n <option value=\"US-IL\" >Illinois<\/option>\n <option value=\"US-IN\" >Indiana<\/option>\n <option value=\"US-KS\" >Kansas<\/option>\n';
$('#select_element_id').html(html_data);
http://jsfiddle.net/45CYX/
After your edit:
Sorry, isn't the string you've received the one you wrote on top? In your jsFiddle you do not have any JS code, just some text in a select tag - which is not what you are saying in the question.

Assuming you grabbed the html from an ajax call and want to add it to the body.
$newSelect = $("<select></select>").html(html_data);
$(document.body).append($newSelect);
http://api.jquery.com/jQuery/#jQuery2 - Creates DOM elements on the fly from the provided string of raw HTML.

Related

how to display as it is data on html dropdown box coming from server?

Getting data from server as below
Test Your Code
New Testing Code
Opel Audi
Above data have sapace between the words. i want to show text as it
is.
I have html select dropdown where i am rendering the server data.
but i am not able to diplay data as it is coming form server, it is
showing one space in between the word. can anyone tell me how to fix
this?
<html>
<body>
<select>
<option value="volvo">Test Your Code</option>
<option value="saab">New Testing Code </option>
<option value="opel">Opel Audi</option>
</select>
</body>
</html>
check plunkr
HTML will remove any spaces following 1 space. Just replace the spaces with (non-breaking space point)
str = str.replace(/\s/gmi, ' ');
edit: forgot semicolon
you can use string replace method
str = str.replace("", '&nbsp');
Try whitespace characters instead of spaces. In your case you need to modify text coming from server accordingly.

Dropdown option value - no less than

I am working on a real estate website and require dropdown fields for minimum bedrooms, bathroom etcs using a simple html code:
<select class="facetwp-dropdown" id="id_beds_min" name="beds_min">
<option disabled selected value>Beds</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
</select>
I know that the fields need conditions - ie that it cannot be less than 1, or 2 etc. But not quite sure on the coding.
I'm using a plugin called FacetWP to assist with the search fields.
Any assistance?
I would completely remove the options you want to disable:
Within the html code (in this code where <option value="1">1+</option> is), call a function in brackets: {this.renderNumberOfBedOptions(minNumberOfBedOptions, maxNumberOfBedOptions)}
Then, above the html code inside the javascript code:
renderNumberOfBedOptions{minNumberOfBedOptions, maxNumberOfBedOptions) {
let options;
for (let i = minNumberOfBedOptions; i < maxNumberOfBedOptions; i++) {
options += <option value=i>i+</option>
}
return options;
Your html should be somthing like this:
<select class="facetwp-dropdown" id="id_beds_min" name="beds_min">
<option disabled selected value>Beds</option>
<?php
for($i=$minbeds; $i<=maxbeds; $i++)
{
echo "<option value=".$i.">".$i."+</option>";
}
?>
</select>
What you do next in the server side is query with something like this:
$bedrooms_min = $_POST["beds_min"];
query = "select* from houses where bedrooms >=".$bedrooms_min
and consider using mysqli prepared statements.
if your html template contains no php code you can convert the loop to JavaScript after querying the minimum and maximum number of rooms from the back end but WordPress templates can contain php code anyway.

How to access the javascript variable inside html tags

I wanted to added javascript variable inside html code.
Here is my code:
<select id="currentrun" name="currentrun" >
<option value=""><script>selectedrun</script></option>
</select>
and my js function
var currentrun="";
var selectedrun="";
function setCurrentRun()
{
currentrun = document.getElementById("runlist");
selectedrun = currentrun.options[currentrun.selectedIndex].value;
}
But this doesn't work.
Can anyone help me to do this.
Thanks in advance.
You don't have to run the script like that.
The value of the currentrun can be retrieved as:
document.getElementById('currentrun').value
And for completeness, if you want to trigger a JavaScript function call each time the selection is modified, do this:
<select onchange="my_function();">
<option>...</option>
</select>
It seems like you are trying to set the text of the option element with javascript. Here is one way you can do it using the id of the element to get it and then set the text property of the element to your javascript variable:
<select id="currentrun" name="currentrun" >
<option id="currentoption" value=""></option>
</select>
<script>
document.getElementById("currentoption").text = selectedrun;
</script>
Be sure to put any necessary javascript that declares and sets the selectedrun variable before the above script.

custom tag containing data in option

I am having a list of stuff that the user can select. The way it's currently made, we have an integer as name, a price as value but i need to add a color. It's not unique so i cannot use ID.
example :
<option name='6' value="30.95">6 Orange(30.95$/month)</option>
<option name='6' value="33.95">6 Green(33.95$/month)</option>
<option name='10' value="32.95">10 Orange(32.95$/month)</option>
<option name='10' value="35.95">10 Green(35.95$/month)</option>
I need to combine two non-unique values and them to be accessible by jQuery / Javascript
I would like not to make two selects. I know it's straightforward the easiest solution but if i could stick to a single one that would give better results.
Is it safe to create a custom tag like "prodcolor" with any non-reserved nametag or is there a smarter way to achieve this?
Many thanks once again.
You can use HTML5 data- attributes, which is invented for this very purpose. More importantly, the values of the data- attributes can be accessed using JS.
Since you want to include colour, you can use the data-colour attribute, for example:
<option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option>
Even better: Actually, you shouldn't even use the name attribute to store your quantity. Why not use data-quantity instead? :)
<option data-quantity="6" value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option data-quantity="6" value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option data-quantity="10" value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option data-quantity="10" value="35.95" data-colour="green">10 Green(35.95$/month)</option>
Some background:
There's a nice guide published by Mozilla on how to use JS to access such attributes. Note that it is recommended to use dash (-) separated attributes, instead of any other naming convention, e.g. data-product-name instead of data-productName. This is because the .dataset method in JS converts dash-separated data attributes into camelCase. So data-product-name will be accessible via .dataset.productName, for example.
jQuery also allows you to access the values of data- attributes via the .attr() or .data() methods. The only difference is that:
.attr() is not cached, so you can use it to access dynamically-modified data- attributes, while .data only reads data attributes at runtime.
.attr() can be used to read and write data attributes, but .data() can only be used to read data attributes from the DOM. .data() is also used to access the jQuery data object that is not written to the DOM.
Usage example:
Using your code above, we can create a simple example of alerting the colour of the product upon the firing of the change event:
$(function() {
$('select').change(function() {
var $choice = $(this).find('option:selected')
alert('Colour: ' + $choice.attr('data-colour') + '\n' + 'Price: $' + $choice.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option>
</select>

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>

Categories