MVC 3 Page navigation and passing parameters with javascript - javascript

i have my main page and also two partial views. One partial view is a menu and the other is a telerik grid.
What i want to achieve is selecting a row in the grid and when i click a button in the menu i want the page to navigate to that action passing the selected row (id).
i want to refresh the entire page and not only the div with the grid.
I tried using document.location = "/Pedido/DetalhePedido/" + id; but i don't receive the id n the controller.
I also tried using $.get('#Url.Action("detalhePedido", "Pedido")', data, function (result) { }); usually i use this to refresh a div and i can't seem to make this work with the entire page (and it probably shouldn't ).
Wich methods do you usually use in your web apps to reproduce this sort of behaviour?

Because clicking on the row happens on the browser, you can't depend on anything from the controller or model unless it's already somewhere in your original model. I implement this by adding a hidden Id column to the grid and model it uses for rendering, then add client events and handlers to the grid and view. Check out the samples provided for the Grid under Client-Side Events for some of the different client events you can take advantage of.
On your grid, first add the Id column (hidden if you like):
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden(true);
}
Then add ClientEvents and wire up onRowSelect like so:
.ClientEvents(events =>
{
events.OnRowSelect("onRowSelected");
}
Then add a function to handle this event like so:
function onRowSelected(e) {
var id = e.row.cells[0].innerHTML;
window.location = "Something/Details/" + id;
}
UPDATE
Sounds like you are doing everything right on the client. The problem is likely elsewhere, in your Action or Bindings. But to be certain, take a look at what /Pedido/DetalhePedido/" + id actually is with an alert before venturing down that path. You should be able to take that and enter it directly into the url of your browser and hit your action as long as your action is correctly defined, accepting an int called id.
If its still a problem, you need to look at you action. Is it marked for Post? If it is Window.Location wont work because it's not a post. Is the argument it accepts named Id and of type int? If not, should it be? Have you changed your Routes, and if so does your Url match any routes defined?

Related

How can I dynamically control a Region Display Selector in Oracle APEX?

I'm hoping to select a particular Region to highlight on the page load based on the link the user follows to get to that page. This is a drill-down report with multiple options, so the goal is to have all options available but focus on the one the user selected to reduce the number of times a user has to navigate to/from the base report to the drill-downs.
Currently, I'm trying to implement this solution https://svenweller.wordpress.com.../, further explained in an Oracle Community discussion here: https://community.oracle.com/..., but it is not working for me.
What I have now is similar to what is shown in those examples, and for now I'm just trying to link to a static Region Display Selector (RDS) tab (the goal will be to have the selected Region be dynamic based on which link is clicked in the feeder page, but I'm clearly not there yet).
I have a Dynamic Action set to fire on Page Load event, and a True action that executes JavaScript code and uses the JavaScript in the example (both with and without the Timeout function suggested in the Oracle thread). I have set Static IDs for the RDS and Region, but when I load the page the RDS still defaults to Show All (or the first region if Show All is off).
Can someone help me understand what I'm doing wrong?
Thanks.
let sesStorage = apex.storage.getScopedSessionStorage({
useAppId:true,
usePageId:true});
setTimeout(sesStorage.setItem( "tabs.activeTab", "#R3" ) { apex.region("tabs").widget().aTabs("getTabs")["#R3"].makeActive();}, 300);
\\version without setTimeout
let sesStorage = apex.storage.getScopedSessionStorage({
useAppId:true,
usePageId:true});
sesStorage.setItem( "tabs.activeTab", "#R3" );
I have done something like this in the past. Create a hidden variable on the page P1_TEST, make sure to set the value not to be protected.
You will need to set the value of that variable when the link is clicked.
Then you need to add static IDs TAB1, TAB2 etc. to the tabs of you region display selector.
Then add a DA on Page Load:
if (apex.item("P1_TEST").getValue() === "Value1"){
$(".apex-rds [href='#TAB1']").trigger('click');
} else if (apex.item("P1_TEST").getValue() === "Value2"){
$(".apex-rds [href='#TAB2']").trigger('click');
}

Oracle apex: adding filters programmatically with dynamic action adds duplicate filters

