AJAX load in CakePHP 2 - html

In CakePHP 2.x, i use this path to show results to visitors
example.com/my/showResults
*getSomeResults* function makes some Twitter API requests which lasts generally 5-25 seconds.
I need to put a "loading div" into my view.
But i couldn't decide the structure.
The examples i found by google shows, when user clicks a button, an AJAX request is made and results are shown in that div.
But in my case, when the page is loaded that request will be done asynchronously, when results are available, they will be shown in another div.
Regarding to my file structure below, where should i put AJAX request?
Should i remove lines in showResults method and run another action when AJAX request will succeed?
I would be happy if you can recommend a structure for, show results when AJAX request is succeed in CakePHP 2 way. Thank you
// appcontroller.php
class AppController extends Controller {
function getSomeResults() {
// make some http requests to twitter API
}
}
// mycontroller.php
class MyController extends AppController {
public function showResults() {
$data=$this->getSomeResults();
$this->set('data', $data);
$this->render('myelement');
}
}
// myelement.ctp
<div id="before">
Please wait loading..
</div>
<div id="results" style="display: none">
<?php echo $data ?>
</div>
// myscript.js
$(document).ready(function() {
$("#results").hide();
setTimeout('$("#results").show();',8000);
}

It looks to me, like you are grabbing the web service and then handing off the data through cakephp. Meaning it does not look like you are using ajax at all.
Since you appear to be using jquery already I would recommend that you connect to twitter using jquery's ajax method [http://api.jquery.com/jQuery.ajax/]. So not only would you remove showResults(), but you would also remove getSomeResults(). If you needed this info to be refreshed you could set this ajax call into a function and call it on a regular interval.
Unless you had the div for loading at the top of the page, you could use jquery to change the results div from now loading to the data.
Just my 2 cents.

Related

Passing Data Through Pages with Vue

I receive data in a function and this function needs to load a new page. I was doing this with Jquery using the method .load(), But my vue method gets an error saying that can not find the element in the other page.I believe that could be a better approach, but I do not know how I can pass data through a vue component
static foo(a,b){
$('#maindiv').load("/newPage");
new Vue({
el: '#newPageElem',
data: {
vueVar1:a
vueVar2:b
},
});
}
How can I do that? I believe that using Jquery is not the best way to achieve this, but I dont know how to change routes with vue and passing parameter between them.
Thanks.
You can take a look at vue-router here: http://router.vuejs.org/en/essentials/getting-started.html - it allows you to handle all the client-side routes.
For making http calls to receive data from server, you can use vue-resource (https://github.com/vuejs/vue-resource)
It is better to avoid mixing jQuery with Vue, as Vue is responsible for rendering the DOM. If you make any DOM changes with jQuery, it will get over-written by Vue in the next DOM update. So you will end up spending a lot of time in debugging.
Also, you cannot instantiate a Vue app inside a function, as seen in your code example, unless you call the function on page load. Ideally, the first few lines of script should start the Vue app.

Wordpress―run JS after Widget was created in Admin panel

I am developing a Wordpress Theme that includes a custom Widget, everything works out fine but there is one thing I do not know how to implement correctly:
I would like to run some Javascript after the Widget Instance was created in the admin panel, that means in the very moment after the widget was dropped in a sidebar, not after saving.
I have no Problems with running JS after the page was loaded or the Widget was saved, I want to run Javascript after the User just dropped a new Instance into the side bar, what actually can happen more than once without page reload.
Greetings philipp
Another way of doing this I just figured out --
I'm going to show a more complex example involving dependencies, though realise the bit in Custom_Widget::form() is the real answer to the question:
function add_js_deps() {
if (is_admin()) {
wp_enqueue_script('jquery-ui-accordion');
}
}
add_action( 'init', 'add_js_deps' ); // "init" because wp_enqueue_scripts is too late.
// Then in the widget....
class Custom_Widget extends WP_Widget {
public function form($instance) {
/** Collapsing accordion-y form HTML here **/
wp_enqueue_script('custom-js', plugins_url('js/my.js', __FILE__), array('jquery-ui-accordion'), '1.0.0', true);
}
}
I'd argue this is the better route as it has dependency management and you won't have a bunch of JavaScript mid-way into your DOM. Using wp_enqueue_script is generally always the more WordPressian way of doing things regardless.
Place a script tag in the widget form function.
function form($instance)
{
?><script type="text/javascript">console.log("firing javascript");</script>
<?php
//form details...
}
I eventually went a different way with this. Loaded our plugin admin script on the page using wp_enque_script and then just used jquery selectors and an event handler to target the right widget.
$('div.widgets-sortables')
.on('sortstop', function (event, ui) {
// only if this widget has the proper identifier...do something
if (ui.item.find('.my_widget').length == 0)
return;
run some function...
Still not my favourite technique...but it is cleaner then coding it in the widget. Does require a variable to track created widgets and using the "this" variable is useful

How to programmatically create listview in JQM

I have an array from ajax and i need to create jQuery Mobile Listview. I don't found a method for this, so is it possible?
Here's a working example: http://jsfiddle.net/Gajotres/SS7vJ/
And another example with an array: http://jsfiddle.net/Gajotres/yHHWQ/
$(document).on('pagebeforeshow', '#index', function(){
$('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
$('<li>').append('Audi').appendTo('#test-listview');
$('<li>').append('Mercedes').appendTo('#test-listview');
$('<li>').append('Opel').appendTo('#test-listview');
$('#test-listview').listview().listview('refresh');
});
Also don't forget to call .listview( twice, first without refresh parameter, and second time with a refresh parameter. Without it you will receive this error:
cannot call methods on listview prior to initialization
If you want to find out more about how jQuery mobile handles dynamically added content and its markup take a look at this ARTICLE, to be transparent it is my personal blog, or find it HERE.

create a link that opens a page and runs a function contained in the link

I am still learning PHP so my question may seem a little obvious but...
My question relates to opencart but is probably quite a common practice on many websites. I am creating a opencart module and in that module i have several buttons that complete different tasks. Now I have assigned the button the correct 'href' with the path and appropriate action. eg
$this->data['dosomething'] = $this->url->link('module/modulename/dosomething', 'token=' . $this->session->data['token'], 'SSL');
Note: I have called the module and action a general name for the purposes of my question.
In the controller I then have a private function called 'index', followed by a private function called 'dosomething' like below
public function index() {
* insert code *
}
public function dosomething() {
*insert code*
$this->redirect($this->url->link('module/modulename', 'token=' . $this->session->data['token'], 'SSL'));
}
Now, I would like to know how do I get the button to direct to the module controller and then run the 'dosomething' function. I could put something information in the link, ie action=dosomething and do it this way but most of opencart simply uses the text of the last / as the action. If I use the href stated above I get a error as it is trying to find the controller and template located in 'module/modulename/dosomething' rather than the controller and template located in 'module/modulename' USING the function 'dosomething'.
I hope this makes sense. I see that many other scripts in opencart successfully use this method but I just cant figure out how? I am sure I missing something obvious.
What you are doing is correct. OpenCart's framework will use the third piece of the route if specified as the method. If you try
public function dosomething() {
die('OK');
}
Then go to the url you've got, it should just show a blank white page with OK written on it. My guess is the error doesn't actually relate to the controller being an issue, and more to do with something else you've done. Either that, or the method and the third part of the route aren't a match, or the dosomething method isn't public

transition from one page to another jquery mobile

I'm trying to figure out how to transition from one page to the next using jQuery mobile. I have a JSON callback function, and once that function returns a value (say YES or NO), then I either want to transition to a specific page or display an error message. Could somebody provide some sample code on how to write this transition?
I get that the href should look something like this:
Next page
But how do I call this from within a javascript callback function? Thanks!
Invoking changePage from your callback should accomplish what you are trying to do.
Your_Callback(){
if(YES) {
changePage("nextPage.html");
} else if(NO){
changePage("errorPage.html");
}
}
Would it be possible to share the JS code that's not working for you?
There is a method for this purpose:
$.mobile.changePage('nextPage.html')
Check de documentation to see the parameter it accepts
Did you consider writing the page in PHP to create a session cookie?
`session_start();
$url = $_SESSION['back'];'
in the jquery you would use:
window.location ="'.$url.'";
or
maybe try location.href = "myPage.html"