Welcome Guest, Not a member yet? Register   Sign In
onclick innerHTML to change this->load->view?
#1

[eluser]traucostar[/eluser]
Hello, hope someone can help me.... this is what im trying to do:

[Image: f_onclickm_cd4161e.jpg]


Code:
[removed]        
function showgallery(here)
{
var obj = document.getElementById(here);
obj[removed] = "<?php $this->load->view('some/directory/view');?>";

}
[removed]



<div class="album1">
<img src="&lt;?=$thumb;?&gt;">
</div>


<div id="pictures">

&lt;?php $this->load->view('show/nothing'); ?&gt;    
            
</div>


No errors only a white empty site appears.

I know here is the problem:
obj[removed] = "&lt;?php $this->load->view('some/directory/view');?&gt;";

How can I change the php view that the <div id="pictures"> shows?????

Thanks!
#2

[eluser]TheFuzzy0ne[/eluser]
First, check you're HTML is valid at http://validator.w3.org/.

Second of all, it may benefit you to install the [url="http://www.getfirebug.com"]Firebug[/url] Firefox extension, and then you can check for any JavaScript errors, and step through your JavaScript code to ensure it's working as expected.
#3

[eluser]mvdg27[/eluser]
I can also recommend you to take a look at a javascript framework to make a request to a page to retrieve your html, which you can then insert into the div. I often use Mootools with their HTML-request plugin. Have a look at http://demos.mootools.net/Request.HTML

Michiel
#4

[eluser]@Frédéric Quié - bleekom.org[/eluser]
Try to change :
Code:
<img src="&lt;?=$thumb;?&gt;">
by :
Code:
<img src="&lt;?php echo $thumb;?&gt;">

some doesn't like short tags :cheese:
#5

[eluser]traucostar[/eluser]
Thanks for the fast replys!
mvdg27: awesome framework! Its almost perfect! but heres my problem:

