Welcome Guest, Not a member yet? Register   Sign In
Problem using Ajax with prototype and loaded javascript or css inside the httprequested page
#1

[eluser]Isos[/eluser]
Hi, the title tells it in short, and here the explanation:

I am using prototype for Ajax. Loading by a click 1 page (controller) into another.

in the opened page view
Code:
<form action="" method="post" name="report_form" id="report_form" >
<input type="submit" style='width:200px' name="report_button" value="Report"  id="report_button"  />
</form>
<div  style="display:none;" id="display_textarea"></div>

Inside DIV the other page should be loaded:
Now the javascript that defines the Ajax object is:

Code:
window.onload = function () {
    $('report_button').onclick = function () {
            mail_report();
            return false;    
    }
}
function mail_report() {
    new Ajax.Updater ('display_textarea', report_url, {method:'post', postBody:'user_id='+$F('user_id')});
    new Effect.Appear('display_textarea');
}
// report_url : is the URL to the controller that has the mail view

The view page of the controller that is going to be loaded is :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="content-type" content="text/html;charset=UTF8" /&gt;
        &lt;link rel="stylesheet" href="&lt;?=base_url();?&gt;css/style.css" type="text/css" /&gt;
        
        &lt;title&gt;&lt;?=$page_title;?&gt;&lt;/title&gt;
        
        
        
        tinyMCE.init({
            mode : "textareas",
            theme : "simple"
            });

        
    &lt;/head&gt;
    &lt;body&gt;
&lt;!-- CSS Style doesn't work when calling the page with the ajax httprequest.
&lt;!-- Some form with textarea goes here, textarea doesn't appear with the javascript editor loaded when calling the page with the ajax httprequest.--&gt;
    &lt;/body&gt;
&lt;/html&gt;

So actually what I want to say, that this page, if refering to it directly, the tiny_mce (javascript textarea editor) and css work fine, but when loading it using ajax it doesn't work!

Anyone knows why? Is it a codeigniter problem? or it's Ajax?

Thanks.
#2

[eluser]easymind[/eluser]
Well I would strip out everything except for what is in the body tags. You don't need the whole header in your div...

You should put your tinymce javascript inside javascript tags, so the view page of the controller that is going to be loaded is :
Code:
Some content that uses CSS style from your mainpage included CSS...
&lt;textarea&gt;&lt;/textarea&gt;

Maybe you can leave out the window.unload, but then make sure your tinymce init is after the textareas...
&lt;script language="javascript" type="text/javascript">
window.onload = function () {
     tinyMCE.init({
          mode : "textareas",
          theme : "simple"
     });
};
&lt;/script>

You should load the tinymce.js in the header of your mainpage...
#3

[eluser]Isos[/eluser]
Actually I tried doing that, loading tinymce in the mainpage and didn't work. The reason why I want to use ajax in this is simply because the main page is already loaded with a lot of stuff and tinymce is such a big and heavy library! I get freaked out when I see the output of firebug Net after loading the page! That's why I want to load it by ajax, and turned out that it doesn't work this way!

Now I am using a popup instead, but still want to have ajax. I'll give it more tries, thanks anyway. I'll consider putting tinymce init after the textarea.

Thank you again.




Theme © iAndrew 2016 - Forum software by © MyBB