This topic is locked

Add "Edit on the fly" capability to lookup controls

9/21/2016 11:10:07 AM
PHPRunner Tips and Tricks
F
FunkDaddy author

I wanted to create a master / child control in a form without using the default phpr inline child forms (to avoid the bulky inline list page displayed inside a form).
In this scenario, I simply wanted to allow a user record to store a unlimited number of emails associated with a particular user.
The idea is to allow a user to "add new" email using a lookup field on the form (which phpr already gives us the ability to do), but I also wanted to give the user the ability to edit and/or delete the newly added email on the fly (so basically a "edit on the fly" feature).
In this example I have 2 tables: 1st users_tbl and 2nd user_emails_tbl (master then child respectively).
I added a lookup field with following settings on the field:

  • field db column name: LinkUserEmailIDS
  • Display field: created a custom expression to concatenate the display value as follows: concat_ws('', Email, ' (', Label, ')')
  • Checkbox list
  • Allow multiple selection
  • Allow to add new values on the fly
  • This dropdown is dependent on... UserID -> LinkUserID (Master -> Child)
    In the users_tbl (master) edit form - JSOnLoad event:



// Abandoned this idea of allowing multiple emails per user in a separate table. Code below works and saving for poste

var user = Runner.getControl(pageid, 'UserID');
//change default text from "add new" to "add new email"

$('#addnew_value_LinkUserEmailIDS_' + pageid ).text('add new email');
//Create edit popup using Runner.displayPopup

$('#edit' + pageid + '_LinkUserEmailIDS_0').on('click', 'span.multi-email-buttons', function(e){
console.dir(e.target);

//Get current parent popup width

var parent_width = $('.modal-content.ui-resizable').width();
//Handle Edit

if(e.target.className == 'multi-emails-edit'){
var editID = $(e.target).closest('span').prevAll('input').val();//get value of the selected item
win = Runner.displayPopup( {

url: "users_emails_tbl_edit.php?editid1=" + editID,

//footer: '<a id="bunga" href="#" onclick="window.win.close();">Close window</a>',

width: parent_width,

header: '<h2 data-pageid="" data-brick="addheader">User Emails, Edit</h2>',

afterCreate: function(win) {

window.opener = win;

$('#popupIframe1').attr('scrolling','no');
}//end afterCreate

});//end Runner.displayPopup

};//end if(e.target.className == 'multi-emails-edit')
//Handle Delete

if(e.target.className == 'multi-emails-delete'){
$.confirm({

title: 'Delete Email',

content: 'Are you sure you want to delete this email?',

confirmButton: 'Yes',

cancelButton: 'Cancel',

confirm: function(){

//Get email id value

var editID = $(e.target).closest('span').prevAll('input').val();//get value of the selected item

var randomNum = Math.random();
var data = {

uid: user.getValue(),

rndVal: randomNum,

a: "delete",

selection: [editID]

};



// save data

$.ajax({

type: "POST",

url: "users_emails_tbl_list.php",

data: data,

success: function(response){

$(e.target.parentElement.parentElement).remove();

},

error: function(response){

alert('could not delete item - request failed. Try Again.');

}

});//end ajax

},

cancel: function(){

//$.alert('Canceled!')

}

});//end confirm
};//end if



});//end on 'click'
var multi_email_buttons = '<span class="multi-email-buttons"><a class="multi-emails-edit" href="#">edit</a><a class="multi-emails-delete" href="#">delete</a></span>';
//After adding new email ensure it gets edit & delete links

$('#edit' + pageid + '_LinkUserEmailIDS_0').on('DOMNodeInserted', 'b', function(e){

//Only insert link if one does not alread exist

if( $(e.target).prev('span').length == false ){

$(e.target).before( multi_email_buttons );

}

});
//On page load add edit & delete links to items already there

$('[name="value_LinkUserEmailIDS_' + pageid +'[]"]').each(function(index){

$(this).next('b').before( multi_email_buttons );

$(this).hide();

});


Also in master edit page form... in Before Display event:



//WE hide in order to allow LinkUserEmailIDS field to be dependent on userID

$pageObject->hideField("UserID");


Also in master edit page add custom css to hide checkboxes:


.multi-emails-edit, .multi-emails-delete{

margin-right: 5px;

}

[id^='value_LinkUserEmailIDS_'] {

display: none;

}

.rnr-checkbox-label {

width: 100%;

display: inline-block;

}


Now in the child edit page in "After Record Updated" event:



$pageObject->setProxyValue("dispValue", $values["Email"] . " (" . $values["Label"] . ")" );

$pageObject->setProxyValue("id", $keys["UserEmailID"] );
echo '<script>window.runner_popup_saved = 1;</script>'; //This gets passed to JSOnload event.. (or use another proxy var)


In child page edit "Before Display" evbent:



//No need to show this in popup... need to hide because its being displayed via iframe

$xt->assign('header', false);

$xt->assign('footer', false);

$xt->assign('editheader', false);


In child page edit "JSOnLoad" event:



if( window.runner_popup_saved == 1 && window.parent.opener) {

window.parent.$("[id^=value_LinkUserEmailIDS][value="+ proxy.id +"]").siblings("[id^=data_value_LinkUserEmailIDS]").text( proxy.dispValue );//update the values in the master form to reflect edited change

window.parent.opener.close(); //automatically close popup after saving it

}


In child page edit add custom css:



//Hide after rec saved success message.. simply not needed since we present this via runner displayPopup

div.alert-success{

display: none;

}


To handle deletions, notice we already have an ajax call in our first code snippet in this forum post... now we need to update the list page of our child to delete the correct row:



//We pass the uid via ajax call

Global $conn;

$sql = "SELECT * FROM users_tbl WHERE UserID = '" . mysqli_real_escape_string($conn, postvalue('uid')). "'";

$rs = db_query($sql, $conn);

$fetch = db_fetch_array($rs);


Important notes:

  • I am using default phpr bootstrap layouts and themes
  • I also added a jquery plugin to my entire project (by including it in the footer) to handle custom alerts & confirmation popups... this gets referenced in my first code snippet above by way of $.confirm
  • plugin: jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/)