Best way to sort page disposition on client side - javascript

I'm working on a MVC project in which I display a ViewModel in several partial views within a table. I have a control in which the user can change how the table is displayed, like this:
<table>
<tr>
<td>
partial view 1 partial view 2
</td>
</tr>
<tr>
<td>
partial view 3 partial view 4
</td>
</tr>
</table>
or
<table>
<tr>
<td>
partial view 1
</td>
</tr>
<tr>
<td>
partial view 2
</td>
</tr>
<tr>
<td>
partial view 3
</td>
</tr>
<tr>
<td>
partial view 4
</td>
</tr>
</table>
Any time a user wants to change how the view is displayed, he has to click the submit button of the from, and the application has to make the request to the server, get the results, and according to a flag (TableDisposition = 1 or 2), load some divs.
I know this is not the best way to do it, but my lack of knowledge regarding client side coding (javascript/jquery) is making it impossible for me to do this in a more efficient way.
Any input will be much appreciated.
EDIT: Solved in the comments.

First I started loading the viewModel in two tables, each one in a div with absolute positioning. Then I made a function to hide one of those tables:
$(function () {
$("#divTable1").css('visibility', 'hidden');
});
Finally, I made a function which is triggered by pressing a button:
$("#btnAlternateView").click(function () {
if ($("#divTable2").css('visibility') == 'hidden') {
$("#divTable2").css('visibility','visible');
$("#divTable1").css('visibility', 'hidden');
}
else {
$("#divTable2").css('visibility','hidden');
$("#divTable1").css('visibility', 'visible');
}
});
And that was it. Works like a charm.

Related

Jquery effects from c#

I am wondering if there is any code, dll that allows developer to give effects to server control from code behind. I have a empty div and two TextBoxes to select dates in kinda leave application form. When user select two values say 11-Oct-2014 and 14-Oct-2014 in those TextBoxes then I want to append html table markup to that empty div and it will consist number of tr equal to days of leave. I am doing it in AJAX UpdatePanel and and showing that on form. It's working fine but I want to know what if I want to use Jquery like FadeIn and FadeOut effect after appending table markup to div, is it possible?
This is very generic, but you can adapt it to suit...
http://jsfiddle.net/dv9a0ubw/1/
html
<button id="add-row">add a row</button>
<br />
<br />
<table id="my-table">
<tr>
<td>something 1</td>
<td>something 2</td>
<td>something 3</td>
</tr>
</table>
javascript
$("#my-table").on("DOMSubtreeModified", function() {
$(this).find("tr:last").hide().fadeIn(2000);
});
$("#add-row").on("click", function() {
var $row = $("<tr><td>new 1</td><td>new 2</td><td>new 3</td></tr>");
$("#my-table").append($row);
});
As you can see, the button simply adds a row and that's it. The animation is applied by the event handler detecting a change in the table. You can retro-fit this to any table by modifying the table selector, using a class if you mean to use it in multiple instances.

Selenium IDE fails to find components

I'm testing an ADF application with Selenium IDE. At one point, the automated test case has to click on a button, which has a partialTrigger attribute pointing to a table on the page and after the button executes some background logic, the table is populated with rows, but the page is not fully refreshed.
The problem I'm facing is that the Selenium IDE can't find the table rows after the button click. Possibly, Selenium is not aware of the page's DOM update, but I'm not sure about that.
What I have tried so far is this:
I stored the expected full xpath for a cell in the first row of the table.
Created a self-executing JavaScript function that is used for clicking on the given path.
I have tested the following commands on a simple HTML page and they work fine.
Selenium commands:
<tr>
<td>store</td>
<td>//html[1]/body[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]</td>
<td>myTableRowPath</td> <!-- store the xpath with name 'myTableRowPath' -->
</tr>
<tr>
<td>storeEval</td>
<td>(function(path) {
var result = selenium.browserbot.getUserWindow()
.document.evaluate(path,
selenium.browserbot.getUserWindow().document,
null,
8,
null).singleNodeValue; result.click();
return null;
})
(${myTableRowPath})
</td>
<td>elementToBeClicked</td>
</tr>
How can I make Selenium IDE aware of any (AJAX) DOM updates on the page ?
Generally when dealing with AJAX on Selenium IDE, you'll want to use a waitForElementPresent type of action.
For instance if your table changes from
<table id="myTable">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>
to
<table id="myTable">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>something</td>
<td>else</td>
</tr>
</tbody>
</table>
You can use:
<tr>
<td>click</td>
<td>//input[#id='myButton']</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//table[#id='myTable']/tbody/tr[2]</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>//table[#id='myTable']/tbody/tr[2]/td</td>
<td>something</td>
</tr>
Here's a JSFiddle I tested it against (no AJAX, but simulating that with a slow JS function).
ADF manipulate the generated HTML in a way that it'll be very hard to maintain an XPath. The easiest way to target specific elements in ADF is giving this element a styleClass and access it using the class attribute.
ADF loads the table UI (whose ID selenium is looking for) before it loads the contents of the table. It is possible your webdriver is looking for the content before it is loaded, so you could explicitly wait for a short period of time before clicking on the row.
Your table might be using lazy load which only loads the contents of the table when you scroll it into view. If your window only shows 5 rows and there are 10 rows in your table, your browser will only load 5 rows. If you ask selenium to look for row 8, it will throw an exception. I solved this by clicking on the first row and driver.switchTo().activeElement().sendKeys(Keys.DOWN); for the number of times the number of the row I am searching for. So I am "scrolling" to the row before accessing it

how to show/hide a div while performing onclick on a td element

I am trying to hide/show a div while clicking <td> in a table. Table contains two <div>s, and consider while clicking main account holder <td> that the first div should be displayed and the other div is in hidden condition. For authorized reorder, <td>, the respective div should display.
My HTML is
<div id="authreport">
<table width="270">
<tr>
<td>First name:</td>
</tr>
<tr>
<td>Last name:</td>
</tr>
<tr>
<td>Mobile phone:</td>
</tr>
<tr>
<td>Email:</td><td>
<tr>
<td>Password:</td>
</tr>
</table>
</div>
<div id="mainacc">
<table>
<tr>
<td colspan="2"><h3>Work details</h3></td>
</tr>
<tr>
<td>Organisation:</td>
</tr>
<tr>
<td>Industry Type:</td>
<tr>
<td>Street:</td>
</tr>
<tr>
<td>Postcode:</td>
</tr>
<tr>
<td>Country:</td>
</tr>
</table>
</div>
My JavaScript is
function authorised_reporter(auth){
var button = document.getElementById('auth')
auth.onclick = function() {
var div = document.getElementById('authreport');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
} }
};
Can any one give me an idea of how to do this?
You should keep an eye on this great tutorial page :
http://www.w3schools.com/jquery/jquery_hide_show.asp.
W3School is a great tutorial site (the best from my point of view), and this page show you an example using the JQuery Framework which is "A MUST HAVE INCLUDED" source in your page because it gives very good helper for common (and more complex) Javascript functions.
http://jquery.com/
.Best Regards
If you use JQuery it is very simple.
$('#DivID').click(function(){
//You can use show(), hide(), or toggle()
$('#DivID').toggle();
});
http://api.jquery.com/toggle/
http://api.jquery.com/show/
http://api.jquery.com/hide/
If you browse through the jquery API there are a lot of effects you can use like fadeout and stuff.
If I understand you correctly, what you're trying to achieve is like accordion. You might wanna see this.
http://jqueryui.com/accordion/

select value of td and download content of selected tds

I have this table:
<table class="results" id="summary_results">
<tr>
<td>select all</td>
<td>name</td>
<td>id</td>
<td>address</td>
<td>url</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>john doe</td>
<td>1</td>
<td>33.85 some address</td>
<td>http://www.domain.com</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>jane doe</td>
<td>2</td>
<td>34.85 some address</td>
<td>http://www.domain2.com</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>sam</td>
<td>3</td>
<td>33.86 some address</td>
<td>http://www.domain3.com</td>
</tr>
</table>
I would like to select all the rows, then download the content of the URLs knowing that each URL is linked to the ID. For example the first url will be www.domain.com?id=1&report=report.
ok now I got the select to work but it is taking only the value of the first tr and not the other selected ones.
I think the main issue here is that client-side javascript isn't really the most appropriate method of going about what you seem to be trying to achieve. Parsing the URLs from the table and forming AJAX requests with them isn't in itself hugely tricky, see for example this jsfiddle. However as noted by wsanville in the comments, there are cross domain restrictions on AJAX that restrict the ability to make calls to arbitrary URLs.
What would be a more feasible method, if you don't want to navigate off the page, is to retrieve the URLs in the method used in the jsfiddle, and then post that list to your own server. Then you will be able to retrieve the URLs data on the server and perform more complicated actions before sending the data back to the user. Something along the lines of:
$.ajax({
url:'/load_urls', //this is assuming you have some routing for the load_urls endpoint
data:urls, //assuming you have the list of urls in a var called 'urls'
method:'POST',
success:function(data){
//do something with your data
},
error:function(err){
console.log(err); //it broke
}
});
I think overall you should maybe take a step back and re-evaluate exactly what you want to happen, and look at the constraints of the URLs you are going to be retrieving and so on, and then after that if you're still at a loss come back with a more specific question. Good luck!

dynamically close and open table rows

I have a table on my site that contains the options for different products. I didn't put it there, the ecommerce platform did. It lists the options in a row in the table. The table looks like this:
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
<td> </td>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
Then if there were another option it would be in an additional row with the same markup.
This renders with the label (size in this case) out in front of the <select> box. I want the label above the <select> box and I figured the easiest way to accomplish this would be to close the <tr> and open a new one. Any ideas on how to do this?
EDIT: I should mention that the ecommerce platform generates the html and I do not have access to the source code
Assuming that it follows that exact structure, try this:
$(".attributes select").each(function(){
$label = $(this).parent().prev().prev();
$label.parent().before("<tr></tr>");
$label.parent().prev().append($label.clone());
$label.remove();
$(this).parent().prev().remove();
});
Here's an example: Demo
Like so?
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
</tr>
<tr>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
I think you have to do it in two steps:
remove the elements:
$('.attributes').find('tr:first-child').remove();
$('.attributes').find('tr:first-child').remove();
2.append them back in the same place
$('.attributes').find('tr:first-child').before('<tr><td>Sizes here</td></tr>');

Categories