Google Dart Core Pages Clear Children - javascript

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;
}

Related

Javascript _self not loading next page

Im working on a project for school where I need to make a small system that requires 2 default login "accounts" and only that.
The way I do this is with an html form which is linked to a script.
For some reason when I use window.open('right.html'); it will put me through to the next page on a different tab once you fill in the right details.
But when I use window.open('right.html', '_self'); it will clear the field and not go to the next page.
Here is my script:
function checkform() {
if (document.login.name.value == "Thea" && document.login.pass.value == "1234") {
window.open('right.html');
} else {
if (document.login.name.value == "Theo" && document.login.pass.value == "4321") {
window.open('right2.html', "_self");
} else {
return false;
}
}
}

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.

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

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.

Javascript identifying enabled drop down select type

I have a form with multiple types of entry fields with some complicated validation that disables/enables various input types based on what the user enters or selects. I am using JS to check the different enabled input types and if they are empty it keeps a running total. Everytime an enabled input is modified the CheckForm function runs.
However, the problem that I am having is identifying which drop down select types are enabled, and if empty then they need to be counted in the alt_count variable. If you look at the code below please note that check boxes and normal text entry types are working fine, it is only a problem with the select-one type.
Code:
function CheckForm() {
var alt_count = 0;
var field_list = '';
$('tr#BaseTab td input:not(:button):not(:disabled), tr#BaseTab td select:not(:disabled)').each(function () {
if ($(this).attr('type') === 'checkbox') {
var temp_obj = $(this);
var temp_name = $(this).attr('name');
if ($('input[name=' + temp_name + ']:checked').length === 0) {
alt_count += 1;
}
} else if ($(this).attr('type') === 'select-one') {
if ($(this).attr("selectedIndex") === 0) {
alt_count += 1;
}
} else {
if ($(this).val() === '') {
alt_count += 1;
}
}
});
Thanks for any help offered.
The select element will not actually have the attribute type="select-one". However, the DOM element will have a .type property that allows you to check if you are dealing with a select-one or a select-multiple. So, instead of checking the 'type' attribute, check the property like this:
else if ($(this)[0].type === 'select-one') {

Element's Value is Null - I am not representing this correctly, I think

Here's my code - I am getting an error in my firebug console that document.getElementById('deletebutton').value is null.
EDIT: To explain what I want - I want code to execute if one of two submit buttons is pressed - this is code to determine whether it was the delete button that was pressed (if not, it should have a null value) and it will execute certain code. Whenever I try to use this though, I keep getting the error message "'deletebutton' is null.
Here's the HTML:
<button type="submit" name="del" id="deletebutton" value="'.$org.'">Delete</button>
How do I account in my program for this? I set it to '', but I believe null would be a better option. Would I do:
if (document.getElementById('deletebutton').value != null
?
Here's the actual code:
<script type="text/javascript">
//<![CDATA[
function formValidation() {
var ids = ["orgname", "cultpicklist", "catpicklist", "servpicklist"]
formValue = 1;
if (document.getElementById('deletebutton').value != '' && document.getElementById('orgname').value === "") {
formValue = 0;
}
else {
for (var i = 0, len = ids.length; i < len; i++) {
if (document.getElementById(ids[i]).value === "") {
formValue = 0;
break;
}
}
}
if (formValue == 1) {
return true;
} else if (formValue == 0) {
alert('Please fill out all required fields');
return false;
}
}
//]]>
</script>
I can't quite understand your code very well, because the HTML part is missing.
it'd be great if you could provide a jsfiddle or something similar in order to have a more accurate portrait of your situation.
Anyhow, I believe that if you just want to test the existence of the item with id "deletebutton" probably you could try something like
if( document.getElementById('deletebutton') != null )

Categories

Resources