Welcome Guest, Not a member yet? Register   Sign In
jquery help
#1

[eluser]RaZoR LeGaCy[/eluser]
Hello all

I am trying to take an item such as a icon and set it to on and off status. So the click on the icon will set it on then off. The backend will talk to the DB and update without refreshing the page.

Simple but I seem to have a mind block on this simple thing.

My controller is
Code:
function index() {
        
        $this->load->model('dev_model');
    
        #Meta Data
        $data['ptitle'] = '';
        $data['pkeywords'] = '';
        $data['pdesc'] = '';
        $data['fsentence'] = '';
    
        #Queries
    
        #Body View
        $data['body'] = $this->load->view('******',$data,true);
        #Template == Never Change ==
        $this->load->vars($data);
        $this->load->view('********', $data);
    }
    function update() {
        $value = $this->input->post('value');
// Get value from jquery then insert using Active Record

        #Meta Data
        $data['ptitle'] = '';
        $data['pkeywords'] = '';
        $data['pdesc'] = '';
        $data['fsentence'] = '';
    
        #Queries
    
        #Body View
        $data['body'] = $this->load->view('*******',$data,true);
        #Template == Never Change ==
        $this->load->vars($data);
        $this->load->view('********', $data);
    }

View is
Code:
[removed]
$(document).ready(function(){
        
        $('.dot').click(function(){
                
                $(this).parent().click(function(e){ e.preventDefault();});
                
                if($(this).attr('src') == '/images/layout/accept.png') {
                        $(this).attr('src', '/images/layout/cancel.png');
                        var value = 0;                                            
                        $.post({
                            type: "POST",
                            url: "/controller/update",
                            data: $("form").serialize(), // get all the form field values
                            success: function(msg){
                                alert( "Data Saved: " + msg );
                          }
                       });
                } else {
                        $(this).attr('src', '/images/layout/accept.png');
                        var value = 1;
                        $.post({
                            type: "POST",
                            url: "/controller/update",
                            data: $("form").serialize(), // get all the form field values
                            success: function(msg){
                                alert( "Data Saved: " + msg );
                          }
                       });
                }
                
                alert('calling: ' + $(this).parent().attr('href'));
                alert('value: ' + value);  
                
        });                                    
        
});
[removed]

<div id="container">
      <a href="http://127.0.0.1/app.php/Controller/change/1"><img src="/images/layout/accept.png" class="dot"></a>            
      <a href="http://127.0.0.1/app.php/Controller/change/2"><img src="/images/layout/cancel.png" class="dot"></a>
      <a href="http://127.0.0.1/app.php/Controller/change/3"><img src="/images/layout/cancel.png" class="dot"></a>
      <a href="http://127.0.0.1/app.php/Controller/change/4"><img src="/images/layout/accept.png" class="dot"></a>
      <a href="http://127.0.0.1/app.php/Controller/change/5"><img src="/images/layout/accept.png" class="dot"></a>
  </div>

All assistance is welcome. I know it will be something simple as it always is. LoL

Thanks All
#2

[eluser]James Smith[/eluser]
I think your code isn't working because you're listening for the click on the <img> instead of the <a>. Calling preventDefault(e) inside the img click function will not work unless you put it inside the actual element that is being clicked (in this case the <a> click wins).

Try this instead. I'm using return false instead of preventDefault(e):

Code:
$(document).ready(function(){
        
        $('#container a').click(function(){
                var target = $(this).children('img');
                if($(target).attr('src') == '/images/layout/accept.png') {
                        $(target).attr('src', '/images/layout/cancel.png');
                        var value = 0;                                            
                        $.post({
                            type: "POST",
                            url: "/controller/update",
                            data: $("form").serialize(), // get all the form field values
                            success: function(msg){
                                alert( "Data Saved: " + msg );
                          }
                       });
                } else {
                        $(target).attr('src', '/images/layout/accept.png');
                        var value = 1;
                        $.post({
                            type: "POST",
                            url: "/controller/update",
                            data: $("form").serialize(), // get all the form field values
                            success: function(msg){
                                alert( "Data Saved: " + msg );
                          }
                       });
                }
                
                alert('calling: ' + $(this).parent().attr('href'));
                alert('value: ' + value);  
                return false;
        });                                    
        
});

hope that helps,

James
#3

[eluser]James Smith[/eluser]
sorry, just updated my code above to

Code:
var target = $(this).children('img');

so that only the one you clicked on will change
#4

[eluser]RaZoR LeGaCy[/eluser]
[quote author="At the Gates" date="1227137379"]sorry, just updated my code above to

Code:
var target = $(this).children('img');

so that only the one you clicked on will change[/quote]

I tried your above code but when the image was clicked it went to the next page instead of creating ajax type request.

I then reverted back to my original code and it worked except the value was not getting captured and passed to the dev/update script.

Code:
&lt;?php
class Dev extends Controller {

    function dev() {
        parent::Controller();
        #$this->load->library('image_lib');
        #$this->output->cache(5);
    }
    
