Why are my rows not visible after being set to visible? - javascript

I have a table that has six rows, but starts off with only two of them visible (a header row and one "business" row).
The user can select a button that adds additional rows one at a time (actually, it just makes an existing row visible), up to a total of the six rows / five "business" rows.
Rows 2-6 are made invisible at first by this code-behind:
foapalrow3.Style["display"] = "none";
(with the same code for foapalrow4, foapalrow5, and foapalrow6).
They are then made visible via jQuery like so when the user selects the "+" button:
/* This makes the next hidden row visible, as long as there is one */
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
$('[id$=foapalhtmltable]').find('tr:hidden:first').show();
});
This works fine. The problem is, when the form is submitted, the previously visiblized rows revert back to being hidden (all but the first two). I'm trying to add code that will re-visiblize these rows if any text input in them was given a value. IOW, if I give the "Index" column a value in each row like so:
....I would hope that they would be made visible again, because they do have a value:
...and their visible property is indeed "true":
...but the rows remain recalcitrant, hiding in their burrows. This is the code behind for that:
private void btnSave_Click(object sender, EventArgs e)
{
try
{
. . . // code elided for brevity
ConditionallyCreateList();
SaveInputToList();
listOfListItems = ReadFromList();
message.Text = "Saving the data has been successful";
// Expose any rows with vals
if (RowContainsVals(3))
{
foapalrow3.Visible = true;
}
if (RowContainsVals(4))
{
foapalrow4.Visible = true;
}
if (RowContainsVals(5))
{
foapalrow5.Visible = true;
}
if (RowContainsVals(6))
{
foapalrow6.Visible = true;
}
. . . // code elided for brevity
}
catch (Exception ex)
{
message.Text = String.Format("Exception occurred: {0}", ex.Message);
}
}
private bool RowContainsVals(int rownum)
{
bool rowdirty = false;
switch (rownum)
{
case 3:
rowdirty = ((!String.IsNullOrEmpty(boxFund2.Text)) ||
(!String.IsNullOrEmpty(boxIndex2.Text)) ||
(!String.IsNullOrEmpty(boxOrganization2.Text)) ||
(!String.IsNullOrEmpty(boxAccount2.Text)) ||
(!String.IsNullOrEmpty(boxActivity2.Text)) ||
(!String.IsNullOrEmpty(boxAmount2.Text)));
break;
case 4:
rowdirty = ((!String.IsNullOrEmpty(boxFund3.Text)) ||
(!String.IsNullOrEmpty(boxIndex3.Text)) ||
(!String.IsNullOrEmpty(boxOrganization3.Text)) ||
(!String.IsNullOrEmpty(boxAccount3.Text)) ||
(!String.IsNullOrEmpty(boxActivity3.Text)) ||
(!String.IsNullOrEmpty(boxAmount3.Text)));
break;
case 5:
rowdirty = ((!String.IsNullOrEmpty(boxFund4.Text)) ||
(!String.IsNullOrEmpty(boxIndex4.Text)) ||
(!String.IsNullOrEmpty(boxOrganization4.Text)) ||
(!String.IsNullOrEmpty(boxAccount4.Text)) ||
(!String.IsNullOrEmpty(boxActivity4.Text)) ||
(!String.IsNullOrEmpty(boxAmount4.Text)));
break;
case 6:
rowdirty = ((!String.IsNullOrEmpty(boxFund5.Text)) ||
(!String.IsNullOrEmpty(boxIndex5.Text)) ||
(!String.IsNullOrEmpty(boxOrganization5.Text)) ||
(!String.IsNullOrEmpty(boxAccount5.Text)) ||
(!String.IsNullOrEmpty(boxActivity5.Text)) ||
(!String.IsNullOrEmpty(boxAmount5.Text)));
break;
default:
rowdirty = false;
break;
}
return rowdirty;
}
However, this is all I see after that code runs:
So why does setting the visible property to visible not indeed set them visible?
UPDATE
NOTE: If I re-expand the rows via the "+" button, they do contain the values I added to them. So the rows live and retain their data, they just don't want to show themselves...

Try to change your code to use Style["display"] = "table-row"; instead of Visible = true;
You say that in code behind rows are made "invisible" by setting the style display:none.
Note that in asp.net making a control.Visible is NOT the same that making it invisible with an style.
Control.Visible = false will not render the HTML code on the Client Side while setting the display:none will do render it with an style that hides that rows on the browser. I assume this is yor case as you say that you hide and show the rows on the client side and in order to do that they must exist on the client side so I assume in no place in your code they are Visible = false;

