Develop Reference

How to trigger the event of a table cell dynamically added through Javascript?

I have a table with rows generated through jquery, and I want the temperature column to auto update and get its latest value through an http request.
So in order to select those cells, since they're dynamically generated, I used .on() and it works fine with events like click and mouseenter.
But since there are multiple rows, I thought I would use something like setInterval, but it's not working and I don't know why, event without the set interval or a custom event.
After searching similar issues, I suspect that trigger() doesn't work well with elements added with jQuery. So any ideas on how I can get around this so that the cell value is updated?
Here's the relevant bit of code:
<p id='showData'>
<table id="display-table" class="display-table"></table>
</p>
$(document).ready(function(){
DisplayList();
$("table").on('mouseenter', ".temp", function(){
var cellTemp = this;
console.log("this is :" +here.id);
console.log(ceci);
UpdateTemp(cellTemp.id, cellTemp.id, cellTemp.className).then(function(value){
cellTemp.innerHTML=(value);
});
});
$(document).on('test', '.name', function () { alert("hello"); });
$("table").trigger('mouseenter');
});

update values in jquery based on angular change

In my application I have used calendar widget using fullcalender.js:
$(document).ready(function() {
$('#profile-calendar').fullCalendar({
events: $scope.calendarEvent
});
});
What I wanted to do is, I need to give different values to the event attribute based a angular event. the below code snippet is what I have used to update the $scope.calendarEvent attribute.
$scope.$on('profile_selection',function(event, args){
$scope.calendarEvent = $rootScope.calendarEvent;
$scope.$apply();
});
But this is not working as I expected, the calendar is showing the initial value given to the $scope.calendarEvent. What should I do to make the $scope.calendarEvent take the changed value by the broadcast message and update dynamically.

passing value of select to jQuery UI autocomplete

I have select control and input with jQuery UI autocomplete.
<select name="labels">
...some options
</select>
<input type="attr_type_input" class="attr_autocomplete ui-autocomplete-input">
<input type="attr_value_input" class="attr_autocomplete ui-autocomplete-input">
The values shown in autocomplete should depend on the value of select.
My javascript code looks like:
$(document).ready(function(){
$( ".attr_autocomplete" ).each(function(){
var type=$(this).attr("type");
$(this).autocomplete( {
serviceUrl: '?',
params: {
action: 'attr_autocomplete',
type:type,
label:$("select[name=labels]").val()
}
});
});
});
The problem is that label value passed to server is always the same, even if I change the select. As far as I understand this data structure is formed once on page load.
The question is - how to pass actual value of select?

You are correct, this structure is being initialised with the starting value of the select on page load. You can switch to using a function for the source parameter:
$(".attr_autocomplete" ).each(function(){
var type=$(this).attr("type");
$(this).autocomplete({
source: function(req, autoCallback) {
$.get('?', {
term: req.term,
action: 'attr_autocomplete',
type:type,
label:$("select[name=labels]").val()
}, function(response) {
//perform any transforms needed on the data, then:
autoCallback(response);
//autoCallback is expecting an array of strings to display
});
}
});
});
This function is then executed whenever the autocomplete wants data, and so it will read the value of the select each time, rather than when it's initialised.

you are not retrieving the value of select after change
try this way
$("select[name=labels]").change(function(){
var changeValue=this.value;
});
demo

I just had this issue and came up with this solution. Just another way to handle it.
If you want to have an autocomplete result set based on the value in another field in the form you can do this:
$(document).ready(function(){
$('#alpha').change(function(){setLibraryAutoComplete();});
setLibraryAutoComplete();
});
function setLibraryAutoComplete(){
$('#beta').autocomplete({source: "TypeAhead?param1=ABC&param2="+$("#alpha").val()});
}
This sets up the auto complete on page load with the value from the field but then also causes the autocomplete call to update any time the source field value changes.

how to hide field in same row as field its dependent on

I'm pretty novice at jquery but I have a table with a field in each row that is dependent on another field (checkbox) in the row. Since its in a table I need to handle them in bulk. I don't think I'm using next() correctly but I'm trying to grab the next .subnet_mask since it will be the one in the same row as hide it. I'll also have to update it once I get that far so that it handles hiding and showing if the checkbox is checked or not.
$(function() {
$('.dhcp').each(function() {
$(this).click(function(){
$('.subnet_mask').next().hide();
});
});
});
Any help is appreciated!
EDIT: ok ok :) well the page is actually written in VisualForce (for salesforce). For simplicty sake lets say its just a form wrapped around a table (up to 20 rows representing different records) displaying a checkbox field with the class .dhcp and a field after it called .subnet_mask that should be shown/hidden based on the checkbox. Is that helpful?

I'd rather do this
$('.dhcp').on('click', function() {
$(this).nextAll('.subnet_mask').toggle();
});
Then you show/hide the next .submask (assuming one .submask per <tr>) each time you click the .dhcp

I'd suggest the following, though this suggestion may well change once I see the relevant HTML:
$('.dhcp').click(
function(){
$(this).closest('tr').find('.subnet_mask').hide();
});
This assumes that there will be only one .subnet_mask element per row (otherwise this will hide all of them) in response to the click event. You mention that this depends upon a checkbox, so perhaps the following would be better, using the change() method:
$('.dhcp').change(
function(){
var that = $(this);
if (that.is(':checked')) {
that.closest('tr').find('.subnet_mask').hide();
}
else {
that.closest('tr').find('.subnet_mask').show();
}
});
References:
change().
:checked selector.
click().
closest().
find().
hide().
is().
show().

You're using next incorrectly. It should be more like this:
$(function() {
$('.dhcp').each(function() {
$(this).click(function(){
$(this).next('.subnet_mask').hide();
});
});
});
For this case, I'm assuming that .dhcp and .subnet_mask are indeed siblings, wit the latter coming immediately after the former. Otherwise, .nextAll() can be substituted for .next()
Edited as per point below.

Executing Javascript to populate a drop down before HTML page loads

I have 2 Drop Downs in a HTML form. The first dropdown needs to be populated with a list of usernames present in the DATABASE.
Secondly, Depending upon the selection made in the first drop down, I then need to run another JS script to make another call to the DB to retrieve the list of associated addresses to that username.
Can you please let me know whats the best way to achieve this objective?
1) How can I run a JSscript before the HTML form loads to return that list?
2) Should I get both the usernames and associated addresses in one Db call or just get the usernames first and then use onChange event on the first dropdown to execute the second call?
Any code would be most appreciated.
Thanks

well if you have all the info in same table then why dont you get all data in one go by querying as to the DB and then sort and put up data in the elements the way you want.
the other way will need to query DB 2 times.

here you can create your HTML to server call OR you can make HTML locally.
i have created options for selectbox at server and innerhtml to locally.
<select id="selectbox1" onchange="getData(this)"></select>
<select id="selectbox1"></select>
$(document).ready(function() {
$.ajax({
url: 'http://localhost/getUsername.php',
success: function(data) {
$('#selectbox1').html(data);
alert('Load was performed.');
}
});
});
function getData(selData) {
$.ajax({
url: 'http://localhost/getSecoundCall.php?id='+selData,
success: function(data) {
$('#selectbox2').html(data);
alert('Load was performed.');
}
});
}