Status: Solved
Priority: Medium
Security: Public
Views: 381
Last Modified: 2012-05-12

help with ajax

Hi
i have a view with a table of users. with each row there are three links to view details, update and delete. each open a jquery ui dialog and when it is pressed the user is deleted by ajax call and so on.

i have a link to add a user. which open a dialog too with a form.
after the form is filled and the add button pressed it is added to the database via ajax.

all works but 2 things:

1- if i get success call i prepend a row to the user table to display the added user. it works but the three links (view update delete) does not open a dialog when they are pressed. instead i am redirected to the corospondant page as if javascript is disabled. after i refresh the page that same record does open the dialogs.
what am i missing here?

2- i have client side validation and a server side validation. but i cannot display the server side validation .

i attach my ajax call and the php code for the server validation.

best regards

this is the ajax call:
     $.ajax({
          type: 'POST',
          url: 'addforajax',
          data: {
			  username: username,
			  password: password,
			  firstname: firstname,
			  lastname: lastname,
			  email: email,
			  phone: phone,
			  mobile: mobile,
			  short_desc: short_desc,
			  description: description,
			  imgpaths: paths,
			  role: role
			  },
         // contentType: "application/json; charset=utf-8",
          datatype: 'json',
          success:function(data){
            //console.log(data);
         var userdata = JSON.parse(data);
		 //console.log(userdata[0].first_name); 
          //setTimeout(function() { location.reload() }, 100);
		  if(userdata[0].confirmed = 1){
			  userdata[0].confirmed = "¿¿¿¿";
			  }else{
				userdata[0].confirmed = "¿¿ ¿¿¿¿";  
			  }
			  
		if(userdata[0].role = 1){
			userdata[0].role = "¿¿¿¿";
		}
		if(userdata[0].role = 2){
			userdata[0].role = "¿¿¿¿";
		}
		
		
		
          
       $('table.table > tbody').prepend("<tr  id='record- "+ userdata[0].id +" '><td class='a-center'>"+ userdata[0].id +"</td><td><a href='http://mymvc104/admin/users/details/"+ userdata[0].id +"'>"+ userdata[0].first_name + userdata[0].last_name +"</a></td><td>"+ userdata[0].email +"</td><td>"+ userdata[0].role +"</td><td>"+ userdata[0].confirmed +"</td><td>"+ userdata[0].registration_date +"</td><td class='action'><a href='http://mymvc104/admin/users/details/"+ userdata[0].id +"' rel='"+ userdata[0].id +"' id='userdetails'><img width='16' height='16' title='¿¿¿ ' src='/assets/img/icons/magnifier.png'></a> <a href='http://mymvc104/admin/users/update/"+ userdata[0].id +"' id='userupdate'><img width='16' height='16' title='¿¿¿¿' src='/assets/img/icons/edit_default.png'></a> <a href='http://mymvc104/admin/users/delete/"+ userdata[0].id +"' rel='"+ userdata[0].id +"' id='userdelete'><img width='16' height='16' title='¿¿¿ ' src='/assets/img/icons/delete.png'></a></td></tr>"); 
		  
          },
        complete: function() {

          $("div#adduserform").dialog("close");

        },
          error:function(xhr, status, error){
             console.log("problem");
          }
        });

the relevant php code:

                 if ((!$posterrors && !$postmissing) )
                  {
                       //insert the post data alone
                             
                             $insert = $db->Insert('users',$data);

                            $theid = $db->lastId;
         
           
                               $fields = array('id','first_name','last_name','email','registration_date','role','confirmed');
                              $userdetails = $db->selectMultiFieldsById($fields, 'users', 'id', $theid, 'last_name', 'DESC');
                              
                              echo json_encode($userdetails);
                            

 
                  }
                  elseif (isset($posterrors) && isset($postmissing))
                  {
                     
                       echo json_encode($postmissing);
                       echo json_encode($posterrors);
                  
                  }

Open in new window

derrida

Asked: 2011-09-08

Advertise Here

3 Solutions

LVL 40

Gurvinder Pal SinghCommented: 2011-09-08

where did you assigned the onclick event handler to the new links?

LVL 83

leakim971PluritechnicianCommented: 2011-09-08

it may be good to split your question...

you did not post the part open the dialogs (view, update, delete)

LVL 1

derridaAuthor Commented: 2011-09-08

hi

as i said i use jquery dialogs. this is the delete code:

//user delete
    $("a#userdelete").click(function (e) {
        e.preventDefault();
               
        var uid = $(this).attr('rel');
        //alert(uid);
        var parent = $(this).parent("td").parent("tr");
         //alert(parent);

        
        $("div#userdeleteConfirm").dialog({
            title : ' ¿¿¿ ¿¿¿¿¿?',
            autoOpen: false,
            width: '40%',
            height: 'auto',
            modal: true,
            draggable: false,
            buttons: {
                "¿¿¿¿" : function (){
                    $(this).dialog("close");	
                },
                "¿¿¿" : function (){
                  deleteuser(uid,parent);
                   $(this).dialog("close");
                }
            }
		
        });
        $("div#userdeleteConfirm").dialog('open');
		
        return false;
    });

Open in new window

LVL 40

Gurvinder Pal SinghCommented: 2011-09-08

I guess you have to bind the delete event again after creating the new button, or use live() event binder
http://api.jquery.com/live/

LVL 83

leakim971PluritechnicianCommented: 2011-09-08

Hi derrida,

Ok, thanks I just want to be sure to see the line 3 : e.preventDefault();

Try to use live and a class instead the same ID for all your element (because ID must be unique) :
$("a.userdelete").live
instead :
$("a#userdelete").click

LVL 82

hieloCommented: 2011-09-08

Using your ORIGINAL code (in your problem description), instead of:
$("a#userdelete").click(function (e) {

try:
$("a[href*='/delete']").live('click',function (e) {

Likewise for the other links:
$("a[href*='/update']").live('click',function (e) {
$("a[href*='/edit']").live('click',function (e) {

LVL 1

derridaAuthor Commented: 2011-09-08

really thank you i had no knowledge about live function.

do i need to publish the second question seperatly?

best regards

LVL 40

Gurvinder Pal SinghCommented: 2011-09-08

which one?

LVL 1

derridaAuthor Commented: 2011-09-08

2- i have client side validation and a server side validation. but i cannot display the server side validation .

LVL 40

Gurvinder Pal SinghCommented: 2011-09-08

Didn't get that.
<<but i cannot display the server side validation>>
what does it mean?

LVL 1

derridaAuthor Commented: 2011-09-08

if you`ll take a look at my php code.

i have my validation check and then i use if else: if all required fields are filled and they are acceptable the i insertit into the database but if some required fields are empty or if they are filled incorrectly i echo the missing fields and errors.

the thing is that in firebug (when i delibratly leave some fields empty and some errors) i do get the the right response but when i try to alert them it does not work.
the bizzare thing is that when there are no errors or missing required fields i can use the returned data.

so i am confused. i am not that great with ajax yet.
in the code i published in the original you can see that i use the returned data to generate the tr of the table.

LVL 82

hieloCommented: 2011-09-08

>>but i cannot display the server side validation .
It would best if you post that as a new question in the PHP code AND provide code + some description as what exactly is the problem. Simply saying " but i cannot display the server side validation ." is a "useful" as saying "My program doesn't work. Please help me". The more descriptive you are, the faster others will be able to help you.