JQuery JS Uncaught Error: Syntax error, unrecognized expression:

Question

So, I have this issue that has been bugging me and I just can't seem to fix it. The error that comes up is this:

Uncaught Error: Syntax error, unrecognized expression: [{"type":"header","subtype":"h1","label":"Another test form"},{"type":"checkbox-group","label":"Checkbox Group","name":"checkbox-group-1497353080484","values":[{"label":"Option 1","value":"option-1","selected":true}]},{"type":"header","subtype":"h1","label":"Header"},{"type":"number","label":"Number","className":"form-control","name":"number-1497353081884"},{"type":"text","label":"Text Field","className":"form-control","name":"text-1497353083345","subtype":"text"}]

I have managed to track down the line of code that is causing this issue, which is this:

        forms = $(document.getElementById('formData').getAttribute("value")),

Now, I have no idea why this is causing this issue. The content coming in is correct. This is all being done within a JQuery function, in fact the whole JQuery function looks like this:

jQuery(function($) {
		var $fbEditor = $(document.getElementById('fb-editor')),
		$formContainer = $(document.getElementById('fb-rendered-form')),
		forms = $(document.getElementById('formData').getAttribute("value")),
		fbOptions = {
			formData: forms,
			dataType: 'json',
			onSave: function(){
				$fbEditor.toggle();
				$formContainer.toggle();
				$('form', $formContainer).formRender({
					formData: formBuilder.formData
				});
			}
		},
		formBuilder = $fbEditor.formBuilder(fbOptions);
		
		$('.edit-form', $formContainer).click(function() {
			$fbEditor.toggle();
			$formContainer.toggle();
		});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

So, I am not that experienced with JavaScript, JQuery or any of the rest of this. So it could very well be a simple issue but I cannot currently figure out what it is. Can somebody else tell me where I have gone wrong and possibly how to fix it?

what does this return when u document.getElementById('formData') and document.getElementById('formData').getAttribute("value") in ur console? — gauravmuk
– gauravmuk, Commented Jun 21, 2017 at 12:29
From the error it appears that the issue is because you're attempting to create a jQuery object from a JSON string. I'm not even sure what you're trying to achieve with that logic. — Rory McCrossan
– Rory McCrossan, Commented Jun 21, 2017 at 12:31
getAttribute returns a string. jQuery tries to parse that as either a selector or a HTML string, which fails. Why are you trying to wrap it in jQuery at all? — Bergi
– Bergi, Commented Jun 21, 2017 at 12:32
Thanks for the comments everyone. The question has now been answered, it was the $() that was causing the issue. So, parsing it as a Jquery was the issue, thanks everyone. — Michael Ingram
– Michael Ingram, Commented Jun 21, 2017 at 12:59

ugotchi · Accepted Answer · 2017-06-21 12:43:45Z

3

forms = $(document.getElementById('formData').getAttribute("value")),

Try removing the $() in the code above. As per poohitan, its a selector but it doesn't appear to be doing anything at all.

answered Jun 21, 2017 at 12:43

ugotchi

1,0131 gold badge16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Ingram Over a year ago

That fixed it! Thank you soo much Ugotchi!

poohitan · Accepted Answer · 2017-06-21 12:33:38Z

1

From the error I guess document.getElementById('formData').getAttribute("value") is a JSON string.

You have wrapped it into jQuery object constructor $(...), and it fails because jQuery expectes the parameter to be a selector (like .classname), DOM element, or another jQuery element.

answered Jun 21, 2017 at 12:33

poohitan

5363 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery JS Uncaught Error: Syntax error, unrecognized expression:

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related