Login

08-28-2010, 10:12 PM

[eluser]jhcthulhu[/eluser]
Greetings!

I'm a new CodeIgniter user and fairly new to web apps in general, and I'm having some problems with refreshing a div within a page using jQuery.

I've ready through dozens of wonderful help posts here but I haven't found one specific to my problem. I've read and tried net.tuts on jQuery/AJAX, and used a mutant version of

http://www.mrforbes.com/blog/2009/01/a-q...-tutorial/

but I can't seem to get things to refresh.

I have a page built and populated with catalog elements from a database, and each item onClick sends a value to my jQuery .load(); function, that in theory should fetch a new single set of data from the database relating to that same item, and return it to a loaded view in a div on my main page. I.e. click on item 1201 in the main page, and the div containing a view populated by just that item's row in the database will refresh with each new item clicked on.

I've checked the function and it is loading in the proper variable value from the item clicked.
I've loaded the function string it generates manually calling it directly in the browser and the 'test' view that controller function loads has properly loaded the correct array from the database.
In fireBug, the link generated by the jQuery .load() turns up red, but manually loading the link does generate the correct data.

Two problems: one: onClick simply isn't loading anything into the correct div, it stays blank (it does load the test header, so I know the view is being called into the main page correctly). Two: I'd like it to load the first item from the current set if there's no value for the details div.

I hope this isn't too noobie or extensive a question Smile

Thanks for your time!

Controller Sad

this is the function handling the details request from onClick:

Code:
function details1200($model_number){

    $results['details'] = $this->Mod_1200->getModelNumber($model_number);

    $this->load->vars($results);

    $this->load->view('test', $results);

    }

This is the jQuery function Sad

I've removed my huge mess of testing with .post and .ajax)

Code:
function get_model_number(model_number) {

    var p = {};

    p = model_number;

     $('#details_results').load(&lt;?php echo base_url();?&gt; + 'details1200/' + p);     

    }

And here is the part of view that is loading another view that contains the details:

Code:
<div id="details">

                &lt;?php $this->load->view('test.php'); ?&gt;

            </div>

..and the test details page:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html &gt;

&lt;head&gt;

[removed][removed]

[removed][removed]

[removed][removed]

[removed][removed]

[removed][removed]

[removed]

//&lt;![CDATA[

    base_url = '&lt;?php base_url();?&gt;';

//]]>

[removed]

&lt;/head&gt;

&lt;body&gt;

<div id="details_results">

    <h1>test page</h1>

</div>

&lt;/body&gt;

&lt;/html&gt;

Once again, in theory, a user click on an item from the main page catalog, the javascript loads the test view page with the function details1200 with the specific item # that was clicked, then the view test #details div gets refreshed and displayed on the main page.

Thank you all!
-J

08-28-2010, 11:23 PM

[eluser]Myke Bates[/eluser]
So if you point your browser to domain.com/details1200/123/ or whatever model number, does this page work appropriately?

08-29-2010, 12:18 AM

[eluser]jhcthulhu[/eluser]
Yes, if I manually call the controller, function, and pass it a proper variable to process, it calls the correct view and returns the correct data.
Along the lines of http://127.0.0.1/folder/index.php/contro...tion/1201/

I'm 99% sure it's a problem with my JavaScript. I'm really not strong here and I've tried .load, .post and .Ajax methods but I'm not sure If I'm missing something obvious in the communication between JavaScript, codeigniter and refreshing a view.

Thanks all for your time! Big Grin

let me know if I can supply more info.
-J

08-29-2010, 01:00 AM

[eluser]InsiteFX[/eluser]
Change your code to this.

Code:
&lt;!-- set javascript base_url --&gt;

you know what this is!

[removed]

    &lt;![CDATA[

    base_url = '&lt;?php echo base_url();?&gt;';

    ]]>

[removed]

and this!

You can then use base_url in your js code.

InsiteFX

08-29-2010, 10:10 AM

[eluser]Myke Bates[/eluser]
Seems like the issue is simply client side. Looks like you have most everything correct. If something like this doesn't work maybe try simplifying the process to troubleshoot where the issue is coming from maybe by creating just a static page to load into your current page. Also when working with ajaxy stuff like this, I find it helpful to be able to inspect what's going by using a program like fiddler.

Anyways, hope this might help.

Code:
$('a').click(function(){ //Maybe throw a css class on the anchor?   $('a.ajaxLink')

    get_model_number("123"); //However you are getting your model number

})

function get_model_number(model_number) {

     $('#details_results').load(base_url + 'details1200/' + model_number + " #details");     

    // base_url variable from post above.    Then Load only the details div back into the page so your not grabbing anything else unnecessary 

    }

08-29-2010, 02:15 PM

[eluser]jhcthulhu[/eluser]
Thank you for the responses! I appreciate it!

