Element html - append(data)


#1

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?


#2

Can you provide the code you’re using?


#3

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)


#4

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


#5

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


#6

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


#7

Example to understand…

file - suggestion-result-list.html

  • TEST
    test
    placetest
    60%
    phone place rate_review
  • 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?


      #8

      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


      #9

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


      #10

      Right after you append the data


      #11

      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?


      #12

      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:


      #13

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


      #14

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

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


      #15

      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'));
      });
      

      #17

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