Changing my code from this:
// Expose any rows with vals
if (RowContainsVals(3))
{
foapalrow3.Visible = true;
}
if (RowContainsVals(4))
{
foapalrow4.Visible = true;
}
if (RowContainsVals(5))
{
foapalrow5.Visible = true;
}
if (RowContainsVals(6))
{
foapalrow6.Visible = true;
}
...to this:
// Re-visiblize any rows that contain vals
if (RowContainsVals(3))
{
foapalrow3.Style["display"] = "table-row";
}
if (RowContainsVals(4))
{
foapalrow4.Style["display"] = "table-row";
}
if (RowContainsVals(5))
{
foapalrow5.Style["display"] = "table-row";
}
if (RowContainsVals(6))
{
foapalrow6.Style["display"] = "table-row";
}
...works.

Related

javascript that hides/shows element based on criteria not working with style.display = "none"

I have this section of javascript in my html that grabs a form input, puts it through a function and returns a json. I then want to either hide or show certain form elements based on the values in this json.
At the moment, i can do all of this fine except for changing the style.display properties of the elements im trying to hide/show, i can find them okay with getElementbyId (have tested this with other stuff) but the changes i make to the style don't seem to do anything.
As you can see below, i have put in a few alerts to make sure everything is working, and they all seem to align with what i need from the function. The alert showing style.display even matches up with what i'm trying to change it to, however even if it says "none", the form element still shows up.
<script type="text/javascript">
let selected = document.getElementById('selection1');
let optional_toggle = document.getElementById("optional_element");
let button = document.getElementById("button")
button.onclick = function() {
choice1 = selected.value;
fetch('/form_choice/' + choice1).then(function(response) {
response.json().then(function(data) {
if (data.show_optional === "True") {
optional_toggle.style.display = ""
window.alert("first part of if");
window.alert(optional_toggle.style.display);
window.alert(data.show_optional);
}
else {
optional_toggle.style.display = "none"
window.alert("second part of if");
window.alert(optional_toggle.style.display);
window.alert(data.show_optional);
console.log(optional_toggle);
}
}
)
}
)
}
</script>
Edit: i added the console.log lines in but nothing seems to show in the console.
console log image
The issue was that the page was reloading to it's original state after the script had been executed, so i stopped this by adding "; return false" after the function like so:
<script type="text/javascript">
let selected = document.getElementById('selection1');
let optional_toggle = document.getElementById("optional_element");
let button = document.getElementById("button")
button.onclick = function() {
choice1 = selected.value;
fetch('/form_choice/' + choice1).then(function(response) {
response.json().then(function(data) {
if (data.show_optional === "True") {
optional_toggle.style.display = ""
window.alert("first part of if");
window.alert(optional_toggle.style.display);
window.alert(data.show_optional);
}
else {
optional_toggle.style.display = "none"
window.alert("second part of if");
window.alert(optional_toggle.style.display);
window.alert(data.show_optional);
console.log(optional_toggle);
}
}
)
}
); return false
}
</script>

Slickgrid - dataview not updated

I am applying a filter on slick grid data, it changes the number of records in footer but does not refresh the data in table and always show all records.
Code :
$('#shade-number').keyup(function(e) {
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchList = $.trim(this.value.toLowerCase()).split(' ');
dataViewAdd.setFilter(gridFilter);
gridPo.invalidate();
this.focus();
});
function gridFilter(rec) {
var found;
for (i = 0; i < searchList.length; i += 1) {
found = false;
$.each(rec, function(obj, objValue) {
if (typeof objValue !== 'undefined' && objValue != null
&& objValue.toString().toLowerCase().indexOf(searchList[i]) != -1) {
found = true;
return false; //this breaks the $.each loop
}
});
if (!found) {
return false;
}
}
return true;
}
In table footer it says Showing all 4 rows but in table all records are displayed.
Sounds like you don't have the OnRowCountChanged and OnRowsChanged events hooked up.
You should always start with a working example, such as:
http://6pac.github.io/SlickGrid/examples/example4-model.html
and modify it to your needs. Then if something goes wrong, you can retrace your changes step by step until it works.
Also, being able to post a link to a fully working example is a lot easier to debug. I'd bet the problem is in code not mentioned above.

Google Dart Core Pages Clear Children