The "result" DIV in the HTML-request plugin shows a data.html from a certain directory.
Code:
var req = new Request.HTML({url:'data.html', onSuccess: function(html) {.....

In my project users have X photo albums, so I need a DIV thats shows the pictures of the gallery, depending of the $albumID, something like this:
Code:
&lt;?php $this->load->view('albumpictures', $albumID); ?&gt;


I try to do this:
Code:
&lt;?php $i = 0;while ($i < 100000){?&gt;
var req = new Request.HTML({url:'&lt;?php echo $base_url?&gt;'+'album&lt;?php echo $i?&gt;.html',

But I cant create 100000 album$i.html for each gallery...
So how can I modify this request, to do something like the load->view that receives an $albumID, to show that images?
Code:
var req = new Request.HTML({url:'data.PHP' (AND RECEIVE A VARIABLE), onSuccess: function(html) {.....

THANKS!!!!
#6

[eluser]slowgary[/eluser]
I'm not sure, but I don't think it'll work this way. Someone please correct me if I'm wrong, but $this->load->view() only adds that view to the output buffer, so injecting it's return value into your object.inner-html won't work as there's no markup to inject. You could pass TRUE as the third parameter of the view() function, but this still won't allow you to change the view url dynamically. Basically, no matter which album you click on you'll always be loading the same markup into <pictures>.

I think there's a better approach anyways. Try something like this: (uses jquery)

Code:
&lt;head&gt;
&lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js'>&lt;/script>
&lt;script type='text/javascript'>
$(document).ready(function() {
   $('.album').bind('click', function(){
      $.post('/album_controller/album/',
             { album_id : $(this).attr('id') },
             function(data) {
                $('#pictures').html(data);
             }
      );
   });
});
&lt;/script>
&lt;/head&gt;

&lt;body&gt;

<div id='album001' class='album'>
   <img src='&lt;?= $thumb001; ?&gt;'/>
</div>

<div id='album002' class='album'>
   <img src='&lt;?= $thumb002; ?&gt;'/>
</div>

<div id='album003' class='album'>
   <img src='&lt;?= $thumb003; ?&gt;'/>
</div>

<div id='pictures'>
</div>

&lt;/body&gt;

This is untested but should work. The JavaScript iterates through all elements with the class 'album' and attaches a click handler. When you click on an 'album', the script sends the albums ID attribute to /album_controller/album/ in which you would use $this->input->post('album_id'); to fetch the data and push it to a view. The ajax call will get the contents of that view and inject them into the 'pictures' div.
#7

[eluser]mvdg27[/eluser]
"But I cant create 100000 album$i.html for each gallery..."

I think you are missing the point of PHP here .. PHP is a dynamic language, you can pass variables to your scripts, to generate different results. First get your script to work without using javascript, then try to make it more fancy using javascript. The way I would handle this:

controller 'photo.php':

Code:
class Photo extends Controller {

function Photo() {
    
    parent::Controller();
        
}

function show_album($album_id) {
    // get your album data by the album id
    $data = $this->get_album_by_id($album_id)
    // Insert everything in the view and display it
    $this->load->view('album', $data);
}

Ok. So now we have a simple controller, that takes the album_id from the uri-string, fetches all the album data, inserts that data in to the view and returns the view to the screen.

The next step is to get this running in a fancy AJAX-way. And it's not that difficult Wink

Just make sure that when a link is clicked and the url to call by the html-request plugin becomes dynamic. I myself would first print the <a href="#"> to the screen the regular way.

main template file:
Code:
foreach($albums as $album) {
   print '<a href="'.site_url('photo/'.$album['id']).'" class="album">'.$album['id'].'</a>';
}

Then with javascript, I would loop through all the links with class 'album', and attach an 'onclick-event' to each link. The onclick event consists of reading out the href of that specific link, and running it through the Request.HTML. The code below is written of the top of my head, and may contain errors. But it should give you an idea at least.

Code:
window.addEvent('domready', function() {
    $$('a.album').each(function(link) {
        link.addEvent('click', function() {
            new Request.HTML({
                url: link.get('href'),
                onComplete: function() {
                    // do your stuff here
                }
            });
        })
    }
});

You may want to study mootools syntax a bit more, by checking out more examples on their website and going through some tutorials. It's not the easiest thing at first sight. And install Firebug .. you won't be able to write javascript without it!

Good luck! Michiel
#8

[eluser]traucostar[/eluser]
I download mootols it is working, but it's not VERY useful because Im creating functions over and over again for each album:

Script:
Code:
<<scrip>>

&lt;?php for($i = 0; $i < $number_of_albums; $i++){ ?&gt;

    window.addEvent('domready', function() {
    if (!window.demo_path) window.demo_path = '';
    var demo_path = window.demo_path;
        

    var req = new Request.HTML({url:'&lt;?php echo site_url('compra/memuestra/'.$albumesid[$i])?&gt;',
                              

        onSuccess: function(html) {
            $('result').set('text', '');
            $('result').adopt(html);
        },
        onFailure: function() {
            $('result').set('text', 'Error!');
        }
    });


    $('makeRequest&lt;?php echo $i?&gt;').addEvent('click', function() {
        req.send();
    });

});

&lt;?php }?&gt;

    <<scrip>>

PHP:
Code:
&lt;?php for($i = 0; $i < $number_of_albums; $i++){ ?&gt;
<a href="#" id="makeRequest&lt;?php echo $i?&gt;"><img src="&lt;?=$thumb[$i]?&gt;"/></a>
&lt;?php }?&gt;


Im trying to modify this declaring a variable in the script that receives the albums id:
Code:
var albumid=new Array();
   &lt;?php
    for($i = 0; $i < $numero; $i++){ ?&gt;
    albumid[&lt;?php echo $i; ?&gt;]="&lt;?php echo $albumesid[$i]; ?&gt;";
  &lt;?php }?&gt;

So that the java function only receives an index $i and I can use it in:
Code:
var req = new Request.HTML({url:'&lt;?php echo site_url('compra/memuestra/'.albumid[INDEX])?&gt;',

How can I do this?

Thanks for the answer.
#9

[eluser]mvdg27[/eluser]
Basically the thing your doing wrong is that you're mixing php with javascript. What you should do is create ONE generic javascript funtion. No need for any php in your javascript. When you build your view, you can use php to somehow build in identifiers for you different albums. My preferred method is to simply make the urls point exactly to the content you want to be loaded.

Then the magic happens when you use your domready function to iterate over all the links. This ONE JAVASCRIPT ONLY function should read the urls, and add an html-request event to the link, instead of the default link behaviour.

My tip at this point: make sure you album works without any javascript. That is, when you click a link of your album, the page should reload and present you with the correct photo's in the album. Once that is working, take another look at my example in my previous post, to make the album work with dynamic javascript

The way your are creating javascript functions over-and-over with a php-loop is definately not the way to go.

Michiel




Theme © iAndrew 2016 - Forum software by © MyBB