I have several dynamic actions that are fired with change event on page load. It seems like all of them are fired at same time. When that happens it adds filter to the interactive grid. Now, the problem is some of the filters are duplicated. How can I solve this problem?
I mean when page loads, it changes bunch of things in the form (like checkboxes and values of textfield), that fires the dynamic action, which then calls addFilter function like this
function newFilter(){
var vals = apex.item('P12_VALUE').getValue();
if(!(vals.includes('DI'))){
deleteExistingFilters('emp', 'IS_ON');
}
if(vals.includes('DI')){
if(!filterAlreadyExist('emp', 'IS_ON')){
addFilter('emp', 'IS_ON','Y','EQ');
}
}
}
Create only one dynamic action that fires on page load, but let it execute several ("true"?) actions, i.e. every action would be one or none of those "several" dynamic actions you have now. "None" means that you'd exclude it if it is already set.

jQuery visibile list element only if current user is model user

Hey i am trying to set a visibility of some part of list to be shown only if the currently log in user is the user from model. I try to do it by jquery. The code i have:
$(function() {
$(('li.loggedelement').hide());
if (#Model.openID !== #User.Identity.Name) {} else {
$(('li.loggedelement').show());
}
});
I want the function to determine at loading the view if the user is checking his own profile (so if #Model.openID == User.Identity.Name then its true) and then i want to show some extra options. Maybe i should give that class default visibility to hidden and then change it with a function.
EDIT
Thanks for help, im going to change the logic in Controller so that would be safer for users.
This seems like a very bad option. If you want certain data only to be shown when a user is on his own profile, you should only render the html when that is the case.
You realize that any user that goes to any profile could just inspect the page, and manually set the visibility so that he can see the data.
If you want the data not to be shown, use the server to not generate that specific part of the page rather than hiding it with client-side code. It's not safe.
This might help you.
$(function() {
if (#Model.openID != #User.Identity.Name) {
$('li.loggedelement').hide();
}
else {
$('li.loggedelement').show();
}
});

Text is not being rendered after new pages loaded - JQuery Mobile

I have a program that given an SQL statement (browser database using HTML5-SQL), it populates a set of field in my jquery mobile page. The SQL statement is changed based on an ID passed through the url. So when a button/link is clicked, the same page is called with a different parameter value: index.html?id=545.
Although the first page load seamless, when I click the link to the next page, the objects (page, buttons, link, div) show, but the text inside these objects doesn't show up.
I am using the $('div').live('pageshow',function(event, ui){ event in order to trigger the events of doing the following:
$("#title").text(Title);
$("#date").text(mdate);
When I print the value of Title and mdate in the console of Chrome debugger, it shows the right value. I don't know why the same text doesn't show in the buttons and labels.
Can anybody help me with this.
Thanks
When using jQM you need to refresh the controls. Here are the docs:
http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html
Refreshing form elements In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom
controls (selects, sliders) built from, and kept in sync with, the
native control. To programmatically update a form control with
JavaScript, first manipulate the native control, then use the refresh
method to tell the enhanced control to update itself to match the new
state. Here are some examples of how to update common form controls,
then call the refresh method:
Checkboxes:
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type='range']").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");
if it's the page you need, try this:
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
Enhancing new markup The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long
as a widget plugin script is referenced, it will automatically enhance
any instances of the widgets it finds on the page.
However, if you generate new markup client-side or load in content via
Ajax and inject it into a page, you can trigger the create event to
handle the auto-initialization for all the plugins contained within
the new markup. This can be triggered on any element (even the page
div itself), saving you the task of manually initializing each plugin
(listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded
in through Ajax, trigger the create event to automatically transform
all the widgets it contains (inputs and buttons in this case) into the
enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

editable datagrid with ability to clone individual rows

Im looking for a way to render an html table as an editable datgrid, with the ability to clone individual rows. I dont need to save any of the changes made, just superficially edit the cells because i then use a jquery plugin to scrape the table as is on screen and save it.
Ive tried jeditable, but its designed for posting the output of its edits to a page, not just superficially making the changes.
Ideally, i could control what types of inputs are displayed onclick based on what column they are on. The table cells are unnamed. If they need to be named, there are a total of 34 columns, so i would need to know how to name those individually.
Thanks in advance.
Jeditable's target can be a function (see the "Submitting to function instead of URL" section of the jeditable homepage) - you could pass an empty handler and use it.
[Edit]
The handler should return a string (that will be displayed on the page)
(taken from the example page)
$('#test').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : 'OK',
});
It work nicely, I just tried it out.
[/Edit]

Categories