How can I manipulate HTML elements which are added during the runtime? - javascript

The code im working on first makes a call to the database. Through this call, it is determined wether there are available workstations in the office or not.
If there are available workstations, "option" elements are added to a "select" element. This is achieved via jquery:
$('#idofselectelement').html(data)
Where "data" represents the markup to be inserted into the "select" element.
Now, my problem is that I'm trying to implement some code which checks wether your "favorite workstation" is available in the selected timeframe and then automatically preselects the respective workstation from the dropdownmenu in the "select" element. Everything is working so far, except for the selection of the workstation from the dropdown menu :/
The part of
I'm rather new to programming with javascript and the HTML DOM, so I'm not sure whether the fact that the options im trying to chose from are added during the runtime?
The code I've tried to manipulate the dropdown menu with is like this:
$('#idofselectelement').val(favoriteworkstation);
However, as I said, this doesn't work.
I've also already tried to output (console.log) the select element's length property right after the code which adds the markup with the available options has run.
But according to the output Im getting, the length is zero Oo
However, the dropdownmenu is definitely being created AND I can indeed manipulate it, but unfortunately not in the way I want to.
If I add an onclick event which sets the value of the respective select element, then the value in the select field indeed changes to the value specified in the event handler.
So I wonder why I can't have the favorite workstation preselected after the timeframe was chosen...
EDIT:
For further insight into the problem, I'm adding a bit more code here.
This is what the HTML Select element looks like BEFORE anything is added during the runtime:
<label for="#sitz">Sitz Nr.</label>
<select type="text" class="form-control" id="sitz" name="sitz" value="">
the markup which is added during the runtime
<option>workstationvalue</option>
<option>workstationvalue</option>
//and so on, depending on the situation...

This is a timing issue.
The js trying to find the element is faster than the actual add of the element to DOM.
Can you describe what you want to do? You might be able to do that before adding the element to DOM.
Editing before adding to DOM is possible if you convert your String to an jQuery object
var $jqueryObject = $(data);
$jqueryObject.find('.classYouSearch').val(value);
$('.whereToAd').html($jqueryObject);

Related

Javascript change the value of innerHTML or innerText not working

I am working on a form (which comes from the Laserfiche Forms application) and I am trying to change the text on a button that currently reads "Auto Fill" which is very non-descriptive since I have 5 of those buttons.
A little backstory: My code used to work and then all of a sudden one day it doesn't and creates an error where the user can only see the "Submit" button and the title of the form, but as soon as I comment out the below code the form works again but then I have those non-descriptive buttons again.
Is something wrong with my code?
document.getElementById("lookup1573").innerHTML = "Fill Section";
On button inspection, I see something a little odd:
<button id="lookup1573" class="autofill" type="button vo="d">Auto fill</button>
You had a typo in the html:
type="button vo="d"
This is the correct way:
<button id="lookup1573" class="autofill" type="button">Auto fill</button>
Here is the full example:
https://jsfiddle.net/o2er21v0/
That is not a typo but a customer parameter of Forms.
So here is the easy way to use these kind of things with forms:
Firstly, give all of your elements classes. Whilst outside of using Forms it is recommended to use ID's to reference your elements, doing that with Forms will give you more work, tenfold.
To note about Autofill buttons: they only appear on lookups that you have enabled them on (unless you are using an old version of Forms) and will appear next to the last element in your lookup (if that makes sense).
To change the name of your autofill buttons you are going to have to do so after the page has loaded.
Below is example code to do just that, assuming that the element that has the Autofill button you have given it a class of "vendorName".
The "vo" is actually very useful as you can use it to easily interact with your field content in conjunction with your classes. In the below example I am changing what is in the field without having to go into the code and work out what the number of the id is. This makes any code you make more portable as you can then implement it in other projects, projects where you ID numbers will be different. This is so flexible that it does not matter if the "vendorName" element is a normal text input, multi-line text area or a drop down menu as that same piece of code will work the same.
4:
$(function() {
$( ".vendorName .autofill").text( "Fill Section" );
});
5:
$( ".vendorName [vo]").val( "A New Vendor Name" );
Forms already uses the jQuery library so this will work just fine. Remember to give all of your elements a class (I usually name it the same as the variable). You can also give them multiple classes by separating the classes with a space.

Aurelia JS - multi level binding/update?

