-1

I built an app with meteor-blaze and now I am trying to test it with CodeceptJS. The problem is, all my input fields have no values in the DOM (F12 mode), but I see the values in the browser. In meteor I use template-helpers to read them from my MongoDB-collection and pass them to blaze / spacebars. Therefore meteor writes all values with JavaScript in real-time (after the website is completely loaded/generated).

I have an input field with the value "codeceptjs". But I can't see it in the DOM (chrome: F12 mode). It shows me only this:

<div class="input"><input data-title type="text" title="Todo Title"></div>

However, in my Meteor blaze-file I have following:

<div class="input"><input data-title type="text" value={{title}} title="Todo Title"></div>

Also JQuery can't find them, because there are no values in the DOM:

jQuery('input[value="codeceptjs"]').length
0

How do I access a real-time input value with jQuery / codeceptjs without changing a working app?

Meteor Newbie
  • 646
  • 2
  • 10
  • 23
  • 1
    `jQuery('input[value="codeceptjs"]')` doesn't find anything because the `input` elements don't have an attribute with that value. I'm not sure what you mean by access the 'real-time input value', but either `val()` or `prop('val')` should meet your needs. – Rory McCrossan Feb 01 '17 at 17:01
  • important to understand that changing value property ( by code or user input) does not change the value attribute – charlietfl Feb 01 '17 at 17:05
  • I know that my element doesn't have this attribute in the DOM. Meteor changes all values with help of Blaze and JavaScript after Webpage (DOM) is completely loaded. My app is like an todo-app with unlimited input fields (for example ToDo-name) that can be renamed/changed and remove in real time. I see this field with this value in my browser. But my browser doesn't show this values in the F12 mode - because it gerenates them in real-time after DOM. There must be a way to find them. – Meteor Newbie Feb 02 '17 at 14:23

2 Answers2

1

First, I think your jQuery to get the input value is wrong. If your value changes in the input box with the value "codeceptjs" then your jQuery selector won't find the already changed value. Which would be why you got a zero with the jQuery selector. The input would be better selected by giving it an id or a name value as such:

<div class="input"><input id="codeceptjs" type="text" title="My Title"></div>

If you add the id to your input tag, then you can get the length of the string in the input box like this:

$('#codeceptjs').val().length;
Max Ramsdell
  • 21
  • 3
  • Every new mongodb document has an ID and I am using it inside meteor. Meteor renders HTML with blaze and generates HTML with all dynamic real-time values with the help of Blaze and JavaScript. If I can see a value in the browser, there must be a way to find them with JQuery/JavaScript. My app is like an todo-app with unlimited input fields that can be renamed/changed and remove in real time. – Meteor Newbie Feb 02 '17 at 14:04
  • I need a solution without changing a working app. Other meteor apps with unlimited input fields doesn't use an html-id attribute in DOM, because you don't need it. – Meteor Newbie Feb 02 '17 at 14:35
0

Am assuming by realtime you mean the value is added after you webpage (DOM) has finished loading. If this is the case, then you need to use JQuery context selector. 

    jQuery('input[value="codeceptjs"]', '.input').length
nzayisenga
  • 11
  • 3
  • Yes, I believe Meteor change all values with help of Blaze and JavaScript after Webpage (DOM) is completely loaded. My app is like an todo-app with unlimited input fields (for example ToDo-name) that can be renamed/changed and remove in real time. With your solution I still get `0`, although I see this field with this value in my browser. But my browser doesn't show this values in the F12 mode. – Meteor Newbie Feb 02 '17 at 14:12