Hello i want to ask about load method for easyui treegridI read easyui treegrid documentation from this URL http://jeasyui.com/documentation/treegrid.phpI didn't found treegrid load method, but since i know treegrid dependencies from datagrid, so i go to this URL http://jeasyui.com/documentation/datagrid.phpIn easyui datagrid, load method code format, look like this$('#dg').datagrid('load',{code: '01',name: 'name01'});Let me explain a little about code above, the code above load datagrid with some condition, code='01' and name='name01', from datagrid URL. Code and name treated as HTTP_POST_VAR in datagrid URL php file, further use for SQL condition valueBut, when I try to implement datagrid load method in my treegrid, look like this below code$('#dg').treegrid('load',{code: '01',name: 'name01'});It can't send HTTP_POST_VARIs it true, that easyui treegrid don't have load method like datagrid? Is there any other solution to load easyui treegrid with some condition?
You can dynamically load the treegrid data using 'loadData' like below,
$.ajax({
type: "POST",
async : false,
url:'someURL.action?code=01&name=name01',
success: function(obj) {
$('#treegridId').treegrid('loadData', obj);
}
});
or simply by
$('#treegridId').treegrid({
url:'someURL.action?code=01&name=name01'});
Related
I am using ASP.Net MVC and JQuery UI autocomplete.
I have a number of input-boxes set up in a table and I have this JavaScript code.
$('.searchfield').autocomplete({
source: '#Url.Action("AutoCompleteFunction")'
});
Which works perfectly. The controller reads from a database and returns a list of matches.
Now I have another column of fields that also need autocomplete. However, these autocomplete lists have to be dependent on what is already in the table.
How can I pass DOM elements to the autocomplete controller?
I have tried something like this. As long as I only pass a string it will work, but not when I try to pass it a DOM element.
$('.newsearch').autocomplete({
source: '#Url.Action("NewAutoCompleteFunction", new { firstParameter = "testing"})'.replace("testing", "'$document.activeElement.value'")
});
if renderpartial in MVC is not like Update panel in ASP.net. than how does it works, and what about the efficiency. I heard that update panel was so inefficient in use. But how does MVC handles postbacks, I need to undestand this before I can dive into MVC
Any suggestions
thank you
ASP.MVC Partial views are just reusable HTML fragments that can be populated by View Models. They don't have any special built in functionality like update panels do.
In general terms, with ASP.MVC you control post backs. In fact, you have to code it all yourself in HTML and JavaScript.
I suggest you start here.
Assuming that you want to update part of your page, the method I use is as follows:
Link a JavaScript function to the event you want to use to update the 'panel'
Make a jQuery AJAX call to an action in your controller
from the controller return a call to the partial view
this will cause the resulting HTML from the partial view to be returned as HTML to your AJAX call
use jQuery to add the HTML to an existing empty div
The AJAX call looks something like
$.ajax({
url: yourControllerAction URL,
data: { CodeTypeID: codeTypeID }, // optional data
type: "POST",
success: function (returnedHtml) {
$("#myDiv").html(htmreturnedHtmll);
}
});
The rest is standard MVC
Hope that helps
i am working on a project and using Struts2 for it with JSP. In one JSP page, i have two drop down list say dd1 and dd2. The dd2 is dependable on dd1. The values in dd2 should be populated based on the dd1 value. Now i have a java class which gives me all the options for the drop down lists from the database and i am displying them in my JSP using the SELECT tag. How to make the dd2 dependable on dd1? I dont have any knowledge of Ajax. Please help.
Not a very big fan of any Ajax plugin.If you do not want to use any big fancy Ajax tags and are ready to learn a bit of JQuery or any other java-script framework, i suggest you to use simple ajax call.
Play around with the events when the value in your parent drop-down change call a function and make an Ajax call to your action which can return the values in JSON format (use struts2 JSON plugin), parse the JSON data and fill the other drop-down.
benefits of this approach are
More flexible.
Much light and faster.
No need to add any UN-necessary dependencies. Other approach (IMO not the good one) use Struts2-Jquery plugin to get it done but get ready for any undesirable behavior or any other issue and you have to reply on the Plugin community.
Here is an example as suggested
<s:select list="states" label="State" name="state" onchange="ajaxCallForDistrict();"
id="stateList"></s:select>
<s:select list="districts" label="District" name="district" id="district" />
what i am doing here is that District are dependent upon state so once user select a State from first select i am calling a java-script function on onchange event and here is my ajaxCallForDistrict() function
function ajaxCallForDistrict()
{
var selectedState = document.getElementById("stateList");
var statedata = selectedState.options[selectedState.selectedIndex].value;
var formInput='state='+statedata;
$.getJSON('search/getDistricts',formInput,function(data) {
$('.result').html('' + data.districts + '');
$.each(data.districts,function(index, value){
var districtid = document.getElementById("district");
var option=new Option(value,value);
try{
districtid.add(option);
}
catch(e){
districtid.appendChild(option);
}
});
});
}
what i am doing in above function is that i am fetching the value of selected state and giving the Ajax call to getDistricts Action which is simply creating a list of district for the provided state and returning back the result as JSON data.
for filling the District select i am looping through the result (JSON) and appending the element in the select box
JSP are servlets inside so there no way how to make interaction after response is send to client
i would recommend struts2-jquery-plugin - you will be able to solve this problem using ajax and this framework is good place to start if you are not interested in learning javascript (jQuery), showcase
I am not sure but may be this can help you...
jsp page
<s:select name= "" lable = "" onchange="javaScriptFunction(element that you have selected);"></s:select>
JavaScript---
<script>
function javaScriptFunction(element)
{
document.LoginForm.action=element+".action";
document.LoginForm.submit();
}
</script>
Now map these action in struts.xml
My suggestion is use one action but several different methods.
After that populate the other dropdown Box by using s:iterator.
I new to ASP.NET MVC so this question maybe simple for you but please give me more detail :)
In my app there is a Menu, all of this Menu Item store in Database, the Menu showing every pages. I think what I need is Partial but I not sure how!
BTW I can always use ajax, so which way is better?
Thanks for yout time!
You may not need this to be a partial view, you can generate it in run time using regular .net code if you have a proper helper function. Anyways, for your question you can do these in a couple of ways.
Create a partial view and load it using the partial tag
#Html.Partial("_LogOnPartial")
or you can write a Html helper function
public static string GetMenus(this HtmlHelper html)
{
//Generate your menu in HTML format
}
and render it using the html renderer
#Html.Raw(Html.GetMenus())
For ajax, you can also write some function which does the same work of GetMenu and call it using an Ajax get.
$.ajax({
url: '/Controller/YourGetMenu',
type: 'GET',
dataType: 'json',
cache: false,
async: false,
data: { ParameterName: itemvalue },
success: function (data) {
//Do the menu rendering work
},
error: function (ex) {
alert('Error.');
}
});
I would go for the second option.
http://jqueryui.com/demos/accordion/#event-changestart
I'm trying to have an JQuery ajax request get some data and populate the body of a div inside each of my JQueryUI accordion rows when the row is expanded. My intention is to have a hidden field, or some such, within the clickable h3's of the accordion and when the changestart event fires the ajax will go off and get a unique page for that accordion row and fill it with useful html.
My problem is that I can't seem to find any information about the properties or values attached to the objects returned in the changestart event function parameters. Does anyone know how to do this or get those values?
The code I have right now is this:
$("#accordion").accordion({
collapsible: true,
active: false,
changestart: function(event, ui) {
alert('hello:' + event.target.id + ':' + ui.id);
}
});
Which throws up an alert displaying the message hello:accordion:undefined
I've seen this post which seems to be along the lines of what I'm trying to figure out...
jQuery UI object type for "ui" object passed to the callback function?
Thanks,
Matt.
Looks like ui holds this:
$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
ui.newHeader // jQuery object, activated header
ui.oldHeader // jQuery object, previous header
ui.newContent // jQuery object, activated content
ui.oldContent // jQuery object, previous content
});
You can access the contents of those ui.new|old elements easily.
They are jQuery elements, that is why they look a bit odd.
jQuery way
ui.newHeader.first().html()
And if you need access to the dom element use .get()
ui.newHeader.get().first()