0

This question already has an answer here:

is there a way to load plugin with ajax? I want to load Quick Chat plugin which supports initializing with PHP and Shortcode

[quick-chat height="400" room="default" userlist="1" userlist_position="left" smilies="1" send_button="0" loggedin_visible="1" guests_visible="1" avatars="1" counter="1"]

OR

<?php
global $quick_chat;
if(is_object($quick_chat) && method_exists($quick_chat, 'quick_chat')){
    echo $quick_chat->quick_chat(400, 'default', 1, 'left', 0, 0, 1, 1, 1, 1);
}
?>

My JS side

key = '1';
jQuery.ajax({
    type : 'POST',
    url : apfajax.ajaxurl,
    data : {
        action : 'loadMyChat',
        key: key
    },
    dataType: "json",
    success : function(data) {
        jQuery("#chatModal").find(".modal-body").html(data.html);
    },
    error: function(MLHttpRequest, textStatus, errorThrown){
            alert(textStatus);
    }
})

PHP Side

function loadMyChat() {
    $key = $_POST['key'];
    $count = 1;
    $html = 2;
    global $quick_chat;

    //$ak = $quick_chat->quick_chat();
    $ak = $quick_chat->quick_chat('300', 'default', '1', 'left', '0', '0', '1', '1', '1', '1');
    die(json_encode(array(
        'html' => $ak,
        'count' => $count
    )));
}

OUTPUT:

<div class="quick-chat-container" data-quick-chat-id="X3LUUGVZNhuG" data-quick-chat-height="300" data-quick-chat-room-name="default" data-quick-chat-userlist="1" data-quick-chat-userlist-position="left" data-quick-chat-smilies="0" data-quick-chat-send-button="0" data-quick-chat-loggedin-visible="1" data-quick-chat-guests-visible="1" data-quick-chat-avatars="1" data-quick-chat-counter="1"><div class="quick-chat-loading">LOADING...</div></div>

As you see container only includes loading block, where are the other blocks? textarea and history?

Okay, one more interesting point, here is a public function for initialising chat.

public function quick_chat($height = 400, $room = 'default', $userlist = 1, $userlist_position = 'left', $smilies = 1, $send_button = 0, $loggedin_visible = 1, $guests_visible = 1, $avatars = 1, $counter = 1) {
    $content = '';
    ob_start();

    echo '<div class="quick-chat-container" data-quick-chat-id="'.wp_generate_password(12, false, false).'" data-quick-chat-height="'.$height.'" data-quick-chat-room-name="'.$room.'" data-quick-chat-userlist="'.$userlist.'" data-quick-chat-userlist-position="'.$userlist_position.'" data-quick-chat-smilies="'.$smilies.'" data-quick-chat-send-button="'.$send_button.'" data-quick-chat-loggedin-visible="'.$loggedin_visible.'" data-quick-chat-guests-visible="'.$guests_visible.'" data-quick-chat-avatars="'.$avatars.'" data-quick-chat-counter="'.$counter.'">';
        echo '<div class="quick-chat-loading">'.__('LOADING...', 'quick-chat').'</div>';
    echo '</div>';

    if(!isset($this->options['hide_linkhome'])){
        echo '<div class="quick-chat-linkhome"><a href="'.self::link.'" target="_blank">'.__('Powered by Quick Chat', 'quick-chat').'</a></div>';
    }
    $content =  ob_get_contents();
    ob_end_clean();
    return $content;
}

judging from this, my script returns everythign corectly. no js is loading or any ajax handlers are set. in my opinion the problem is data-quick-chat-id.

I did small trick like return quick_chat function on page load which is hidden and after my user sets his cookies (user and room) I request my ajax and change this div with ajax returned.

Of course it still does not work, but I didn't change change data-quick-chat-id but that's because I don't know how to change data attribute inside my data.html (returned from my ajax) before I insert it in html.

Am I going in right direction? Just wanted to update, thanks

marked as duplicate by kaiser Feb 18 '14 at 2:40

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • If you are using the AJAX API, plugins should be loading. I think your plugins is loading and is attempting to make its own AJAX request, which is causing trouble. – s_ha_dum Jul 14 '13 at 14:57
  • How can I debug such case? – CBeTJlu4ok Aug 3 '13 at 19:45
  • Log errors. Watch the requests being made via HttpFox or WireShark. – s_ha_dum Aug 3 '13 at 20:04
  • sadly no errors, there are request only to admin-ajax during my script exeution and its returns tottaly same ouput I get with my script alert :( – CBeTJlu4ok Aug 3 '13 at 20:31
  • Okay I've got the idea what you are talking about but the problem is that there is no logs for "plugin ajax calls" I mean, there is my request and response but no calls from plugin before or after to request js files or anything, it just returns the html – CBeTJlu4ok Aug 3 '13 at 21:15
0

looking at the html output of the plugin code, i can say u that the plugin loads everything else (textarea and history) with javascript (see all those data- attributes and loading message). Now if the call to function was made on page load(non-ajaxy way), the plugin would have loaded requried javascript files and then things would look fine. But since the plugin function is called in an ajax request, plugin's javascript isn't loaded, only html is returned back, which is causing the problem..

Speaking generically, according to my limited exposure of wordpress, it wouldn't be possible to load plugins via ajax (or atleast a major number of plugins). And if it is, i'll be so very interested in seeing the approach :)

  • Hello webdwall, Yes, it loads rest of the content with javascript.. now I'm thinking in loading those js files with my themes functions.php and trying to intiate it as function after ajax is loaded. will update after some info) – CBeTJlu4ok Jul 17 '13 at 18:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.