Hi Jarry,

Thank You!! That did the trick. I played with the $(ed.target) reference in the debugger, and found that very helpful. I was able to set defaults for the fields I needed in the onAdd event.

Thanks Again

Hello,

I'm using an Editable Datagrid to perform some basic CRUD functions. I would like to set default values when a new row is added to the datagrid.

I read through the documentation and saw that the onAdd event seemed like the perfect place to do this.

Created the following method:

onAdd: function(index,row){
                  row.Key = 'U';             
                  row.Status = 'N';
                }
Key and Status are two columns in my datagrid.

When I run my code, nothing happens. When I step through with the browser JS debugger, it looks like row is not used the same way as other examples that have a seen. I haven't found an example of using onAdd to set default values when a row is added in an edatagrid. I'm beginning to wonder if I'm approaching this the wrong way.

Any Thoughts?

Thanks

[l-btn-empty]

After playing around with the code for a bit, I've found a work-a-round. Well, it's more like a hack-a-round. I'm pretty sure there is better way to do this, but this is what I got:

Code:

if (data.status = "Success") {
                 $.messager.defaults.closable = false;
               	 $.messager.defaults.cancel = '';
                 $.messager.confirm ('Success','Process was Successful',
                       function(r){
			    $('#tt').datagrid('clearChecked');   // Reset datagrid embedded in form
                            $('#tt').datagrid('clearSelections'); // Reset datagrid embedded in form
                            $('#dlg').dialog('close');                // Close dialog contained 
                            $('#CalInput').submit();             // Submit the form to refresh data	
			    
		       }
                 );
                 $('.l-btn-empty').parent().parent().css('display', 'none');
        } else {
        	 .... More Code ....
        }  

        

After digging around at several old posts on simular issues, I came up with this hack.

Here is what I did:
1. I changed the type of messager from alert to confirm, this allowed me to trigger the function after a button was pressed. For whatever reason the function didn't seem to fire correctly with alert. Oh, and I had to give up the icons too by using confirm... a small price to pay.

2. I disabled the window close option to prevent the dialog from being close by the [X].

3. I set the text of Cancel to an empty string. While tracing through the code, I noticed that when changing the button string to empty, a unique class was used on the text object: l-btn-empty

4. Knowing the blank Cancel button's class, I was able to find the parent object of the button and change the style to hidden. $('.l-btn-empty').parent().parent().css('display', 'none');

I realizes this hack-a-round will probably break with a future version of something, but for now it does the trick. Hopefully in the future someone finds a more elegant way to address this problem. There is probably a way to change the button text to something unique and search on that text instead.

Oh well, I hope someone else finds this useful and improves upon it.

Regards,
Mark

stworthy,

Thank you for your reply. What would you recommend using to send alerts to users in this situation? Are there other alerting mechanism in EasyUI that are synchronous? Should I use native JQuery instead?

Thanks,
Mark

Hello,

I've come across some unexpected behavior when using messager.alert to report back status of a submit. Here is the code snip-it:

Code:

$('#fm').form({
    url: 'thisform.php',

    success:function(data){
        if (data.status = "Success") {
                 $.messager.alert ('Success','Process was Successful','info');
                 alert('Process was Successful');
        } else {
        	 $.messager.alert ('Error',data.errorMsg,'error');
        	 alert('Error: '+data.errorMsg);
        }  

        $('#tt').datagrid('clearChecked');   // Reset datagrid embedded in form
        $('#tt').datagrid('clearSelections'); // Reset datagrid embedded in form
        $('#dlg').dialog('close');                // Close dialog contained 
        $('#CalInput').submit();             // Submit the form to refresh data
        
						
    }
});

When this code runs, the message.alert only shows for a second then disappears. I changed the timeout to 0, that had no effect. When I run this through a debugger, the line $.messager.alert ('Success','Process was Successful','info'); gets executed, but the code continues on and doesn't wait for a user response. I also tried adding an empty function to the messager.alert, but that had no effect either.

Other areas that I'm using $.messager.alert it works as expected. What am I missing? Is it because I'm calling $.messager.alert inside the success function? If so, how do I get around this? The regular alerts work fine.


Thanks,
Mark

Hello,

I've been continuing to experiment with various EasyUI code examples and HTTP headers with no luck. My ultimate goal is to remediate CSRF's (Cross-Site Request Forgery) issues with EasyUI forms, however, I can't seem to find a way to implement HTTP Request Header modification via EasyUI that consistently works.

