Posted on

Content searching on paginated websites

Even if it is not so common, there are websites, which won’t allow you to enter text and search by it. But you can utilize console in your browser.

Moreover, what if they are so called one-page websites. If you still want to search for something and you don’t have time to expose the api, then you have to write some small functions.

 

Here is an example(using vanilla JS – if the web isn’t using mootools or jQuery or anything else):

If you are using some older browser, it doesn’t have to has document.getElementByClassName, so you have to define it by yourself. This function is little different, it returns single element or false, not an array(as default function in newer browsers).

 

Let’s assume you have to check loaded content for any text you are looking for. Then you would need function which governs this:

 

Next you would need some sort of evaluating the return value from last function. I named it testPage:

 

And since you want to run this checking indefinitely, you have to apply some cycling:

I added a little lame stop condition, which stops the next repeat call. I haven’t created any asynchronous support in form of promise. Instead i used only plain timeout. In this time the whole content of the next page should be reloaded. If not – create some promise support* or change the timeout value to bigger number.

By running ‘go(‘i am looking for this’)’ in console, you would see the progress and hopefully the requested item after x pages.

 

What if my page hasn’t unique identification by class / id?

Then you have to use other methods. You could just search by href in ‘a’ element.

 

Now you have to keep the current page in variable, since you will be searching by the next page url. Everything put in go function looks like this:

 

Happy hunting.

 

(*If you know precisely which pages you can just download(like ‘/search?page=xxx’), you can use the XMLHttpRequest object with promise support(or callback) – more here).

Posted on

Angular.js in WordPress?

As web designers / programmers want to create sites loaded with user friendly access, the (still) favorized way is to utilize ajax functionality to some degree. But let’s say I want to use Ajax with Php,WordPress. This way is rather straightforward in WP – just copy code from Codex, that means create callback function, and ajax call using jQuery. It’ easy, we love it….but…

 

What if I have large / more complicated application to code? Perhaps I don’t like jQuery for this usage and I want to use something more convenient for current situation – for example Angular.js. I don’t want to create outstanding tutorial for creating Angular.js applications, here are just few ideas and options.

 

And one thing – many people could tell you, that using angular in WordPress is overkill. I agree.

Second thing – many people could tell you, that mixing angular and jQuery is bad idea(which you can’t avoid in WordPress completely). I agree.

The thing is – if you use it correctly and won’t mix it without thinking, then it is ok.

 

 

First of all, let’s assume that we have controllers, directives… set. Now we should create some Http provider service. Nothing much, just so it can be of use.

I have inline-injected core http service, which is now wrapped in my service named httpService. Http service is based on – or rather is dependent – $q service, which in return causes, that I can expect promise object returned. I utilize this in controller( .then(…)). Call from controller or something:

Okay, run it. You should get the page you have requested. This was easy…nothing too much hard. Now what about post method? Again call from controller or something:

Well, if i were to evaluate data received, i would receive ‘0’, or false.  The data which were sent could be in JSON format, that means in my case {action:get_group_product, product_id:xxx}. Why is that?

 

Answer lies in method, how wordpress accepts ajax calls and how jQuery packs data for transfer. In this case, angular isn’t doing anything bad, it just envelopes data in JSON container. So we need to do two things:

  • tell WordPress, that these datas are really in its favorized form, that means as form(html element) data
  • give angular, or better – http service, data encoded exactly how jQuery does

In practical example, it means changing and adding lines of code like this:

If you wonder why I used jQuery like this and tells you not to mix it without thinking – it’s just an example for you to see, that this line could be replaced by angular thing – you could use also

instead of that line.

With this, your sending request will be in correct form for WordPress ajax functionality.

 

Next we need backend ajax callback, that is if I use post method. In my case I want to call get_group_product action with one parameter and I want to get data in JSON format – why not. This step is covered on WordPress codex, but for completion:

With this, our Ajax call will be send right into get_group_product() function. You can see that I am using json_encode, which will cause, that http service will return data as Object. This object contains config data, and also my awaited data, so for access be prepared to use data.data.some_var

That’s it, you now have the basics, but there is always place for experimenting with angular.js in wordpress .