    function index() {
        //if(isAdmin()){ $this->output->enable_profiler(TRUE); }
        
        $this->load->model('dev_model');
    
        #Meta Data
        $data['ptitle'] = '';
        $data['pkeywords'] = '';
        $data['pdesc'] = '';
        $data['fsentence'] = '';
    
        #Queries
    
        #Body View
        $data['body'] = $this->load->view('dev/dev',$data,true);
        #Template == Never Change ==
        $this->load->vars($data);
        $this->load->view('inc/templates/dev', $data);
    }
    function update() {
        $value = $this->input->post('value');
        
        $raw = !empty($value) ? $value : "No Value";
        $data['raw'] = $raw;
        
        $data = array(
               'voteNr' => 'My title' ,
               'voteValue' => 'My Name' ,
               'imgId' => $value,
            );

        #$this->db->insert('test_vote', $data);

        
        $this->db->select('*');
        $query = $this->db->get('test_vote',1);
        $data['value'] = $query->result_array();
    
        #Body View
        $data['body'] = $this->load->view('dev/test',$data,true);
        #Template == Never Change ==
        $this->load->vars($data);
        $this->load->view('inc/templates/dev', $data);
    }
    
} #END All
?&gt;

Code:
[removed]
  $(document).ready(function(){
    $('.dot').click(function(){
      $(this).parent().click(function(e){ e.preventDefault();});
            
      if($(this).attr('src') == '/images/layout/accept.png') {
        $(this).attr('src', '/images/layout/cancel.png');
        var value = 0;
        
          $.ajax({
          type: "POST",
          url: "/dev/update/",
          data: 'value=' + value, // get all the form field values
          success: function(msg){
          alert( "Data Saved: " + msg );
          }
        });
          
        $.post("/dev/update/", { value: + value, time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
          });


        } else {
        $(this).attr('src', '/images/layout/accept.png');
        var value = 1;

          $.ajax({
          type: "POST",
          url: "/dev/update/",
          data: 'value: ' + value, // get all the form field values
          success: function(msg){
          alert( "Data Saved: " + msg );
          }
        });
        $.post("/dev/update/", { value: + value, time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
          });

        }
            
      //alert('calling: ' + $(this).parent().attr('href'));
      //alert('value: ' + value);
    });                                    
});    
[removed]

<div id="status"></div>
  <div id="container">
      <a href="&lt;?=base_url();?&gt;dev/update/"><img src="/images/layout/accept.png" class="dot"></a>            
      <a href="/dev/update/"><img src="/images/layout/cancel.png" class="dot"></a>
      <a href="/dev/update/"><img src="/images/layout/cancel.png" class="dot"></a>
      <a href="/dev/update/"><img src="/images/layout/accept.png" class="dot"></a>
      <a href="/dev/update/"><img src="/images/layout/accept.png" class="dot"></a>
  </div>

Why is it not getting the value that was sent via ajax?

Thank you All and especially At the Gates
#5

[eluser]Nick Husher[/eluser]
[quote author="At the Gates" date="1227137095"]I think your code isn't working because you're listening for the click on the <img> instead of the <a>. Calling preventDefault(e) inside the img click function will not work unless you put it inside the actual element that is being clicked (in this case the <a> click wins)...[/quote]

The technical term for this behavior is "capturing" and "bubbling." Some events that get fired by elements in a document tree are known to "bubble", while all events go through an event process, which takes place in two phases. The "capture phase" begins at the document level and travels down through the tree to the specific node the event took place on. Each element in the tree may take an action at this phase if it is configured to do so. When it reaches the element in question, the element is given a chance to handle the event, then certain kinds of events "bubble" back up the document tree for an arbitrary number of steps.

Mouse events travel all the way down and all the way back up the three in the W3C model, which potentially gives a link potentially two opportunities to direct the user to another page.

Note that the IE family of browsers operate on a somewhat different model that I'm not as familiar with, so I don't feel comfortable speaking to.

My approach would be somewhat different than the other contributors, with the above knowledge in mind. I would attach an event handler to the element that contains these toggling elements, rather than the elements themselves. This offers two main advantages: it prevents your problem of linking to another page, and it reduces the memory footprint of your script. Normally memory wouldn't be a problem if you're only attaching five or ten event handlers, but if you're attaching fifty or a hundred, you'll notice some performance degradation (esp. in things like javascript-based animation). So, my alternative would look something like this:

Code:
$("#container").click(function(eventObject) {
    var target = eventObject.target;
    
    // if we're looking at our toggle image
    if($(target).hasClass('dot')) {
        eventObject.stopPropagation();
        
        // perform AJAX
    }
    else { return; }
});
#6

[eluser]James Smith[/eluser]
@Nick, that's a really good explanation, thanks...

@Razor...

I actually had the same problem a few weeks ago with a failed jQuery ajax call, also using serialize() (though not connecting to Codeigniter, I was using a tcl proc)... anyway, I fixed my problem by changing the jQuery POST to a GET. To this day I don't know why that fixed it, but it did... maybe it'll work for you and Codeigniter. (Also it was only a problem in Firefox if I remember rightly, IE was fine with it being POST.) Sorry I can't be much more help - I'm a complete Codeigniter newbie, just popped over from the EE side of the fence :-)

James
#7

[eluser]RaZoR LeGaCy[/eluser]
Thanks Nick and At The Gates

The solution to the not getting values is that the variables were going to controller as and array. I solved it by using
Code:
$value = $_POST['value']['0'];

I will try both methods that you posted previously.

Thanks as this is now solved.




Theme © iAndrew 2016 - Forum software by © MyBB