I'm not sure whether I'm using the right terminology here - but here is an example:
https://gist.run/?id=57ed46429e4583eb4c3fb11814451a55
This is how it looks like in Chromium:
Basically, the entries on top (red outline) are a visualization of an array as the "first-level" data display; here one can toggle each element's selection, and make a multi-element selection (red background). The array that is the source of the "first-level" display is mydata in first-level-items.js.
Those items that are selected in "first-level", are then shown again in "second-level" (green outline); here the same information of name and value is displayed, although a bit differently. Here also one can toggle an elements selection - but only one "second-level" element can be selected. The array that is the source of the "second-level" display is myseldata in second-level-items.js.
The intent here, is that once a "second-level" selection has been made, a slider appears, to change the .value property of the particular object which is the selected array element.
My original question (which is why I started this post/example at all), was:
How do I ensure that whenever the slider is changed, the value is updated in both second-level and first-level display?
... however, for reasons beyond me, this in fact does work somewhat in this gist.run example (but it still doesn't work in my actual project, which forced me to come up with the example to begin with). Also it only works somewhat, in the sense that when loading the example page at first, after making first and second level selections, and then changing the slider, the .value will be updated in both first- and second-level display. But as soon as I try deselecting on second level - or changing the selection on second level - then updating stops. So, I guess this question still stands...
After a second-level selection has been made, deselecting on second level (by clicking to toggle) does NOT remove the slider; how can I have it behave like that?
The update happens only on the slider's onChange - basically, while you drag and slide, this component emits onSlide, but it will generate onChange only at the end when the mouse is released (that is, when the sliding has stopped). How can I update both first- and second- level display while the slider is sliding?
And finally - is this how this kind of a problem is best addressed in Aurelia? That is - I currently have one array in first-level-items.js; first-level-items.js then has a singleton reference to second-level-items.js, so it can call a method within it, to change a filtered copy of the array on the second level, which then serves as a source both for second-level display and the slider... Is there a better way to organise this?
Boy, this was a pain, but here's what I think is the solution:
https://gist.run/?id=c09fea3b82a9ebc41e0a4c90e8665b04
Here are some notes:
Apparently, there is something wrong applying if.bind or show.bind on the input element of the slider - instead, the input element should be put in an enclosing div, and the div should have if/show.bind applied
Furthermore, if.bind should not be used, as it re-instantiates the slider element - use show.bind so we can get a reference to the slider widget at start already, even if it is hidden
Seemingly, using TaskQueue in attached() is the only way to get a reference to the slider at start
Once we have a reference to the widget, re-apply it on each second level element, whenever they change
Do not set this.myselChanging to null to specify no target of the slider (simply count on hiding the slider appropriately)
For a continuous change (onSlide), simply use this.myselChanging.value = e.value; in the handler - both first-level and second-level values will be changed
Beyond this, it seems arrays are copied by reference, so the multi-level update happens without further intervention...
Though, would still love to know what is the proper way to do this...

Testing combobox developed using ExtJS with CasperJS

I have developed my application using ExtJs 4.1. I have a combobox which gets populated using Ajax call. Once the comobox is populated, I need to find an item by name and then first the select event for that item.
The problem is the way combo-box is rendered by ExtJS. I am not sure how to select an item in the right manner. CombBox is not really a <select> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree.
I do not want to hard code the id's as ExtJS randomly generate the id.
This is how the generated HTML looks
You can check the example of ExtJs combobox here
Without testing, I would suggest,
var x = require("casper").selectXPath;
casper.thenClick(".x-form-trigger.x-form-arrow-trigger")
.wait(100)
.thenClick(x("//li[contains(#class,'x-boundlist-item') and contains(text(),'Alaska')]"))
.wait(100, function(){
this.capture("screenshot.png");
});
You might also need to move the mouse into position before clicking. Use
casper.then(function(){
this.mouse.move(selector)
});
Since you have the ComboBox in a form, you could use the "name" property in the ComboBox definition and select it with:
Ext.getCmp("idOfThePanel").down('form').getForm().findField('name');
Another option, use the "reference" property. In this case I'm not sure which is the correct way to select the ComoBox:
Ext.getCmp("idOfThePanel").down('form').getForm().lookupReference('reference');
or
Ext.getCmp("idOfThePanel").lookupReference('reference');

Datepicker initialization for class fields added after page load

I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.

Updating script to run for newly created table rows with incremented IDs

I've got a table with the type ahead feature from jQuery UI. It is working with my form when there is only 1 table row (initial view). There's a button to allow the user to create additional table rows as required which also increments the IDs for the text inputs and select menus.
There's another script that inserts a matching value into the select menu based on the typeahead selection. Both of these work fine for the first row, but stop working for any additional Rows that are created.
I've setup a sample JSFiddle:
http://jsfiddle.net/fmdataweb/hxzME/1/
I think I understand why they only work for the first row - they are tied to these IDs: #lastYearSelect1 and #nextYearSelect1 - but I'm not sure how to change them so they then work with #lastYearSelect2, #nextYearSelect2, #lastYearSelect3, #nextYearSelect3 and so on.
There's a few problems with the script.
Firstly you're right, you need to setup all the scaffolding again after you clone the row, the clone method will not copy the functionality, just the html elements.
To find the right element you can use the JQuery ^= selector, which matches the start of an attribute name, on the on the clone object to find the right child input to turn into an autocomplete field. You can do the same trick in the function to change the dropdown to the correct function.
Finally a lot of your code and variables were in the wrong scope to be accessible properly. I've moved a lot of the vars around so they're accessible, mainly into the global scope. When you're a bit more experienced you won't want to do this, but for now this is fine.
I also created a new function setDropDown, but this code is almost identical to what was there before.
Here is a working version of your code:
http://jsfiddle.net/hxzME/3/
Add classes to elements and use class selectors when binding an event handlers.

Categories

Resources