I've updated the base_url error and added the new .load function as indicated:

Code:
$('#details').load(base_url + 'index.php/con_duro/details1200/' + model_number + " #details_results");

#details is the div on the main page I want refreshed, and #details_results is the div in my test view that's being loaded into my main view that should contain the results of running the details1200 function on the model_number that was passed in.

My view still isn't updating. When I click on each item, the area that's supposed to refresh flashes, but still displays errors relating to no information being passed into it.

If I manually call the details1200 function through the browser, ie:

http://127.0.0.1/duro/index.php/con_duro...s1200/1201

then the proper test.html page is loaded up containing the array with all the data I want displayed correctly.

It appears that my subview, when loaded into my main view, isn't receiving any data to work on, so it's returning errors such as:

A PHP Error was encountered
Severity: Notice
Message: Undefined variable: details
Filename: views/test.php
Line Number: 5

When called manually, these objects DO contain data and display information correctly, just not when included in my main view.

Using FireBug, it's saying in the Net panel that the outgoing request is good, but in the console is listing the GET as red and having no response although it's sending out the proper request to the controller function details1200 (if I paste this back into the browser, once again it works fine).

I MUST be missing something simple here. Do I need to use the optional parameter when loading a view to send only string data and not to the browser?

Here's the controller function for my main view:

Code:
function series1200(){

    $data['title'] = "Series 1200 | Heavy Duty Hose Reels";

    $model_number ='1201';

    $config['base_url'] = 'http://localhost/duro/index.php/con_duro/series1200/';

    $config['total_rows'] = $this->db->get('1200')->num_rows();

    $config['per_page'] = '9';

    $config['full_tag_open'] = '<div id="pagination_links">';

    $config['full_tag_close'] = '</div>';

    $this->pagination->initialize($config); 

    $data['content'] = $this->db->get('1200', $config['per_page'], $this->uri->segment(3))->result();

    $this->load->vars($data);

    $this->load->view('template');    

    }

And here's the controller function for the details:

Code:
function details1200($model_number){

    $results['details'] = $this->Mod_1200->getModelNumber($model_number);

    $this->load->vars($results);

    //$test = $this->load->view('test', '', TRUE);

    $this->load->view('test');

    }

And the model function referenced above, that DOES return the proper data, just not when it's called from the main page:

Code:
function getModelNumber($model_number){

    $this->db->where('model_number',$model_number);

       $query = $this->db->get('1200');

       $row = $query->row();

       $results[] = $row;

       return $results;

    }

Also, I'm calling my test view directly from my main page ie:

Code:
<div id="details">

                &lt;?php $this->load->view('test.php'); ?&gt;

            </div>

And here's how I'm loading each call to the javascript function with the model number:
(there's an error here for some reason. The model_number at the front is a full php call for the correct number..weird).

Code:
<a href="">model_number; ?&gt;'" onClick="get_model_number('&lt;?php echo $row->model_number; ?&gt;');"><img >thumbnail; ?&gt;" width="89" height="88" alt="Thumbnail Image" /></a>

Thanks again everyone for the feedback!
-J

08-29-2010, 03:32 PM

[eluser]jhcthulhu[/eluser]
Update:

I think I've narrowed down the problem a little further.

My javascript function:

Code:
function get_model_number(model_number) {

    var p = {};

    p = model_number;

     var link = 'http://127.0.0.1/duro/index.php/con_duro/details1200/1201';

     //var link = base_url + 'index.php/con_duro/details1200/' + model_number + " #details_results";

     $('#details').load(link);

}

when called externally doesn't work. But if I paste in (with scripts tags):

Code:
var link = 'http://127.0.0.1/duro/index.php/con_duro/details1200/1201';

     //var link = base_url + 'index.php/con_duro/details1200/' + model_number + " #details_results";

     $('#details').load(link);

directly to my main view, it calls up and displays the data correctly.

My test view won't load up the data when it's included in my main view, but when the details1200 function is called directly, my test.html view DOES load it.

If I hard encode the function into my main page, it displays correctly.

If I call the javascript function onClick, no data is sent to my test.html
SO in the end, whatever I call from my javascript function doesn't work and gets the red text treatment in FireBug. If I call the javascript directly from the page, it works great.
SO CLOSE!
Hope this helps!
-J

08-29-2010, 04:07 PM

[eluser]jhcthulhu[/eluser]
Well...I'm embarrassed about this, not something I really knew about, but I want to post my solution for anyone else that is suffering from this.

Previously, my anchor tag for each image link was:

Code:
<a href="">

In order for the GET to work properly it seems, it must be at least a placeholder link:

Code:
<a href="#">

/sigh at least it's solved Smile

If anyone else is having this error, hopefully my shame will help you! Haha!

-J

08-29-2010, 04:13 PM

[eluser]Myke Bates[/eluser]
haha, awesome, glad it was solved!