I'm attempting to clear the children elements on a page whenever a page is changed. However, with the current method of doing so, nothing on the page always changes, the same properties remain. Right now, I have dynamically generated inputs that have different data in them depending on which tab is selected and displays the appropriate core-page (https://www.polymer-project.org/docs/elements/core-elements.html#core-pages). Is there a way to reset the core-page each time so that the different inputs for each tab will show up appropriately? The children.clear() may not be the best approach. Please let me know if you need more information.
#observable int pageChangeCount = 1;
void pageChanged(oldValue, newValue) {
var pages = document.querySelector('core-pages');
pageChangeCount++;
if (page == 0) {
if(pageChangeCount %2 != 0)
{
pages.children.clear();
}
Display(true);
} else if (page == 1) {
if(pageChangeCount %2 == 0)
{
pages.children.clear();
}
Display(false);
}
}
I actually got it by going through all of the elements:
pages.children.removeWhere( (Element e) {
if( e.nodeName != "ELEMENT YOU ARE LOOKING FOR") {
return true;
}
else {
return false;
}

HTML / Javascript - Trouble changing text when clicked

So I have some HTML code here:
<body>
<b style="font-size: 26px;">How the game works</b>
<u id="HowToPlay_HideShow" style="color: #9FF;">[hide]</u><br>
</body>
And I also used Javascript to turn the hide text into show, and show back into hide when clicked on.
<script>
var HowGameWorks_Hidden = false;
document.getElementById("HowToPlay_HideShow").onclick = function () {
if (HowGameWorks_Hidden == false) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[show]";
HowGameWorks_Hidden = true;
}
if (HowGameWorks_Hidden == true) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
HowGameWorks_Hidden = false;
}
}
</script>
This, however, does not seem to work. Clicking on the hide and show text has no effect at all. So I tried removing this piece of code:
if(HowGameWorks_Hidden == true) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
HowGameWorks_Hidden = false;
}
And it correctly turns the hide text into show when I click it (but, of course, does not turn the show text back into hide).
So how do I get my code working?
This is because your second if statement will always get triggered if your first one does, since you set HowGameWorks_Hidden to true in it. You need to use an else:
if(HowGameWorks_Hidden == false) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[show]";
HowGameWorks_Hidden = true;
}
else if(HowGameWorks_Hidden == true) {
document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
HowGameWorks_Hidden = false;
}

JavaScript force an OnChange in Maximo

