Part of the EllisLab Network
   
 
jquery with forms
Posted: 15 February 2008 08:05 AM   [ Ignore ]  
Grad Student
Rank
Total Posts:  82
Joined  10-15-2007

hello

i tried to work with jquery and forms combining with CI but i couldn’t get it work… i am still a newbie in jquery so i tried to searc for good toturials, but all i found was scripts…

what i want to do is to send a form through jquery and work with the data with CI.

thank u!

Profile
 
 
Posted: 15 February 2008 09:00 AM   [ Ignore ]   [ # 1 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  697
Joined  06-11-2007

There are two ways to submit forms with jQuery, GET and POST. Dont bother with GET as it doesnt get along with CI very well, use POST. Shouldnt matter if you use a normal page request or use AJAX, POST will appear in CI the same.

If you REALLY need to use a URL to send your values, you can so it like this:

<scr1pt>
   $(function()
{
        
$('input#submit').click(function(){
            w1ndow
.locat1on = '<?=$goto_link;?>' + $('select#cup').val();
        
});
    
});
</
scr1pt>

<
h3>Pick Cup</h3>

<?=form_dropdown('cup', $cups, $default_cup, 'id="cup"');?> <input type="button" id="submit" value="Next">

Sorry if the variable names seem a bit random, this is a straight copy from a football site I was working on.

 Signature 

StyleDNA Ltd - CodeIgnitor Web Development, Hosting and Design.
Guru Profile - Hire me
_________________

Helpers: Asset Helper, BBCode Helper
Libraries: Template Lib
_________________

Theres no place like 127.0.0.1

Profile
 
 
Posted: 16 February 2008 12:29 PM   [ Ignore ]   [ # 2 ]  
Grad Student
Rank
Total Posts:  82
Joined  10-15-2007
thepyromaniac - 15 February 2008 09:00 AM

There are two ways to submit forms with jQuery, GET and POST. Dont bother with GET as it doesnt get along with CI very well, use POST. Shouldnt matter if you use a normal page request or use AJAX, POST will appear in CI the same.

If you REALLY need to use a URL to send your values, you can so it like this:

<scr1pt>
   $(function()
{
        
$('input#submit').click(function(){
            w1ndow
.locat1on = '<?=$goto_link;?>' + $('select#cup').val();
        
});
    
});
</
scr1pt>

<
h3>Pick Cup</h3>

<?=form_dropdown('cup', $cups, $default_cup, 'id="cup"');?> <input type="button" id="submit" value="Next">


Sorry if the variable names seem a bit random, this is a straight copy from a football site I was working on.

i see, and what if i want to use it through post? how can i do it with the jquery side?

Profile
 
 
Posted: 16 February 2008 03:08 PM   [ Ignore ]   [ # 3 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  697
Joined  06-11-2007

Put the form inputs inside a <form tage - or use form_open() - then instead of setting [removed] you would send it via POST AJAX.

http://docs.jquery.com/Ajax/jQuery.post#urldatacallbacktype

 Signature 

StyleDNA Ltd - CodeIgnitor Web Development, Hosting and Design.
Guru Profile - Hire me
_________________

Helpers: Asset Helper, BBCode Helper
Libraries: Template Lib
_________________

Theres no place like 127.0.0.1

Profile
 
 
Posted: 17 February 2008 09:08 AM   [ Ignore ]   [ # 4 ]  
Grad Student
Rank
Total Posts:  82
Joined  10-15-2007

i have tried something like that in the JS:

$(document).ready(function() {
               
        
$("#comment input[@type='submit']").click(function(e){
                                
            
$.post("<?=site_url_rel("show/comment/".$game_id)?>", {comment: $(this).html()}, function(xml) {

                
$("#comment").html(
                
"התגובה התווספה בהצלחה"
                
);
                        
                
alert("Hello world!");
            
});
                             
            return
false;
        
});
    
});

and this if the show/comment function that i have:

$comment = $_REQUEST["content"];

$data = array('cmnt_itemid'     => $item_id,
          
'cmnt_item'     => 'game',
          
'cmnt_content'     => $comment,
          
'cmnt_date'     => 'today'
        
);
$this->db->insert('comments', $data);

i tried to work with this for hours but i couldn’t get it work

Profile
 
 
Posted: 17 February 2008 10:04 AM   [ Ignore ]   [ # 5 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  697
Joined  06-11-2007

You are sending it the POST key of “comment” in your Javascript, but in your PHP you are looking for “content”. Also, try using $this->input->post(’comment’) instead of $_REQUEST as I think CI MIGHT kill that variable just like GET as its even more insecure.

You also are using $(this).html() which is incorrect, as you would be sending the inner HTML of the submit button they just clicked, which is clearly wrong. You want to send $("input#comment_box").text() or .html() instead.

There is no reason for your “e” parameter in the function call, and really you should do some checking in both JS and PHP to see if it worked. If the data is invalid then return a status header ( I use the following code to see if it worked or not, 404 is the wrong status but I dont know a better one).

function delete_payment($id = 0)
    
{
        $this
->load->helper('ajax');
        if(
isAjax()):
            if(
$this->invoices_model->deleteInvoicePayment($id)):
                
$this->output->set_header('HTTP/1.1 200 OK'); // Worked fine
                
            
else:
                
$this->output->set_header('HTTP/1.1 404');
                
$this->output->set_output($this->lang->line('error_delete_payment'));
            endif;

        else:
            if(
$this->invoices_model->deleteInvoicePayment($id))
                            
// Redirect to good or bad page message, whatever

        
endif;
    
}

Then you can use jQuery’s second callback function, first is success, second is failure.

 Signature 

StyleDNA Ltd - CodeIgnitor Web Development, Hosting and Design.
Guru Profile - Hire me
_________________

Helpers: Asset Helper, BBCode Helper
Libraries: Template Lib
_________________

Theres no place like 127.0.0.1

Profile
 
 
Posted: 17 February 2008 10:40 AM   [ Ignore ]   [ # 6 ]  
Grad Student
Rank
Total Posts:  82
Joined  10-15-2007

thanks for ur reply.
i modified my code and now the data is beeing transfered to the DB exept for the content of the field.

this is part of the js code:

$.post("<?=site_url_rel("show/game/".$game_id)?>", {content: $("input#content").html()}, function(xml) {

and this is part of my view:

<?=form_open('show/comment/' . $id, $data);?>
<br /><textarea name="content" id="content" maxlength="300" class="big_txt"><?=$this->obj->validation->content?></textarea>

i can’t put my finger on the problam, what do u think?
ps
i am looking for good example code of jQuery so i’ll learn the syntax,

cheers!

Profile
 
 
Posted: 17 February 2008 10:50 AM   [ Ignore ]   [ # 7 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  697
Joined  06-11-2007

What errors do you get? Post the controller code as this doesnt give us much to go on.

You cant pass $data inside the view, unless in your controller you defined $data[’data’] = $data; or gave it some other value which is… silly.

 Signature 

StyleDNA Ltd - CodeIgnitor Web Development, Hosting and Design.
Guru Profile - Hire me
_________________

Helpers: Asset Helper, BBCode Helper
Libraries: Template Lib
_________________

Theres no place like 127.0.0.1

Profile
 
 
Posted: 17 February 2008 11:02 AM   [ Ignore ]   [ # 8 ]  
Grad Student
Rank
Total Posts:  82
Joined  10-15-2007
thepyromaniac - 17 February 2008 10:50 AM

What errors do you get? Post the controller code as this doesnt give us much to go on.



You cant pass $data inside the view, unless in your controller you defined $data[’data’] = $data; or gave it some other value which is… silly.

the $data in my view is just an array named data with the form attributes.

and as for the controller code:

function comment($item_id)
{
    $comment
= $this->input->post('content', TRUE);
    
$data = array('cmnt_itemid'     => $item_id,
                  
'cmnt_item'     => 'game',
                  
'cmnt_content' => $comment,
                  
'cmnt_date'     => 'toda1y'
    
);
    
$this->db->insert('comments', $data);
}

and i don’t get any error, just in my DB the data that i get in the ‘content’ field is ‘null’

Profile
 
 
Posted: 17 February 2008 11:13 AM   [ Ignore ]   [ # 9 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  697
Joined  06-11-2007

Just play the debug game, echo it in the controller, print_r($_POST), keep going until you find where its showing as NULL then you have your answer.

The code you posted cant be all your controller, as you have the code <?=$this->obj->validation->content?> in your view, which would suggest you are validating this somewhere and I see no validation here.

 Signature 

StyleDNA Ltd - CodeIgnitor Web Development, Hosting and Design.
Guru Profile - Hire me
_________________

Helpers: Asset Helper, BBCode Helper
Libraries: Template Lib
_________________

Theres no place like 127.0.0.1

Profile
 
 
Posted: 17 February 2008 11:24 AM   [ Ignore ]   [ # 10 ]  
Grad Student
Rank
Total Posts:  82
Joined  10-15-2007
thepyromaniac - 17 February 2008 11:13 AM

Just play the debug game, echo it in the controller, print_r($_POST), keep going until you find where its showing as NULL then you have your answer.

The code you posted cant be all your controller, as you have the code <?=$this->obj->validation->content?> in your view, which would suggest you are validating this somewhere and I see no validation here.

i can’t echo anything in the controoler because it right away going to the view file from the ajax.

and u don’t see the validation call, cuz i am doing something like this:
i have my controller, which there i load my libraries and in there i have my own comments library.

in the comments library i have some functions that includes printing the comment form.

from my view i call to this printing function.

without the ajax it works perfect but when i pumped it up with ajax, it started to mess up a little bit… S:

any suggestions?

Profile
 
 
Posted: 17 February 2008 11:40 AM   [ Ignore ]   [ # 11 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  697
Joined  06-11-2007

Force your If check to make it think its not via isAjax. Test that post gets there alright, if it does get there then its something else.

If you can debug it yourself with clever quickswitches then try using Firebug as that will show you exactly what is coming back from Ajax requests, that way you can output anything and the AJAX responce will help you debug.

 Signature 

StyleDNA Ltd - CodeIgnitor Web Development, Hosting and Design.
Guru Profile - Hire me
_________________

Helpers: Asset Helper, BBCode Helper
Libraries: Template Lib
_________________

Theres no place like 127.0.0.1

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 719, on June 06, 2008 10:16 AM
Total Registered Members: 60658 Total Logged-in Users: 28
Total Topics: 73062 Total Anonymous Users: 0
Total Replies: 393968 Total Guests: 281
Total Posts: 467030    
Members ( View Memberlist )