Need help, tap on List View not activate onclick function

Questions
1

Hi, I need help on list view tap action. When I tap on list, nothing happen. The action is not trigger. It did work if the list is not populate from url.

This is the code.

<div class="list searchbar-found">
  <ul id='search-list' class='have-after'></ul>  
</div>

.....

app.request.post(api_url, v_data, function(jdata){
	app.dialog.close();
	var data = JSON.parse(jdata);

	if (data.status == 'SUCCESS') {
		var data_org_list = '';
		
		var main = app.methods.main_view();
		
		for (var i = 0; i < data.value.length; i++) {
			
			//data_org_list += '<li><a id="ac-'+i+'" href="#" class="item-link item-content">';
			data_org_list += '<li><a href="#" class="item-link item-content data_select'+i+'">';
			data_org_list += '<div class="item-inner">';
			data_org_list += '<div class="item-title-row"><div class="item-title">' + data.value[i] + '</div>';								
			data_org_list += '</div></div></a></li>';
			
			$$('.data_select'+i).on('click', function () {
				console.log('Tap me!');
			});
		}
		
		document.getElementById("search-list").innerHTML = data_org_list;
		
	} else {
		$$('#err_msg').html("<ul><li>No record found.</li></ul>");
	}
	app.dialog.close();
},
function(err){
	app.dialog.close();
	app.dialog.alert(err, 'Warning');
});

Please advice.
Thank you.

2

That won’t work, because at the time you are querying for $$('.data_select'+i) it is not yet in the DOM.

So you first need to put the new elements into DOM, wait until the DOM rendered, and then start listening for events.

1 Like
3

I tried something like this…no luck.

for (var i = 0; i < data.value.length; i++) {
	const newTodo = document.createElement('li');
    							
    data_org_list += '<a href="#" class="item-link item-content data_select">';
    data_org_list += '<div class="item-inner">';
    data_org_list += '<div class="item-title-row"><div class="item-title">' + data.value[i] + '</div>';								
    data_org_list += '</div></div></a>';

    newTodo.textContent = data_org_list;
    todoList.appendChild(newTodo);
}
4

Your first version was okay already - but your list was not in the DOM when you queried for it ($$…)

5

Thanks. It work now if I do it like this.

for (var i = 0; i < data.value.length; i++) {							
	const node_div_a = document.createElement('div');
	node_div_a.setAttribute("class", "item-title");
	var textnode = document.createTextNode(data.value[i]);							
	node_div_a.appendChild(textnode);
	
	const node_div_b = document.createElement('div');
	node_div_b.setAttribute("class", "item-title-row");
	node_div_b.appendChild(node_div_a);
	
	const node_div_c = document.createElement('div');
	node_div_c.setAttribute("class", "item-inner");
	node_div_c.appendChild(node_div_b);
	
	const node_a = document.createElement('a');
	node_a.setAttribute("class", "item-link item-content data_select"+i);
	node_a.appendChild(node_div_c);
	
	const node_li = document.createElement('li');
	node_li.appendChild(node_a);
	document.getElementById("search-list").appendChild(node_li);
	
	$$('.data_select'+i).on('click', function () {
		console.log('click me!'+i);
	});
}

Only that now click me is not return the exact list row id value that I clicked. Any idea?

Or is there any other way to do this? I want to have a list data. Then tap on that list to get the data and return to the form with a prefill data from selected list.

6

As I said:

was already okay, just you ddidn’t draw anything to the DOM…

document.getElementById("search-list").innerHTML = data_org_list;
app.utils.nextTick(function() {
      $$('.data_select'+i).on('click', function () {
    	console.log('Tap me!');
      });
});
7

This is how for loops work.
Change your original code:

var data_org_list = '';
		
var main = app.methods.main_view();

for (var i = 0; i < data.value.length; i++) {
			
  //data_org_list += '<li><a id="ac-'+i+'" href="#" class="item-link item-content">';
  data_org_list += '<li><a href="#" class="item-link item-content data_select'+i+'">';
  data_org_list += '<div class="item-inner">';
  data_org_list += '<div class="item-title-row"><div class="item-title">' + data.value[i] + '</div>';								
  data_org_list += '</div></div></a></li>';
  
  $$('.data_select'+i).on('click', function () {
    console.log('Tap me!');
  });
}

document.getElementById("search-list").innerHTML = data_org_list;

To this one:

var data_org_list = '';
		
var main = app.methods.main_view();

for (var i = 0; i < data.value.length; i++) {
			
  //data_org_list += '<li><a id="ac-'+i+'" href="#" class="item-link item-content">';
  data_org_list += '<li><a href="#" data-index="'+i+'" class="item-link item-content data_select'+i+'">';
  data_org_list += '<div class="item-inner">';
  data_org_list += '<div class="item-title-row"><div class="item-title">' + data.value[i] + '</div>';								
  data_org_list += '</div></div></a></li>';
}

document.getElementById("search-list").innerHTML = data_org_list;

$$('.data_select'+i).on('click', function () {
  var index = parseInt($$(this).attr('data-index'), 10);
  console.log('Tap me!', index);
});
1 Like
8

Thanks. Now I need to figure out how to go back to previous page after tap on target data. Smart Select seem to work for this. But I still thinking to use list view if possible.