I'm currently working on a Bookmarklet for Maximo, which is a Java EE application, and I need to populate a few input boxes.
Generally when a use inputs data into the box they click a button that gives them a popup and they search for the value to be added to the script. Or they can type the name and hit tab/enter and it turns it to capital letters and does a few things in the background (not sure what it does exactly).
I currently use
Javascript: $('mx1354').value = "KHBRARR"; $('mx1354').ov= "KHBRARR";
But it does not work like I need it to. It set's the input box to the value needed, but it doesn't run the background functions so when I hit the save button it doesn't recognize it as any changes and discards what I put into the box.
How could I simulate a tab/enter button has been pressed?
So far I've tried to call the onchange, focus/blur, and click functions (Not 100% sure if I called them correctly).
The dojo library is part of the application, so I'm not sure if I can use one if it's feature or if jQuery would cause a conflict.
P.S. This needs to run in IE.
The OnChange Function:
function tb_(event)
{
event = (event) ? event : ((window.event) ? window.event : "");
if(DESIGNMODE)
return;
var ro = this.readOnly;
var exc=(this.getAttribute("exc")=="1");
switch(event.type)
{
case "mousedown":
if(getFocusId()==this.id)
this.setAttribute("stoptcclick","true");
break;
case "mouseup":
if (isIE() && !hasFocus(this))
{
this.focus();
}
if (isBidiEnabled)
{
adjustCaret(event, this); // bidi-hcg-AS
}
break;
case "blur":
input_onblur(event,this);
if (isBidiEnabled) // bidi-hcg-SC
input_bidi_onblur(event, this);
break;
case "change":
if(!ro)
input_changed(event,this);
break;
case "click":
if(overError(event,this))
showFieldError(event,this,true);
var liclick=this.getAttribute("liclick");
var li=this.getAttribute("li");
if(li!="" && liclick=="1")
{
frontEndEvent(getElement(li),'click');
}
if(this.getAttribute("stoptcclick")=="true")
{
event.cancelBubble=true;
}
this.setAttribute("stoptcclick","false");
break;
case "focus":
input_onfocus(event,this);
if (isBidiEnabled) // bidi-hcg-SC
input_bidi_onfocus(event, this);
this.select();
break;
case "keydown":
this.setAttribute("keydown","true");
if(!ro)
{
if(isBidiEnabled)
processBackspaceDelete(event,this); // bidi-hcg-AS
if(hasKeyCode(event, 'KEYCODE_DELETE') || hasKeyCode(event, 'KEYCODE_BACKSPACE'))
{
getHiddenForm().elements.namedItem("changedcomponentvalue").value = this.value;
}
if((hasKeyCode(event, 'KEYCODE_TAB') || hasKeyCode(event, 'KEYCODE_ESC')))
{
var taMatch = dojo.attr(this, "ta_match");
if(taMatch) {
if(taMatch.toLowerCase().indexOf(this.value.toLowerCase()) == 0)
{
console.log("tamatch="+taMatch);
this.value = taMatch;
input_keydown(event, this);
dojo.attr(this, {"prekeyvalue" : ""});
input_forceChanged(this);
inputchanged = false;
return; // don't want to do input_keydown again so preKeyValue will work
}
}
if(this.getAttribute("PopupType"))
{
var popup = dijit.byId(dojohelper.getPopupId(this));
if (popup)
{
dojohelper.closePickerPopup(popup);
if(hasKeyCode(event, 'KEYCODE_ESC'))
{
if (event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue = false;
}
return;
}
}
}
}
input_keydown(event,this);
datespin(event,this);
}
else if(hasKeyCode(event,'KEYCODE_ENTER') || (hasKeyCode(event,'KEYCODE_DOWN_ARROW') && this.getAttribute("liclick")))
{
var lbId = this.getAttribute("li");
frontEndEvent(getElement(lbId), 'click');
}
else if(hasKeyCode(event,KEYCODE_BACKSPACE))
{
event.cancelBubble=true;
event.returnValue=false;
}
break;
case "keypress":
if(!ro)
{
if(event.ctrlKey==false && hasKeyCode(event,'KEYCODE_ENTER'))
{
var db = this.getAttribute("db");
if(db!="")
{
sendClick(db);
}
}
}
break;
case "keyup":
var keyDown = this.getAttribute("keydown");
this.setAttribute("keydown","false");
if(event.ctrlKey && hasKeyCode(event,'KEYCODE_SPACEBAR'))
{
if(showFieldError(event,this,true))
{
return;
}
else
{
menus.typeAhead(this,0);
}
}
if(!ro)
{
if(isBidiEnabled)
processBidiKeys(event,this); // bidi-hcg-AS
numericcheck(event,this);
var min = this.getAttribute("min");
var max = this.getAttribute("max");
if(min && max && min!="NONE" || max!="NONE")
{
if(min!="NONE" && parseInt(this.value)<parseInt(min))
{
this.value=min;
getHiddenForm().elements.namedItem("changedcomponentvalue").value = this.value;
this.select();
return false;
}
if(max!="NONE" && parseInt(this.value)>parseInt(max))
{
this.value=max;
getHiddenForm().elements.namedItem("changedcomponentvalue").value = this.value;
this.select();
return false;
}
}
var defaultButton = false;
if(event.ctrlKey==false && hasKeyCode(event,'KEYCODE_ENTER'))
{
var db = this.getAttribute("db");
if(db!="")
{
defaultButton=true;
}
}
input_changed(event,this);
}
else
{
setFocusId(event,this);
}
if(showFieldHelp(event, this))
{
return;
}
if(keyDown=="true" && hasKeyCode(event, 'KEYCODE_ENTER') && !event.ctrlKey && !event.altKey)
{
menus.typeAhead(this,0);
return;
}
if(!hasKeyCode(event, 'KEYCODE_ENTER|KEYCODE_SHIFT|KEYCODE_CTRL|KEYCODE_ESC|KEYCODE_ALT|KEYCODE_TAB|KEYCODE_END|KEYCODE_HOME|KEYCODE_RIGHT_ARROW|KEYCODE_LEFT_ARROW')
&& !event.ctrlKey && !event.altKey)
{
menus.typeAhead(this,0);
}
break;
case "mousemove":
overError(event,this);
break;
case "cut":
case "paste":
if(!ro)
{
var fldInfo = this.getAttribute("fldInfo");
if(fldInfo)
{
fldInfo = dojo.fromJson(fldInfo);
if(!fldInfo.query || fldInfo.query!=true)
{
setButtonEnabled(saveButton,true);
}
}
window.setTimeout("inputchanged=true;input_forceChanged(dojo.byId('"+this.id+"'));", 20);
}
break;
}
}
After some time I found that in order to make a change to the page via JavaScript you need to submit a hidden form so it can verify on the back-end.
Here is the code I used to change the value of Input fields.
cc : function(e,v){
e.focus(); //Get focus of the element
e.value = v; //Change the value
e.onchange(); //Call the onchange event
e.blur(); //Unfocus the element
console.log("TITLE === "+e.title);
if(e.title.indexOf(v) != -1) {
return true; //The value partially matches the requested value. No need to update
} else {
//Generate an hidden form and submit it to update the page with the new value
var hiddenForm = getHiddenForm();
var inputs = hiddenForm.elements;
inputs.namedItem("changedcomponentid").value = e.id;
inputs.namedItem("changedcomponentvalue").value = v;
inputs.namedItem("event").value = "X"; //Send a Dummy Event so the script see's its invalid and sets the right Event
submitHidden();
}
//Value isn't set to the required value so pass false
return false;
}
run this
input_changed(null,document.getElementById('IDHERE'));
In maximo 7.5 i built a custom lookup
when i click the colored hyperlink java script is called to update the values back to parent form values or updated but on save the value or not updated
function riskmatrix_setvalue(callerId, lookupId, value,bgrColor,targetid){
if (document.getElementById(callerId).readOnly){
sendEvent('selectrecord', lookupId);
return;
}
textBoxCaller = document.getElementById(callerId);
//dojo.byId(callerId).setAttribute("value", value);
//dojo.byId(callerId).setAttribute("changed", true);
//dojohelper.input_changed_value(dojo.byId(callerId),value);
//textBoxCaller.style.background = bgrColor;
//var hiddenForm = getHiddenForm();
//if(!hiddenForm)
// return;
//var inputs = hiddenForm.elements;
//inputs.namedItem("event").value = "setvalue";
//inputs.namedItem("targetid").value = dojo.byId(callerId).id;
//inputs.namedItem("value").value = value;
//sendXHRFromHiddenForm();
textBoxCaller.focus(); //Get focus of the element
textBoxCaller.value = value; //Change the value
textBoxCaller.onchange(); //Call the onchange event
textBoxCaller.blur(); //Unfocus the element
//Generate an hidden form and submit it to update the page with the new value
var hiddenForm = getHiddenForm();
var inputs = hiddenForm.elements;
inputs.namedItem("changedcomponentid").value = textBoxCaller.id;
inputs.namedItem("changedcomponentvalue").value = value;
inputs.namedItem("event").value = "X"; //Send a Dummy Event so the script see's its invalid and sets the right Event
submitHidden();
sendEvent("dialogclose",lookupId);
}
Description
I changed a bit #Steven10172's perfect solution and made it into a Javascript re-usable function.
Made this into a separate answer since my edits to the original answer where i added this were refused :)
I also had to change the line e.onchange() to e.onchange(e) because otherwise the textbox handler (tb_(eventOrComponent) function) would throw TypeError: textbox.getAttribute is not a function.
Code
var setFakeValue = function(e,v){
console.log("Changing value for element:", e, "\nNew value:", v);
e.focus(); //Get focus of the element
e.value = v; //Change the value
e.onchange(e); //Call the onchange event
e.blur(); //Unfocus the element
if(e.title.indexOf(v) != -1) {
return true; //The value partially matches the requested value. No need to update
}
else {
//Generate an hidden form and submit it to update the page with the new value
var hiddenForm = getHiddenForm();
var inputs = hiddenForm.elements;
inputs.namedItem("changedcomponentid").value = e.id;
inputs.namedItem("changedcomponentvalue").value = v;
inputs.namedItem("event").value = "X"; //Send a Dummy Event so the script see's its invalid and sets the right Event
submitHidden();
}
//Value isn't set to the required value so pass false
return false;
}
Usage
setFakeValue(html_element, new_value);
Fun fact
I spent a lot of time searching for a solution to programmatically change an <input> value in Maximo... At some point i got really frustrated, gave up and started to think it just wasn't possible...
Some time ago i tried to search with no expectations at all and after some time i found the solution... Here...
Now... As you can see this is literally just a total copy of StackOverflow, including questions and solutions (marking the upvotes with plain text lol), but in Chinese... This got me curious and after a little search i found this post on StackOverflow..
High five to Chrome built-in webpage translator that let understand something on that page ^^

Categories

Resources