load-feed Implementation Errors

[ansonphong]

Hi Michel,

I'm trying to implement load-feed directive, and everything seems to be working quite well with the PHP so far in registering the feed, and the Angular is initializing the app correctly with all the JS files included, and following your examples of implimentation, although at initialization it gives this JS error.

pwData() Registering feed_settings 
[front_page_features: Object]
 angular.js:7861
pwData.pw_get_templates null angular.js:7861
pwData.wp_ajax pw_get_templates args:  Object {templates_object: null} angular.js:7861
pwApp RUN getTemplates= undefined app.js?ver=3.6.1:66
TypeError: Cannot read property 'posts' of undefined
    at getTemplate (http://localhost:8888/wp-content/plugins/postworld/js/services/pwData.js?ver=3.6.1:38:40)
    at Object.pw_get_template (http://localhost:8888/wp-content/plugins/postworld/js/services/pwData.js?ver=3.6.1:164:19)
    at http://localhost:8888/wp-content/plugins/postworld/js/components/liveFeed.js?ver=3.6.1:63:43
    at r (http://localhost:8888/wp-content/plugins/postworld/lib/angular/angular.min.js?ver=3.6.1:96:280)
    at http://localhost:8888/wp-content/plugins/postworld/lib/angular/angular.min.js?ver=3.6.1:97:417
    at h.$eval (http://localhost:8888/wp-content/plugins/postworld/lib/angular/angular.min.js?ver=3.6.1:105:313)
    at h.$digest (http://localhost:8888/wp-content/plugins/postworld/lib/angular/angular.min.js?ver=3.6.1:103:190)
    at h.$apply (http://localhost:8888/wp-content/plugins/postworld/lib/angular/angular.min.js?ver=3.6.1:106:100)
    at k (http://localhost:8888/wp-content/plugins/postworld/lib/angular/angular.min.js?ver=3.6.1:63:281)
    at x (http://localhost:8888/wp-content/plugins/postworld/lib/angular/angular.min.js?ver=3.6.1:67:171) 

Is there something that I'm not doing here to make it work? This is the implementation here:

PHP : (working fine)

$args = array (
        'feed_id' => 'front_page_features',
        'write_cache'  => false,
        'feed_query' => array(
            'post_count' => 200,
            'fields' => 'all',
            'post_type' => 'post',
            'orderby' => 'date',
            'offset' => 3,
            'post_format' => null,
            'post_class' => null,
            'posts_per_page' => 200
        )
    );
    pw_register_feed ($args);

Javascript: (throwing an error)

feed_settings['front_page_features'] = {
            preload : 10,
            load_increment : 5,
            offset: 0,
            max_posts:200,
            view : {
                current : 'detail',
                options : ['list','detail']
            },
        };

HTML:

<div load-feed="front_page_features" ></div>

Let me know what might be wrong here, as it's currently holding back implementation.

[michelhabib]

sorry to hear that, i am tracing the issue now, i ran into a number of issues, i thought i should mention them all here instead of opening an issue for each. Number 1, i just pulled from github, and i got an error when i go to admin page, a name clash for post_exists function. so, we may change the function name to pw_post_exists to avoid the name clash. and we may also use a wrapper for query_posts function provided by wordpress and pass the id to it( query_posts( 'p=5' ); ) . this is instead of running a query (unless this query may be faster probably). i just renamed it in my local copy to continue testing, but if you want me to make the change let me know.

[michelhabib]

Number 2, which was holding me from even running my samples, i found out the ajax call returning a php error which cannot find pw_get_post_meta. after tracing it, it turns out that i needed to include php file in postworld.php

include 'php/postworld_meta.php';

[michelhabib]

i tried this same example you described above and it works here. i had some exception that i fixed, but that was related to loading feeds that do not exist, which is different. i will commit now, then i will show you how my sample was created. the error above is hinting that the get_templates ajax function did not return correctly, this can be checked @ the network tab by looking at the response of this call: http://localhost/wordpress/wp-admin/admin-ajax.php?action=pw_get_templates

[ansonphong]

Re: pw_post_exists() - I already made that change and haven't pushed yet, so I'm happy to hear you read my mind.

Let me know if I should change anything in the code I wrote, or show me the working implementation and I'll be able to take it from there.

[ansonphong]

BTW, I just pushed the pw_post_exists() fix which is the same as yours so you can merge the changes.

[michelhabib]

Great, until i send you more details, can you please check the following:- 1- get the latest - i just pushed now. 2- make sure to copy the 3 template files from /dev/theme/ over to the twentytwelve theme [it's an update of the search-results template, so there is no need to recreate the page if that's already done before] 3- go to http://localhost/wordpress/search/#/load-feed-1/ this should be using the same data you are using above. you may check the sample at postworld\templates\samples\pwLoadFeed1Widget.html this is the starting point.

if the above doesn't work, can you please check the ajax calls, and tell me if any of them have suspicious response, also, send me the console output, it should have a full trace of all the activities happening.

[michelhabib]

regarding pw_post_exists, i just pulled a fresh copy and merged, thank you :)

[ansonphong]

I haven't been able to get the theme files to work - when I copy the header and footer php files from dev/theme, then it looks like this :

[ansonphong]

With my current (previously documented implementation) this is what the console looks like :

Particularily, this is what the action=pw_get_templates AJAX response looks like:

[ansonphong]

I also just tried suppressing errors, and also disabling all other Wordpress plugins and it still gives the same Notice PHP error on action=pw_get_templates

[michelhabib]

for the theme template, this looks like an error loading bootstrap. can you please show me if you have any console errors or in network tab if there are any css or js files missing with 404?

for the pw_get_templates, the warning that is returning right before the json object is definitely the problem, i am checking now why i am not getting the warning and the reason for it at the same time. will get back to you shortly.

[michelhabib]

obviously, i had in wp_config.php

define('WP_DEBUG', false);

it should be true @hmikhail you should have this setting set to true as well, just to help find any warnings and errors.

[michelhabib]

@phongmedia you may turn off warnings by setting WP_DEBUG to false. by all means this is not a solution, but should supress warnings. i found many of them in other php files that i didn't create, so i might need help from you and haidy to fix. is there any way i can share html files on github?

[ansonphong]

To share HTML files on github you can make a folder in /dev and put them in there, right?

OK good, that last thing fixed it to set WP_DEBUG to false - I can use that for now, though I'll need to turn it back on soon to continue development.

Now here is my current situation:

With no feed_template set in feed_settings:

1. Currently nothing shows up in the DOM (empty)
2. I can see that load-feed is initializing with class="ng-isolate-scope ng-scope" added to the load-feed DOM item
3. No Console Errors or Network Errors

With feed_template in feed_settings set to load_feed_1:
• DOM is succesfully populated with the contents of load_feed_1.html when adding ng-include="templateUrl"

• But then the load-feed doesn't work and I get a Javascript console Error : (See image)

Any ideas what I should change?

[ansonphong]

Here is my current implementation:

PHP (working)

    $args = array (
        'feed_id' => 'front_page_features',
        'write_cache'  => true,
        'feed_query' => array(
            'post_count' => 200,
            'fields' => 'all',
            'post_type' => 'post',
            'orderby' => 'date',
            'offset' => 3,
            'post_format' => null,
            'post_class' => null,
            'posts_per_page' => 200
        )
    );
    pw_register_feed ($args);

JAVASCRIPT

        feed_settings['front_page_features'] = {
            preload : 10,
            load_increment : 5,
            offset: 0,
            max_posts:200,
            view : {
                current : 'detail',
                options : ['list','detail']
            },
            feed_template: 'load_feed_1',   // Optional, needed in case of different widgets [having different panels for example] 
        };

HTML

    <div load-feed="front_page_features" ng-include="templateUrl"></div> 

[michelhabib]

ok i guess we're very close now. The reason i am trying to fix the theme issue at the same time is that it contains some setup that is needed for the whole framework to work correctly. it will also help you put your divs to test easily and help me trace any errors. it will be a good common ground for the project, especially with the way i updated it recently to show examples for all functions [a work in progress]

Now, i am suspecting that you are not loading JQuery, which is needed by infinite-scroll to work fine. I think there are 2 ways to get this nailed down quickly, 1- tracing and making the theme template work.[i recommend it] or 2- showing me the theme template that you are using which is generating the error.

it's almost 4 am here, but i guess i had too much coffee yesterday :) keep me posted if you are still on today.

[ansonphong]

OK thanks, I got jQuery in there and it's showing now!

Although the infinite scroll still not actually working, though the pre-load posts work fine - I'll look into that, though we can do that tomorrow.

This is resolved for now, you can certainly sleep by now, this was helpful already so far, thanks.

[michelhabib]

glad things are moving :) I am working on some documentation now, if you find the time today or tomorrow, do not hesitate to show me what is not working in the theme template - and i am sure we can nail it down.

i can make a wild guess that you need to add the scrolling style

.infinite-scroll {
    height: 400px;
    overflow-y: scroll;
}

Like jQuery, this is something defined in one of the 3 theme template files

[ansonphong]

Thanks that worked, and also I got the infinite scrolling working fine by adding infinite-scroll-parent to the page. 100% working at this point.