I'm beginning to wonder if HTTP Request Header modification is a capability that is beyond what EasyUI can current do. I can get a HTTP Request Header injected on a datagrid load to work, but another other functions like add, update, and delete do not inject a HTTP Request Header. From a security standpoint, the HTTP Request Header for the datagrid load doesn't really buy me anything because no data is being changed. It's more important to have this functionality for adds, updates, and deletes.

Based on the number of reads this thread has had, this seems to be a topic of interest so I'm hoping that someone can at least validate if HTTP Request Header injection is possible via EasyUI, or confirm this can't be done in EasyUI.

Thanks,
Mark

Hello jarry,

Thank you for your reply. I've been playing with your code example for the past week and have only had limited success in getting it to work the way I was hoping.

I pasted the code example at the root of the document, in between <script> tags, with all the other easyui javascript. The UI layout I have is patterned after a basic CRUD Application with edit form in expanded row details. Here is a link to the example (http://www.jeasyui.com/tutorial/app/crud3.php) Your code example works when the datagrid is initially loaded, however when I submit a change to the data, the headers are not included.
Since the submits were going through a form, I made a copy of your example coded and retrofitted it to a form. Here is the resulting code:

Code:

$.extend($.fn.form.defaults, {
	loader: function(param, success, error){
		var opts = $(this).form('options');
		if (!opts.url) return false;
		$.ajax({
			type: opts.method,
			url: opts.url,
			data: param,
			dataType: 'json',
			headers:{
				'X_AWESOMENESS': 'Everything is Awesome!'
			},
			success: function(data){
				success(data);
			},
			error: function(){
				error.apply(this, arguments);
			}
		});
  }
})

Unfortunately, this had no effect either.

I decided to take a step back and pull two examples off the EasyUI website and start from there. I wanted to eliminate the possibility that my code was doing something to interfere with the header insertion.

I took:

• CRUD Application with edit form in expanded row details (http://www.jeasyui.com/tutorial/app/crud3.php)
• CRUD Application with jQuery EasyUI (http://www.jeasyui.com/tutorial/app/crud.php)

I was able to get both examples up and running, however when I added the header code block, I got the same results. The datagrid example would only insert the header on the datagrid load, no other functions. The form example didn't work at all.

I also tried playing around with the following code block as well:

Code:

$.ajaxSetup({
   beforeSend: function(xhr) {
        xhr.setRequestHeader('x-secure-form-key', 'Some Value');
        xhr.setRequestHeader('x-awesomeness', 'Heck Yea!');
    }    
});	

No luck with this either.

One difference I noticed when examining the network traffic and the raw request header data was that on the times the header was successfully inserted the request header Accept value was set to

application/json, text/javascript, */*; q=0.01

Times the header insertion didn't work, the Accept value was

text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

I don't know if this has anything to do with the headers not being inserted.

The EasyUI examples are mixing GETs and POSTs, my code is only doing POSTs, no or limited GETs.

Do you have any ideas? Has anyone been able to insert custom request headers on datagrids and forms?

Regards,
Mark

Hello,

I'm developing a proof of concept site that needs to protect against CSRF's (Cross-Site Request Forgery). Protecting against CSRFs seems to be a popular item these days. Part of my approach in doing this is to add a custom HTTP header for AJAX calls.

I've searched the forums and can't seem to find a solid way of accomplishing the creation of a custom HTTP Header via EasyUI.

I originally found a post from 2012 that said you can't do this. However, I think this information is outdated since newer versions of EasyUI. (http://www.jeasyui.com/forum/index.php?topic=795.0)

I did find a post from 2014 (http://www.jeasyui.com/forum/index.php?topic=4272.0) asking about the beforeSend method, however it was unclear how to implement something like this in EasyUI:

Code:

beforeSend: function(xhr){
        xhr.setRequestHeader('X_CSRF', 'Some Token');
}

I found another post from 2015 (http://www.jeasyui.com/forum/index.php?topic=5238.0) discussing where to put custom AJAX functions.

I've tried all of the suggested approaches, but none of them seem to work with setting a custom HTTP Header via EasyUI.

According to the AJAX documentation I should be able to do something like:

Code:

headers : {
          'X_CSRF' : 'Some Token'
}

I can get this to work with raw AJAX requests, but not via EasyUI.

Ideally I would like to set the HTTP Header on every request.

Has anyone been able to set an HTTP Request Header via EasyUI? If so, do you have any examples?

Regards,
Mark