I managed to get jquery datatables plugin to work with asp.net mvc 3 so it posts back json, and with a search function.
Problem now I that I need to move the search box and add a "language" filter outside it's "normal" position next to a custom made menu.
Is there a way that I can integrate:
Language: <select name="languageid">
<option value="SV">Swedish</option>
<option value="EN">English</option>
</select>
Keywords: <input type="text" name="keywords">
To refresh datatables when languageid or keywords change? and still have sorting, paging working?
My brain is only firing at half power today, but the short answer is that this can be done; it's just my suggestions that are kind of vague...sorry!
There are a whole set of language options in oLanguage; it was a bit "Too Long, Didn't Read" for me to sort through, but perhaps something there will help you identify where to set up a language switcher
You can remove the search box from the main table and set up your own, using the fnFilter method to trigger the search
Depending on how your other options are configured (server-side, for example), there are methods to trigger a refresh of the table. You would bind a listener for the languageid or keyword change action (.on('change', '#languageid', function(e) { /* ... */ })) which would fire the appropriate refresh action (in my instance which uses server-side, I use fnDraw())
I'm sorry about the directionless advice, but I wanted you to know at least that this is possible. Posting the question on the datatables.net forums directly might get you the best possible answer.
Related
I followed the instructions from this post on how to create dynamic items in APEX. The documentation is clear on how to create the item but I cannot figure out how to make the item look like native APEX items.
I have attempted copying different CSS classes that I can see attached to the native items, but for the life of me I cannot get my dynamically created form elements to look and act the same.
Any help would be greatly appreciated.
Hi – just to add to Dan’s and Salim’s comments and recommendations. I agree that for this particular use case, APEX_ITEM work well. However, as Dan pointed out, the APEX_ITEM API is considered legacy code. While we may never actually remove this API from APEX, as this would break too many apps, we do not plan on developing this API further. There are many reasons, but really comes down to the APEX_ITEM API using its own code to render page items, and all new components, including standard form items and Interactive Grid form items, share the same, more modern implementation, which is fully integrated with the Universal Theme and accessible. There are also significant differences in the way form items are submitted to the server and the way this data is processed. We’re working towards providing better alternatives to the APEX_ITEM in the future.
- Marc
If you are using Chrome Browser, then the easiest way to get all the styles is to use the browser Copy styles.
Right click on an item created natively and select Inspect.
Right click on the selected HTML element under Elements tab and go to Copy => Copy styles
This will get you the styles associated with the native item. Now assign those styles to your dynamically generated item.
You need to do this for every item type.
Best Regards,
Salim
This should help:
with
TP_ORDEM_SERV_REC as (
select C.ID_FUNCAO,
C.QT_EXEC
from TB_ORDEM_SERV_REC C
where C.ID_ORDEM_SERV = :P922_ID_ORDEM_SERV
and C.NUM_TAR = :P922_NUM_TAR)
select A.DESC_SUPLEMENT FUNCAO,
'<div class="t-Form-fieldContainer t-Form-fieldContainer--floatingLabel lto'||A.ID_SUPLEMENT||' apex-item-wrapper apex-item-wrapper--text-field" id="it_'||A.ID_SUPLEMENT||'_CONTAINER">'||
'<div class="t-Form-labelContainer">'||
'<label for="it_'||A.ID_SUPLEMENT||'" id="it_'||A.ID_SUPLEMENT||'_LABEL" class="t-Form-label">Quant. Exec.</label>'||
'</div>'||
'<div class="t-Form-inputContainer">'||
'<div class="t-Form-itemWrapper">'||
'<input type="hidden" name="f01" value="'||A.ID_SUPLEMENT||'" />'||
'<input type="text" name="f02" id="it_'||A.ID_SUPLEMENT||'" class="text_field apex-item-text" value="'||A.QT_EXEC||'" size="1" maxlength="2">'||
'</div>'||
'<span id="it_'||A.ID_SUPLEMENT||'_error_placeholder" class="a-Form-error" data-template-id="'||A.ID_SUPLEMENT||'_ET"></span>'||
'</div>'||
'</div>' QT_EXEC
from TB_SUPLEMENT A,
TB_USUARIO B,
TP_ORDEM_SERV_REC C
where A.FLAG_CTRL = 15
and B.ID_OFICINA = :P922_ID_OFICINA
and A.ID_SUPLEMENT = B.ID_FUNCAO
and B.ID_FUNCAO = C.ID_FUNCAO (+)
group by A.DESC_SUPLEMENT,A.ID_SUPLEMENT,C.QT_EXEC
Then, just use apex_application.g_f to manipulate the result in the process as normal.
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I'm having problems visualizing the solution that I need here. I have a select menu on the site that I'm working on and the client would like to be able to select an option called "Create New Origin", which would then have a JS window pop up with a blank field for the user to type in that new origin.
Upon submitting this form the database would be updated and the select menu would now feature this item without an entire refresh of the page.
The database side of things is all set up and ready to go, as is 99% of the Coldfusion.
Here's a snippet of the form field in question:
<p class="_30NP" align="right">
<label>Origin </label>
</p>
<p class="_20NP">
<cfselect
name="Origin"
id="Origin"
query="Origin"
display="description"
value="code"
required="yes">
<option value="new">New Origin</option>
</cfselect>
</p>
Here's the CFQUERY:
<CFQUERY DBTYPE="Query" NAME="Origin">
SELECT Code, [Description]
FROM ZCODES WHERE CODE = 0
UNION ALL
SELECT Code, [Description]
FROM ZCODES
WHERE FieldName = 'Origin'
ORDER BY 1
</CFQUERY>
This is a very simple question with probably a very simple answer, I just have little exposure to AJAX.
How do I submit a form (pop up window) and refresh the select list without completely refreshing the page?
I would use a javascript library like jQuery to handle your ajax.
Once the button is clicked use $.get(), $.post(), or $.ajax() to communicate with the server. Each will provide a response. The response type is up to you. You could return JSON and parse it out, or you could return straight HTML. I might simply return html to be quick and easy.
<cfoutput query = "...">
<option value = "...">...</option>
</cfoutput>
Once you have the result, use $.html() to update the select's options.
Michael, I personally dislike a completely jQuery ajax solution. I really like CFAJAXPROXY. I hear it has downsides, but I haven't found any.
Your question is very similar to another question on a stackexchange.com site. I think you can find some good info here.
https://softwareengineering.stackexchange.com/questions/133759/where-can-i-find-a-simple-jquery-ajax-coldfusion-tutorial
I want to show my users data from my mysql database without reloading the page.
I am using Codeigniter. I have a dropdown menu like the following, - when the page loads I want it to show all data by default. But when any user selects any name it will query to database and show results immediately without having the page reloaded.
I already have a controller, model and view to display all data from database but I don't know how to get the dropdown menu work after a person has selected a value, to fetch data from database and show immediately without reloading the page.
I have some basic knowledge of PHP but I have no idea about AJAX. Would you please kindly give me an example or idea on how to do this?
I am not expecting you to write the code for me, I am just asking for an example or a guideline. :)
Thanks in Advance.
<form>
<select name="info">
<option value="">Select a person:</option>
<option value="11080101">John</option>
<option value="11080102">Bon Jovi</option>
</select>
</form>
It sounds like with what you are aiming to achieve this isn't really a codeigniter related question but more a HTML, JQUERY question.
Using jQuery To Manipulate and Filter Data over at Net-tuts shows a jquery solution to sorting and filtering data. Their solution is based on a table but the principals are there so a modification can get it to do what you want it to do.
well i can give you the flow of how can you try it
trigger a jquery event on selecting an dropdown menu item. if you don't have any idea how to do it try reading the documentation of jquery for using selectors .
once you have the selected element , extract its value and send an ajax call to your path
like this (for jquery ajax visit jqapi it has all the documentation for jquery ajax functions and its derivatives)
$.post('/user/data/' + id , function(response) {
console.log(response)
})
or
$.post('/user/data/', 'id=' + id , function(response) {
console.log(response)
})
and now you have your data in reponse so you can do whatever you wish to do with it
I'm making a web app to manage product SKUS. One part of that is to associate SKUs with product names. On each row of a table, I list a SKU and display a <select> box with product names. The product that's currently associated with that SKU in the database is given an attribute like selected="selected". This can be changed and updated via AJAX.
There are a lot of product <option>s - 103 to be exact - and this list is repeated in the <select> on each row.
From another input on the page, I am using jQuery AJAX requests to add new SKU/product associations, and to make it clear that they're added instantly, I insert them into the top of the table with a little highlight effect. As the number of SKUs increases past 10 or so, if I refresh the page (which loads everything back out of the database ordered by product name), Firefox starts to show some wrong options as selected by default. It is not consistent about which incorrect option it shows, but it seems to be mixing up the options that existed before the page reload.
If I inspect the <select> using Firebug, the select="selected" is on the correct <option> tag. Refreshing the page (or leaving and typing this page's URL back in to return) does not make it show up correctly, but hard refreshing (Ctrl+F5) does.
Both Chrome and IE7 display this correctly in the first place.
My theory is that this is a result of a faulty cache strategy by Firefox. Does that sound right? Is there any way I can say in my code "if this page is refreshed, make it a hard refresh - reload everything from scratch?"
Update
To solve this problem, I changed strategies.
Previously, I put a <select> with a long list of <option>s on each table row, with the current value set as default
Now, I put the current value in a <span>. If the user clicks a "change" button, I replace the <span> with a <select>, and the "change" button becomes a "confirm" button. If they change options and click confirm, AJAX updates the database, the and the <select> goes back to being a <span>, this time with the new value.
This has two benefits:
It fixes the bug described above
It requires far fewer DOM elements on the page (all those redundant <option>s)
I had a similar problem, but after adding autocomplete="off" HTML attribute to every select tag it worked. [I was using Firefox 8]
Firefox preserves your selected form elements when you refresh. It's intentional. Ctrl+F5 is a "hard" refresh, which disables this behavior.
--
Or Command+Shift+R if you are on a Mac
An easy way to prevent Firefox from caching the last selected option is to remove all of the option elements on page unload. For example (assuming jQuery):
$(window).unload(function() {
$('select option').remove();
});
I had this same issue. I was trying to change the value of the select depending on which option had selected="selected", but Firefox wasn't working. It would always default to the first option.
Chrome, Safari, etc worked when I did this:
$( 'option[value="myVal"]' ).attr( 'selected', 'selected' );
... but this wasn't working in FF.
So I tried:
$( 'option[value="myVal"]' ).prop( 'selected', 'selected' );
and it works.
jQuery v1.9.1
Although this is old question, but below solution can help someone
In firefox, I've notice that the "selected" attribute will not work unless you place the select inside a form, where the form has a name attribute.
<form name="test_form" method="POST">
<select name="city">
<option value="1">Test</option>
<option selected="selected" value="2">Test2</option>
</selecct>
Again remember :
form must have the "name" attribute and
"select" must be inside the form.
I make it worked by putting the autocomplete="off" on the hidden input.
Firebug has a cache disable function for exactly this scenario.
The deeper long-term solution is to work out how set no-cache headers server side. What web server are you using?
Every time I ever had weird select option bugs in Firefox it was because I had multiple options marked as selected. Are you quite sure that only one is marked as such? Seems like you could get out of wack pretty easily if you are changing that with AJAX.
FYI: in order to stop Firefox from restoring the previously selected option after page reload you can place the entire <form> containing the <select> options inside an <iframe>.
When select boxes are in <iframe> and you reload the container page, Firefox finally behaves like ALL other browsers, by simply resetting select options.
Thanks to #BananaDeveloper (https://stackoverflow.com/a/8258154/2182349) - this is my solution to solve this problem on a single page in an application
I didn't want to customize the off-the-shelf/open source application code
<Files "page_that_does_not_work.php">
SetOutputFilter INFLATE;SUBSTITUTE;DEFLATE
Substitute 's/<select/<select autocomplete="off"/n'
Substitute 's/<form/<form novalidate/n'
</Files>
Apache docs for mod_substitute https://httpd.apache.org/docs/2.4/mod/mod_substitute.html
Thanks to: https://serverfault.com/questions/843905/apache-mod-substitute-works-in-curl-but-not-on-browser for the SetOutputFilter
Replacing jQuery
.attr('selected', true)
with
.prop('selected', true)
for <option> tag fixes it for me. All other solutions didn't work
I've figured out. If you put onunload or $(window).unload (jquery) on your HTML with no-cache header, Firefox reloads the page and initialize DOM even from back button.