Element html - append(data)

Used Ajax load file then append(data)…display html but not element like not real. No action clicker and preloader list. How to fix real html instead text html?

Can you provide the code you’re using?

file: route.js

// Attach 'infinite' event handler
myApp.request.post('assets/custom/php/suggestion-result-list.php', { datasearch:key_datasearch }, function (data) {
					
        $$('.reviews-list').append(data);
        $$('.page-content').show();
	myApp.dialog.close();
				
}

//click loading page
$$('.open-alert').on('click', function () {
<div>Loading</div></div>';
var progress = 0;
var dialog = myApp.dialog.progress(key_dfullname, progress);
var interval = setInterval(function () {
progress += 25;
dialog.setProgress(progress);

if (progress === 100) {
clearInterval(interval);
parms = '/doctor/?dname='+ key_dname +'&dsurname='+ key_dsurname +'';
myApp.router.navigate( parms, {
pushState: true,
ignoreCache: true,
});
							
}
}, 300)
					
setTimeout(function () {
myApp.dialog.close();
}, 2000);
		
});

file: suggestion-result-list.php

echo '<li class="swipeout">';
    echo '<div class="item-link item-content post swipeout-content open-alert" data-link="'.$b.'" data-fullname="'.$title.' '.$fullname.'" data-url="" data-path="doctor" data-name="'.$doctor_list['firstname'][$d].'" data-surname="'.$doctor_list['surname'][$d].'" data-cat="doctor">';

echo '<div class="item-media">';
//* -- User Image -- //;
$filename_path = "assets/custom/img/doctor/Dr ".$doctor_list['firstname'][$d]." ".$doctor_list['surname'][$d].".jpg";
				
echo '<img class="img-circle" src="'.$filename_path.'" alt=""/>';  
echo '</div>';
						
echo '<div class="item-inner">';
								  
echo '<div class="item-title-row">';
echo '<div class="item-title">'.$title.' '.$fullname.'</div>';
echo '</div>';
						
echo '<div id="progressbar" data-progress="'.$percentage.'" class="item-subtitle progressbar color-'.$color.'"></div>';
						
echo '<div class="item-sub-row">
<div class="item-text">
<div><i class="fa fa-fw fa-lg fa-briefcase color-gray"></i> '.$doctor_list['specialty'][$d].'</div>
<div><i class="material-icons color-gray">place</i> '.$doctor_list['city'][$d]." - ".$doctor_list['state'][$d].'</div>
</div>
<div class="item-after"><div class="chip chip-small color-'.$color.'"><div class="chip-label">'.$percentage.'%</div></div></div>
</div>';
						
echo '</div>';
						
echo '</div>';
echo '<div class="swipeout-actions-right">
<a href="#" class="color-blue open-call">
<i class="material-icons">phone</i>
</a>
<a href="#" class="color-green open-direction">
<i class="material-icons">place</i>
</a>
<a href="#" class="color-orange open-prompt" data-popup=".post-review-popup">
<i class="material-icons">rate_review</i>
</a>
</div>';
echo '</li>';

file: search.php

<!-- Begin: Page Content -->
<div class="page-content infinite-scroll-content ptr-content">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>

<!-- Begin: list -->
<div class="card">
<div class="card-content">
<div class="card-content-inner">

<div class="list searchbar-found media-list inset">
<ul class="reviews-list"></ul>
</div>
				
<div class="preloader infinite-scroll-preloader"></div>
			
</div>
</div>
</div>

Here display with no processbar - element and also can’t click pop -(open-alert)

Please let me know if you have read above the message. Thank you

1 Like

I need it as soon as possible to fix it. Please can someone help me? :frowning:

It is hard to understand what happens here, you have a mix of js, html and php in your post. Need more clear example

Example to understand…

file - suggestion-result-list.html

  • TEST
    test
    placetest
    60%
  • other file - routes js:

    var routes = [
    path: ‘/search/’,
    url: ‘./pages/search.html’,
    name: ‘search’,
    on: {

    pageInit: function (e, page) {
    
    // Attach 'infinite' event handler
    myApp.request.post('suggestion-result-list.html', { datasearch:key_datasearch }, function (data) {
    
        $$('.reviews-list').append(data);
       //console.log(data);
    

    }, function (status) {

      //console.log('Load was error');
    

    });

    }

    final file - search.html

      Display list but no element of processbar as i post image at previous message. What is the reason?

      Still not clear but if you mean that progressbar doesn’t recognize data-progress attribute, it happens because you insert it manually after page init. So after you insert it you need to call app.progressbar.set on each progressbar http://framework7.io/docs/progressbar.html#progressbar-api

      Correct, where I need to put to call app.progressbar.set on each progressbar?

      Right after you append the data

      there is something wrong…when i put after append the data for myApp.progressbar.set(’#progressbar’);

      Is append of data show text or html? not pick the object element. How can we fix he object of element?

      Hi again, please can you help me? I believe after append the data…no real html as it look like text however we try to do something to action with id, class or other elements. So weird! :tired_face:

      Give a live example or JSFiddle so anyone can see and check it

      http://reinders.co.uk/f7/

      Demo and download links. Please can you quick look if you find the problem. Thanks

      This is a good example :+1:

      In your code where you have:

      $$('.reviews-list').html(data);
      $$('.infinite-scroll-preloader').remove(); 
      

      Add myApp.progressbar.set after you append data:

      $$('.reviews-list').html(data);
      $$('.infinite-scroll-preloader').remove();
      // set/update progress on newly added progressbars
      $$('.reviews-list .progressbar').each(function (index, progressbarEl) {
        myApp.progressbar.set(progressbarEl, progressbarEl.getAttribute('data-progress'));
      });
      
      2 Likes

      Thank you so much! it’s work. I need to test if infinite-scroll down all processbar working. :slight_smile:

      Thanks for the wonderful reply. It really helped a lot.:+1::+1: