Im my code i get a value from an ajax page , but it is displayed in a different position than i wish to display. I would like to display it in,..
<tr><td>hello</td></tr>
<tr id="showajax"><td>Ajax Value is:</td><div id="ajaxhide"></div></tr>
here the ajax value returned is displayed somewhere else.
I had used document.getElementById('ajaxhide').innerHTML=xmlhttp.responseText; inside javascript properly also.
The ajax value returned is like this
echo '<td>'."Thanks".'</td>';
Well the first thing is you're trying to dynamically resize the table. It would be better to create the cell as empty to start with and then update the content.
You've also got some invalid syntax with <div id="ajaxhide"></div> floating outside of any table cells but inside a table row. It's not just that it will fail validation and each browser may treat it differently, but also that when you're making the content change you're trying to insert a cell inside the div (which isn't technically allowed) which is inside a row (which also isn't technically allowed).
The solution is to use:
<tr id="showajax"><td>Ajax Value is:</td><td id="ajaxhide"></td></tr>
Now to make the AJAX update:
document.getElementById('ajaxhide').innerHTML=xmlhttp.responseText;
A word of warning on Internet Explorer
IE considers COL, COLGROUP, TABLE, TBODY, TFOOT, THEAD and TR to be read only. This means you can update a cell (TD, TH) but not the whole row and not the whole table. In your above example you're not trying to do that... but just be aware of the limitation if your design changes.
Related
How to check that Ajax call returns no items for populating a drop down list with WebDriver?
I've tried different timeout and waiting options for elements. Nothing works.
From the user perspective, he enters some value in the text field, waits for ajax call return and then empty dropdown list appears and suddenly disappears.
So suppose I have autosuggest input field (like google search) and I need to be sure that there were no auto suggestions for the selected input.
Hard to tell without seeing the markup, but there is usually a container (probably a <div> element) for showing the ajax results, it is probably hidden (ie using display: none;) and becomes visible after databinding occurs. If i were you, i would locate that element and use it in WebDriverWait, perhaps using ExpecedConditions.invisibilityOfElementLocated
I have used webshims for html5 form validation in a single page app with multiple pagelets(divs). The forms are not submitted but local javascript is invoked after each conversation and collected data is posted .
Next I iterate over all the fields and reset the values.
Then I take the new user back to the first pagelet having first form for the new conversation. This time even after filling the correct values the border does not turn green.
Note:
However when we select the field and click outside the field without filling it. and then after filling the correct data border turns green.
However when we tried to achieve it programmatically iterating over each field resetting it and using javascript focus method, that did not do the trick.
I am sure I must be missing some thing. would be able to point out what.
Regards
Barman
I'm not sure, what you want to achieve. I would need to see some code. If you change the value programmatically you can update the validation ui with the event refreshvalidityui on the form field. If you want to reset the ui, you can either trigger a reset event on the form or resetvalidityui on the form field
$('input').val('foo').trigger('refreshvalidityui');
or
$('input').val('foo').trigger('resetvalidityui');
or
$('form').trigger('reset');
Please let me know, if this helps.
I have a fairly complex form on my ASP.NET MVC Page. It works like this...
On default load (no HTTP post), it has two select boxes, bound to the Model, and a submit button.
On submit (HTTP post), the values in the select boxes are used to pull some data from the DB. That data is then added to the model instance that was posted, and the instance is used to issue another View(myModelInstance) call.
At this point, things look good. My select boxes retained the selected values, and the new elements based on the DB data are displaying.
If I do another post now, whether I change data or not, the original values selected in the select boxes are null within the Action method of my controller, but the values for the DB data textboxes are not.
The only thing I am really doing special here is using the index notation within Razor to be able to edit parts of my Model that are within an IEnumerable...as in the following example...
#for (int i = 0; i < ViewBag.SomeArbitraryNumber; i++)
{
<input type="text" name="myModel.MyEnumerable[#i].MyValue"
value="#(Model.MyEnumerable[i].MyValue)" size="2" />
}
This indexed notation usage only happens after the original select box values have been posted.
UPDATE:
It seems that the major contributor here is the special index notation. If I eliminate it, it works fine. Also, if I include additional hidden fields to match the two select boxes, and also use the indexed notation for those, the second post works.
Is it possible that your browser is caching the original select boxes, and they were never populated by your second view? In MVC you have to populate the select boxes every time they are displayed. In Webforms, viewstate does this for you automagically, but in MVC it is up to you to make sure they are populated.
I am using the tablesorter and tablesorterpager plugin and I really like it.
http://tablesorter.com/docs/
http://tablesorter.com/docs/example-pager.html
However I need help with a problem I have. I use checkboxes for every row in a table for selecting items. I also have a “select all” checkbox in the table header.
When looking at the pager script I understand that the plugin completely removes all the table rows from the DOM and only renders the visible rows, the rest of the table is cached.
So when using code similar to this:
$("#theTable").find("input[name='cbitems']:not(:disabled)").each(
I will only get elements currently visible. Not elements in "hidden" pages.
So my question is; is there anyway to make the cached table accessible?
For example:
$("#theTable").cachedTable.find("input[name='cbitems']:not(:disabled)").each(
I have tried reading up on object oriented javascript (or what to call it), but no success.
To answer my own question:
The cached table is accesible, I had just left out the [0] part.
$($("#theTable")[0].config.rowsCopy).each(function() {
$(this).find("input[name='nodeitems']:not(:disabled)").attr('checked', check);
});
I have 2 grids. in both of them i use loadonce:true .
In the first grid i have a cell with an onblur event which
opens a dialog with the second grid.
after i edit the second grid i want to save as xml it's content and
ascribe it to the row of the first grid (the row witch opened the dialog).
In the end i want to generate an xml from the first grid that will
include the xml I generated before in the second grid.
so what is the best way to implement this?
Thank's In Advance.
Depend on how exactly you implement the scenario which you describe you could has any data in the internal data parameter of jqGrid existing always if one use local datatype or loadonce:true in your case.
Direct accessing to the data parameter per jQuery("#grid_id").getGridParam('data') get your reference to the data array. The data array contain all data of the grid (not only the current displayed page) and the data are not yet placed in the <td> element. So the data are unmodified and could contain for example any XML fragments.
UPDATED: To make you easier to understand what I mean I made the small demo. If you double-click on a row you will see the XML data associated with the row.
The "note" column can be hidden. Because all hidden columns exist in grid as HTML markup I made it visible. You can see the difference what can be saved as grid internal data and what can be displayed (also as hidden data).
UPDATED 2: You can consider to use autoencode:true option in your grids.