I am looking for JavaScript to hide a webpart based on a field value in a display form.
Scenario: I have added 2 webparts to display form from different lists and I need to hide webpart 2 based on webpart 1's value.
Example: Webpart 1 has status = "Approved" and need to hide the webpart 2 if not equal to "Approved".
There are a couple ways you can go about this, and it really depends on exactly what you are doing. You haven't given us a ton of information to go with.
The JavaScript itself to do what you are looking for is pretty simple. You could do it with something like this:
$(document).ready(function () {
$("#theButton").click(function () {
var txtInput = $("#txtInput").val();
if (txtInput == "Approved") {
$("#two").show();
} else {
$("#two").hide();
}
});
});
See it in action: http://jsfiddle.net/tadams88/6Mmb9/
Instead of making it a click function you could just have it run on document.ready.
The other way that I see you could go about this is using connected web parts. You can read up on that here: http://msdn.microsoft.com/en-us/library/ms469765(v=office.14).aspx
Connected web parts lets one web part pass a value to another, which could mean the first web part could tell the second whether or not to display.
Related
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');
}
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();
}
});
I am a front-end designer and developer with limited JS and jQuery experience. I always know I could learn more, but time has never allowed for that (I could also be using this as an excuse. ; ) Nonetheless, I have an issue on a website I'm currently developing that I need some JS/jQuery help on.
https://dl.dropboxusercontent.com/u/63777185/screenshot.png
This image represents subproducts on a product page. When a user opens the selection box and selects an option, it doesn't automatically check the checkbox. I was able to find something here on StackOverflow that worked with minor tweaks, but the problem comes when there is more than one product. The script that I was using selected all the checkboxes instead of the unique one that I needed.
Another problem is that this code is dynamically generated, so I don't control the output. So, I thought the best way to tackle this was to do addClass to the elements I needed, with an integer to make it unique (since they need to be unique). From there, I didn't know how to get the two pieces of code to work together. This is horribly wrong and you're free to laugh, but this is what I have:
<script>
$(function(){
$('select').each(function(i,j) {
$(this).addClass('selection'+i);
});
$('input').each(function(i,j) {
$(this).addClass('check'+i);
});
$('.selection'+i).change(function() {
var selected = $('select option:selected');
if (selected.val() == "null") {
$('.check'+i).prop('checked', false);
}
else {
$('.check'+i).prop('checked', true);
}
});
});
</script>
Any help is greatly appreciated! : )
I am building a web-based tool for the role-playing game GURPS. Data is maintained in several XML files that are loaded into arrays. Based on changes the user makes, data is re-populated into various spans, inputs and dropdowns from the arrays. No problem so far.
To give the user more feedback, I have a added an anchor that does a hover pop-up that shows the details of the current weapon. For the initial coding, these values were hard-coded while I worked out the rendering issues. Still no problems yet.
Now I am trying to actually populate the hover pop-up with real data. I can not get it to load the real data into the span! I have debugged the function and am certain that I have extracted the data I want. I have used similar lines of code to populate other parts of the web page.
Specifics: I want to replace the "aa" in the span below:
<span id="weaponName1" name="weaponName1" class="weaponName">aa</span><img src="Images/Firearms/Makarov_Suppressed.jpg">
The code I am using to try to re-populate the span is:
function loadWeaponStats(person, weaponID) {
// Load stats of the current weapon into the "Details" anchor fly-out
for (xx1=0; xx1<WeaponsArray.length; xx1++) {
if (weaponID == WeaponsArray[xx1][0]) {
weaponName = WeaponsArray[xx1][1];
alert("weaponName: "+weaponName+"\nperson: "+person);
$("#weaponName"+person).val(weaponName);
xx1 = WeaponsArray.length; // Kill the loop
}
}
}
The alert() is simply to confirm that I have the correct data. The following line should re-populate the span, but it does not.
All HTML, CSS & JavaScript can be found at GURPS Combat Calculator
Pulling out what little hair I have left.
Thanks
You can also do as below:
$("#weaponName"+person).text(weaponName);
you can't use Val() method here.
I'm building a simple asp page on which I have list of peoples with checkbox on left of every name.
I've managed to create a simple jQuery script that allows hiding and showing rows of table based on input:
http://jsfiddle.net/Tq97v/ (first part)
As You can see I can enter part of name and then specific row are hidden.
Using red "x" I can uncheck all checkboxes.
What I'm trying to do now is to change that static red "x" into tristate checkbox.
Don't have idea how to even start.
Do I must add change listener to every checkbox in my list?
Second thing - how to create multiple instances of the same "plugin" on site.
Right now I'm identifying input by it, but it would be nice to call function with that input as param, and it would fine table after that input and create necessary logic.
This way I could call function multiple times on page to have more than one list.
I'm not asking for whole solution (of course it is always welcome :) ) but what I need is idea how to accomplish this in efficient way and as optimized as possible, because sometimes my list has 500+ elements.
P.S. don't look at HTML code, it is ASP generated.
I found this plugin: https://github.com/bcollins/jquery.tristate, but I have no idea how to use it with my list.
UPDATE:
I've managed to turn my code into functions, but right now I must call 3 functions for every list.
Here is my updated code: http://jsfiddle.net/65MEV/4/
How can I change it to one function? Will it be better?
This is my updated code. Still thinking about way of doing that Indeterminate Checkbox instead of my remove image.
UPDATE2
I build working code :)
http://jsfiddle.net/65MEV/9/
But I would like to improve it as much as possible.
Any suggestions are welcome!
A tristate checkbox is like the Three-Portal Device: an illusion.
What you actually want is to make the checkbox indeterminate (by setting the property of the same name to true). To implement this, you will need a change (or click) handler on each checkbox, then you'll need to check if all of them are in the same state, and if not then you set the indeterminate property. It's a hassle, really, because you rarely see indeterminate checkboxes and so most users don't know what to do with them. To be avoided, if possible.
To create multiple instances of the same plugin access elements relatively to an other element.
For example: in your case instead of keeping the item in a jQuery object var $tableRows = $('table.myList tr'); access them in the event.
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
var $tableRows = $(this).next().next().find("table.myList tr");
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
and you only have your actual list.
And for the tree state checkbox you don t need a plugin just add a button or link and every click check it status you can keep the status by jQuery data and change the element image according to this data.