Welcome Guest, Not a member yet? Register   Sign In
Codeigniter view and jquery AJAX
#1

[eluser]sico87[/eluser]
First of I would like to apologise, I am awful at putting my problems into words but I will try my best.

I am in the process of making a one page wesbite, to do this I am using ajax to GET some data from the data base. This is done by calling a method in the AJAX and then apending the results (which get put into a view) onto a
Code:
div
in the 'master page'.

Here is the code that does all the leg work, first of all the master page.

Code:
$this->load->view('template/main_menu.php');
$this->load->view('template/left-content.php');
$this->load->view('template/right-content.php');


The right content view

Code:
<div id="right-content">
    <div id="accordion"></div>
</div>

The method that the AJAX calls
Code:
public function category($content_id) {
    //$this->output->enable_profiler(TRUE);
    if (intval($this->uri->segments[4])){
        $content_id = $this->uri->segments[4];
    } else {
        $content_id = $this->uri->segments[7];
    }
        $data['content'] = $this->site_model->get_content($content_id);
        $this->load->view("call", $data);
    }

and finally the javascript

Code:
$(document).ready(function() {
        //accordians for when the AJAX loads the content
        
         // hides the main_menu as soon as the DOM is ready
         // (a little sooner than page load)
          $('#main_menu').hide();
             // shows the slickbox on clicking the noted link  
              $('h3#show-menu a').click(function() {
                    $('#main_menu').toggle('slow');
                        return false;
            });
    //try and hide the left content when it is null
        $("#left-content:empty").hide();
        //style up the scroll bar
            $('#left-content').jScrollPane();
            
            //do some AJAX to call the method instead of the browser
            $("a.navlink").click(function (ev) {
                $(this).toggleClass("active");
                ev.preventDefault();
                var id = $(this).attr("id")
                if ($(this).hasClass("active")) {
                   $("."+id).remove();
                }
                else {    
                //$(this).toggleClass("active");
                      var url = $(this).attr("href");
                        $.ajax ({
                            url:  url,
                            type: "GET",
                            success : function (html) {
                                $("#accordion").append(html);
                                $('#accordion').accordion({
                                    active: 0,
                                    header:'h2'
                                });
                                //alert(accordion())
                            }
                        });
                }
            });
      });

It seems that the HTML that is returned is not being put into the markup as when I view source after getting the data (and seeing on screen nothing is appended to the div accordion like it should be.
#2

[eluser]CtheB[/eluser]
You should use "POST" as ajax type instead of "GET" because codeigniter doesn't work with get (security issues)
#3

[eluser]LuckyFella73[/eluser]
But even when your function returns the desired data the
source view will not change. Layout modifications made
with javascript affects the appearence "directly" so the
source view is not affected. You can check the returned
data by using tools like firebug (firefox extention).
#4

[eluser]sico87[/eluser]
So if it never changes the markup how can get the accordion to work?
#5

[eluser]LuckyFella73[/eluser]
What I wanted to say is: when you right-click at the page and
klick at "view source" you cant see any differences after your
ajax function returned something. Your browser is able to render
the new data of course.

For example: if you have an container lets say:
Code:
<h1 id="title"></h1>

You can tell the browser via javascript to fill the h1 tag with
desired content. Your browser then displays a h1 tag with your
submitted data but if you "view source" you will just see an
empty h1 tag.
#6

[eluser]sico87[/eluser]
I understand that, what I dont understand is that when I look in firebug the correct HTML is there to give the accordion functionality but I dont get any, I think it is down to loading the view through ajax but I dont know why, any ideas?
#7

[eluser]jedd[/eluser]
[quote author="sico87" date="1260466833"]
I understand that, what I dont understand is that when I look in firebug the correct HTML is there to give the accordion functionality but I dont get any,
[/quote]

Do you mean the accordion doesn't work at all, or it doesn't include the extra stuff you're sending in via the callback?

If it's the former, then it's not a CI problem - you should try putting in some hard coded divs for a couple of accordion panels to ensure you're loading the jquery-UI stuff properly. This includes the oft' overlooked but essential jquery ui CSS.

If it's the latter, then it's not a CI problem - you should probably work on a non-accordion, non-jquery-UI test environment first until you work out how to send the AJAX updates through properly, and then weld that back into this code.
#8

[eluser]sico87[/eluser]
I know it is pulling the result out ok as I can see them just included the UI CSS and I get an accordion now but it only opens and does not close :-( and if i delete the element and then add it again I get no accordion ( esssentially the user is building there own menu so they can add and remove elements)




Theme © iAndrew 2016 - Forum software by © MyBB