I am testing putting a text editor on my page and storing it as part of a JSON object.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"> </script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
<link rel="stylesheet" href="/jquery.mobile-1.3.2.min.css"/>
<script src="/jquery-1.9.1.min.js"></script>
<script src="/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<form method="post" action="formSubmit.js">
<textarea name ="editor"></textarea>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
JS
$(document).ready(function () {
var text = $("editor").val();
var name = "project name";
var id = 5;
var item = new item(name, text, id);
var itemArray = localStorage.items;
if (itemArray == undefined) {
itemArray = [];
} else {
itemArray = JSON.parse(itemArray);
}
itemArray.push(item);
localStorage.items = JSON.stringify(itemArray);
});
I want to be able to store item in a JSON object. When I run this I receive a "not-well formed" error at line 1 of the Javascript. It's a very simple program I'm running and can't seem to pinpoint what is causing the error. Is the JSON done incorrectly or are scripts in my HTML header causing issues?
$("editor") is looking for an html tag called 'editor'. you probably want to attach an id attribute to your and do $('#editor')
Related
I have a code like this:
<html>
<head>
<title>Example formBuilder</title>
</head>
<body>
<div class="build-wrap"></div>
<div class="build-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script>
jQuery(function($) {
$(document.getElementsByClassName('build-wrap')).formBuilder();
});
</script>
</body>
</html>
If it was initialized by id, then I could have get data with something like this:
var fbEditor = document.getElementById('build-wrap');
var formBuilder = $(fbEditor).formBuilder();
document.getElementById('getJSON').addEventListener('click', function() {
alert(formBuilder.actions.getData('json'));
});
However, I am using classname to initialize form builder. Is there any way, when click on save, get the respective form-builder data? I am using https://formbuilder.online/
Here is jsfiddle: https://jsfiddle.net/xycvbj3r/3/
#PS: there could be numerous form builder inside php loop.
You can try this:
formBuilder.actions.getData('json');
Or:
formBuilder.actions.getData();
The live demo is here: http://jsfiddle.net/dreambold/q0tfp4yd/10/
I was facing the same issue too. This worked for me
var list = ['#ins1', '#ins2', '#ins3'];
var instances = [];
var init = function(i) {
if (i < list.length) {
var options = JSON.parse(JSON.stringify([]));
$(list[i]).formBuilder(options).promise.then(function(res){
console.log(res, i);
instances.push(res);
i++;
init(i);
});
} else {
return;
}
};
init(0);
And to get data, you can use instances[key].actions.getData()
I am not sure how you are planning to save this data, but to help with your problem of getting form data for a particular form you can use something like this
var formBuilder = $(document.getElementsByClassName('build-wrap')).first().data('formBuilder').actions.getData()
Or to use it over a jQuery Collection then
$(document.getElementsByClassName('build-wrap')).each(function () {
var formBuilder = $(this).data('formBuilder').actions.getData()
})
There is a callback mentioned in the documentation, onsave which runs on editor save. So, when clicking on any form builder's save button, the respected form's data can be received.
Here is the code-
<html>
<head>
<title>Example formBuilder</title>
</head>
<body>
<div class="build-wrap"></div>
<div class="build-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script>
jQuery(function($) {
var options = {
onSave: function(evt, formData) {
// This is the respected form's data
console.log('MY DATA_________', formData)
},
};
$(document.getElementsByClassName('build-wrap')).formBuilder(options);
});
</script>
</body>
</html>
Here is the fiddle (couldn't create a working snippet due to not working CDNs.
)- https://jsfiddle.net/nehasoni988/rpo1jnuk/1/#&togetherjs=Mka9TJ4cex
I'm new to Javascript and have been spinning on writing this piece of code in order to display a series of pictures on a page from an external source, sort of like an instagram feed, using a GET request through jQuery. I have been given a JSON file that contains an array of image URLs, some of which I want to exclude because they are broken.
Here is the code that I've written thus far - I've tested it and it doesn't work and I'm looking for some guidance on what aspects I may be missing in order to get my code to work:
$(document).ready(function () {
$('imagesFromJSON').click(function () {
$.getJSON("images.json", function (data) {
var arrItems = []; // The array to store JSON items.
$.each(data, function (index, value) {
arrItems.push(value); // Push values in the array.
});
for (let i = 0; i < arrItems.length; i++) {
if (arrItems[i].contains('fakeurl') === false) {
let img = document.createElement('img');
img.src = arrItems[i].Image
document.querySelector('.container').appendChild(image)
}
}
});
});
});
<html>
<head>
<meta charset="UTF-8">
<title>Feed Test</title>
<script type='text/javascript' src='feed.js'></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>FEED TEST</h1>
<p><input type="button" id= "imagesFromJSON" value="Show Images" /></p>
<div class="container"></div>
</body>
</html>
Hey I'm trying to get the results of my query to display on my webpage, how can I get that to happen?
I'm running this on oddschecker pages like: http://www.oddschecker.com/horse-racing/thirsk/14:00/winner through a json.manifest, so I want to be able to run this through a chrome extension, how can I get the javascript function to display as a html page??
<html>
<title>I am not very good.</title>
<head>
<script type="text/javascript">
var odds = $('.co');
odds.each(function(){
var id = $(this).attr('id');
if(id.indexOf('_B3') >= 0){
console.log(id);
//your code here
}
});}
</script>
</head>
<body>
<div id="oddschecker"></div>
</body>
</html>
<html>
<title>I am not very good.</title>
<head>
<script type="text/javascript">
var odds = $('.co');
odds.each(function() {
var id = $(this).attr('id');
if(id.indexOf('_B3') >= 0) {
console.log(id);
$('#oddschecker').html(data); // data is the retrieval data
}
});
}
</script>
</head>
<body>
<div id="oddschecker"></div>
</body>
</html>
I did something like this
<head>
<script src="trans.js" type="text/javascript"></script>
<title><script>trans("Configuration: Status - Software")</script></title>
</head>
However the web title looks like
trans("Configuration: Status - Software")
Why is the js not working here,What should modify to make it work?
Here's what tran.js look like
function trans(key)
{
document.write(getkey(key));
}
function getkey(key)
{
var text;
text = lang_pack[key];
if (text == undefined || text == "")
{
text = key;
}
return(text);
}
I'm not sure you can use a script inside of a title tag -- can you move it into a different block?
It's unclear exactly what trans.js is, but you can try:
<script>
document.title = trans('Configuration: Status -Software');
</script>
You should try setting the title in javascript like
document.title = trans('Configuration: Status - Software');
var temp = document.getElementsByTagName("title").innerHTML;
temp[0].innerHTML = "your new title";
Try including the src in the same script tag as the function call:
<head>
<script src="trans.js" type="text/javascript">trans("Configuration: Status - Software")</script></title>
</head>
Try this:
<head>
<script src="trans.js" type="text/javascript"></script>
<title></title>
<script>document.title = getkey("Configuration: Status - Software")</script>
</head>
You mean this?
<head>
<title>This is Test 1st</title>
<script>
var field = "This is Test 2nd";
$("title").append(field);
</script>
</head>
you need is a jquery library.
I am trying to create a javascript quiz, that gets the questions from a xml file. At the moment I am only starting out trying to parse my xml file without any success. Can anyone point me to what I am doing wrong?
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div class="spmArr">
</div>
<script type="text/javascript">
var quizXML = '<quiz><Sporsmal tekst="bla bla bla"/><alternativer><tekst>bla</tekst><tekst>bli</tekst><tekst correct="yes">ble</tekst></alternativer><Sporsmal tekst="More blah"/><alternativer><tekst>bla bla</tekst><tekst correct="yes">bli bli</tekst><tekst>ble ble</tekst></alternativer></quiz>'
var quizDOM = $.xmlDOM( quizXML );
quizDOM.find('quiz > Sporsmal').each(function() {
var sporsmalTekst = $(this).attr('tekst');
var qDiv = $("<div />")
.addClass("item")
.addClass("sporsmal")
.appendTo($(".spmArr"));
var sTekst = $("<h2/>")
.html(sporsmalTekst)
.appendTo(qDiv);
});
</script>
</body>
</html>
When I try this in my browser the classes and div are not being created. And the page is just blank. Am i doing something wrong when I intialize the xml?
edited to add prototype.js and close function
Looks like you're forgetting to close your .each call. append ); after the statement for sTekst and your call will parse correctly.