How to Get / Set Div and Table Width / Height - asp.net

I have a Table (or a region) and want to set it's Width and Height value to another Div (or region).
The second one is actually a Ajax Indicator modal which display a loading text when the page is asynchronously post back. here is the example
<table id="MainTable">
<tr>
<td>
Content ....
</td>
</tr>
</table>
<div id="Progress">
Ajax Indocator
</div>
the following javascript didn't work
document.getElementById("Progress").style.width = document.getElementById("MainTable").style.width;
document.getElementById("Progress").style.height = document.getElementById("MainTable").style.height;
It should work both on IE and FireFox. how to correct it.
I checked some other solution in StackOverFlow but I couldn't fix it.
I'm waiting to hear from you.
Update : I use this
<script>
function SetSize(regionToChange, mainRegion) {
$(document).ready(function() {
$('#regionToChange)
.width($('#mainRegion).outerWidth())
.height($('#mainRegion).outerHeight());
});
}
</script>
and I call it like
<asp:Button ID="btnReset" runat="server" SkinID="Button" Text="Reset" OnClick="btnReset_OnClick" OnClientClick="SetSize('Progress', 'MainTable');" />
But it shows me an error which can not find the object
Update 2 I see this error
and in debugger I face with this

spoken in jQuery:
$(document).ready(function(){
$('#Progress')
.width($('#MainTable').outerWidth())
.height($('#MainTable').outerHeight());
});

in jQuery you can do
$("#Progress").css('width', function(){
return $("#MainTable").width()+'px';
});
and so with the height...
edit
on javascript,
this
document.getElementById("Progress").style.width = document.getElementById("MainTable").style.width;
document.getElementById("Progress").style.height = document.getElementById("MainTable").style.height;
will work if your html is something like this for id="MainTable"
<table id="MainTable" style="width: 500px; height: 300px;">
<tr>
<td>
Content ....
</td>
</tr>
</table>
because you are accessing style attribute...
edit2
function SetSize(regionToChange, mainRegion) {
$(regionToChange)
.width($(mainRegion).outerWidth())
.height($(mainRegion).outerHeight());
}
//you can use it as
SetSize('#Progress','#MainTable'); // prefix '#'if it's an ID

Related

Displaying price including add-ons in "Add-to-cart"-button in single product view

I am trying to show the price of the product in the single product view in the button. I tried this solution WooCommerce display price on add to cart button - but I have product-add-ons (with the plug-in from YITH).
The price is shown in the table above the button, so it is calculated. But how do I get it, I can't find it in the source code, to move it into the button (see picture).
I tried now several solutions, but sadly nothing works. Can anybody give me a hint in the right direction? Sorry, I am a beginner at this, but I'm trying.
I used jquery to read the total amount value and then changed the button's text.
var myTotalPrice = $(".yith_wapo_group_final_total .price").text()
$("button.single_add_to_cart_button").text(myTotalPrice)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="yith_wapo_group_total
yith_wapo_keep_show" data-product-price="7.2" data-product-id="63">
<table>
<tbody><tr class="ywapo_tr_product_base_price">
<td data-nosnippet="">Product price</td>
<td data-nosnippet=""><div class="yith_wapo_group_product_price_total"><span class="price amount">€ 7,20</span></div></td>
</tr>
<tr class="ywapo_tr_additional_options">
<td data-nosnippet="">Add-Ons Total:</td>
<td data-nosnippet=""><div class="yith_wapo_group_option_total"><span class="price amount">€ 2,40</span></div></td>
</tr>
<tr class="ywapo_tr_order_totals">
<td data-nosnippet="">Gesamtsumme:</td>
<td data-nosnippet=""><div class="yith_wapo_group_final_total"><span class="price amount">€ 9,60</span></div></td>
</tr>
</tbody></table>
</div>
<button type="submit" name="add-to-cart" value="63" class="single_add_to_cart_button button alt">In den Warenkorb</button>
The easiest way to insert this JS to your theme is to use Code Snippets plugin. There is an example JS snippet there. Just copy/paste the 2 line JS code here into that example snippet.
Make sure you inject this snippet into the footer section of your theme.
EDIT: Please try this code to get the latest price value on the page when it is changed.
var priceElement = $(".yith_wapo_group_final_total .price")
$(priceElement).change(function(){
var myTotalPrice = priceElement.text()
$("button.single_add_to_cart_button").text(myTotalPrice)
});

Dynamic background-image

I want to have multiple div with different background URLs.
My inline razor for this code seems to be wrong:
<table>
#foreach (var item in fa.get_albums()) {
<tr>
<td>
<div style="background-image:url('#item.picture');">
///something
</div>
</td>
</tr>
}
</table>
What's the right way to put inline razor in to background-imag:url()?
The issue you have is that MVC will happily fix the relative paths inside an img src attribute but not for style. You should map that virtual path using Url.Content():
<div style="background-image:url('#Url.Content(item.picture)');">

Get column index in onresizecolumn of declarative dojox.grid.datagrid

In a declarative dojox.grid.datagrid, am using onresizecolumn in table tag.
onresizecolumn="columnResize(this.id,this.cellIdx)"
onresizecolumn calls a function. on resizing particular column i want to get the cellIdx.
<div class="claro" id="eterte" name="dataGrid" onclick="getConnect('inner__eterte');setWidgetproperty(this.id,'xy','inner__eterte');" ondblclick="editCustomGrid(this.id)" onmouseup="setDocStyle(this.id)" style="height:200px; left:39px; position:absolute; top:251px; width:950px;">
<table class="claro" dojotype="dojox.grid.DataGrid" id="inner__eterte" onresizecolumn="columnResize(this.id,this.cellIdx)" rowselector="10px" style="height: 180px; width: 400px;">
<thead>
<tr>
<th field="Column1" id="Column1_6" width="159px">
Column1
</th>
</tr>
</thead>
</table>
<input id="hidden__eterte" name="dataGrid" style="display:none;" type="hidden">
</div>
function columnResize(id,index){
alert();
alert(id);
alert(index);
}
By reading the API documentation I come to the conclusion that Dojo automatically sends the Cell index to the event handler. So the solution is by simply providing the following attribute onResizeColumn="myFunction" and then you define a function like this:
function myFunction(cellDx) {
alert(cellDx);
}
This should work, I even made a JSFiddle to test it. By the way, is there any reason why you would like to do all of it in a declarative way? As far as my experience goes, it's a lot easier to write most of this in JavaScript.
I can get it working this way, not sure if it's a best practice.
http://jsfiddle.net/gE8rH/6/
HTML (removed onresizecolumn attribute):
<div class="claro" id="eterte" name="dataGrid" onclick="getConnect('inner__eterte');setWidgetproperty(this.id,'xy','inner__eterte');" ondblclick="editCustomGrid(this.id)" onmouseup="setDocStyle(this.id)" style="height:200px; width:950px;">
<table dojotype="dojox.grid.DataGrid" id="inner__eterte" rowselector="10px" style="height: 180px; width: 400px;">
<thead>
<tr>
<th field="Column1" id="Column1_6" width="109px">Column1</th>
<th field="Column2" id="Column1_7" width="109px">Column2</th>
<th field="Column2" id="Column1_8" width="109px">Column3</th>
</tr>
</thead>
</table>
</div>
JS (using Dojo 1.7+ module names), assign to the widget's onResizeColumn property:
require(["dojo/parser", "dijit/registry", "dojox/grid/DataGrid"], function (parser, registry) {
parser.parse().then(afterParse);
function afterParse() {
var d = registry.byId("inner__eterte");
console.log(d);
d.onResizeColumn = function (colIdx) {
console.log("columnResize");
console.log("args", arguments);
console.log("this", this);
console.log("colIdx", colIdx);
};
}
});
Outputs this when resizing the first column:
columnResize
args [0]
this [Widget dojox.grid.DataGrid, inner__eterte] { _attachPoints=[4], _attachEvents=[1], _connects=[0], more...}
colIdx 0

asp.net mvc 3, dynamic array

I am a beginner in ASP.Net MVC 3
I will make a dynamic array initially must show me the first ten elements, and when I click view more displays all array elements
here's what I did:
<table>
#foreach (var tweet in Model)
{
<tr>
<td>
<img alt="" src="#tweet.ProfileImageUrl" />
<br />
<input id="rowIDs" type="checkbox" />
</td>
<td>
<strong>#tweet.Name</strong>
<br />
Friends: <strong>#tweet.FriendsCount</strong>
</td>
</tr>
}
</table>
thank you in advance
You have to put 10 items in the controller,
return View(array.Take(10).Skip(page));
Do not use the button anymore. Use the pager.
You need to peredovat variable Pag.
The easiest way(on my opinion) is to create a anchor to the page, itself, with a query string.
Your View must have an anchor like this:
All Comments
And relative controller(HttpGet, not HttpPost(if it has any)) must be something like this:
public ViewResult List(bool fullComment=false)
{
if (fullComment)
return View(dbContext.EntityList.ToList());
else
return View(dbContext.EntityList.Take(5).ToList());
}
Note: if the page has querystring already, in creating anchor link, in view, you must pay attention to this.

Jquery Functions for operations on gridview with checkboxes

The first column in my gridview (gvAvailable) is a currently checkbox column "chkSelect".
The way it works now is that a user can check multiple checkboxes on a gridview, but I would like a jquery function to deselect all the checkboxes on the gridview except for the checkbox that was clicked.
I was also looking for a way to access the columns of the checked row with jquery on a button click.
Thanks for any help
Here's how the generated html looks
<table class="Grid" cellspacing="0" border="0" id="gvAvailable" style="width:99%;border-collapse:collapse;">
<tr class="GridHeader">
<th scope="col"> </th><th scope="col">Guid</th><th scope="col">Id</th><th scope="col">Name</th>
<th scope="col">Facility</th><th scope="col">Room</th>
</tr>
<tr class="GridItem">
<td>
<input id="gvAvailable_ctl02_chkSelect" type="checkbox" name="gvAvailable$ctl02$chkSelect" />
</td>
<td>24</td>
<td>000101020201</td>
<td>Test</td>
<td>Test Facility</td>
<td> </td>
</tr><tr class="GridAltItem">
<td>
<input id="gvAvailable_ctl03_chkSelect" type="checkbox" name="gvAvailable$ctl03$chkSelect" />
</td>
<td>25</td>
<td>1001</td>
<td>Test 2</td>
<td>Test 3</td>
<td> </td>
</tr>
</table>
if you add the same class to each of the checkboxes in the markup, you can retrieve an array of them by saying
$('.classname')
This will give you back the array of objects. You can then call 'each' on the array and deselect them all.
function removeChecks()
{
$('.classname').each(function()
{
$(this).removeAttr('checked');
});
}
Then add the above function call in the click handler for the each checkbox:
$('.classname').each(function()
{
$(this).click(function()
{
removeChecks();
$(this).attr('checked', 'checked');
});
});
the code above should be set up to run on page load.
In this example I put one button to check, and one button to uncheck gridview checkboxes :
<asp:GridView runat="server" ID="grid"></asp:GridView>
<input type="button" onclick="uncheckCheckBoxes()" value="UnCheck" />
<input type="button" onclick="checkCheckBoxes()" value="Check" />
<script>
function uncheckCheckBoxes()
{
var gridClientID = '<%= grid.ClientID %>';
jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
{
this.checked = false;
});
}
function checkCheckBoxes()
{
var gridClientID = '<%= grid.ClientID %>';
jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
{
this.checked = true;
});
}
</script>
I am assuming you would like to make sure the user clicked checkboxes do not get toggled? If so, go on below.
First, just give a class name to all checkboxes in the gridview.
Whenever a checkbox was clicked, add another class to it to denote it was physically selected.
$('.checkbox').click(function(){
$(this).addClass('checked');
});
Now, when a user clicks on the select all checkbox (let's call it "selectAll") on top, iterate through all the checkboxes and toggle the status while checking the "checked" class
$('#selectAll').click(function(){
var status = $(this).attr('checked')
$('.checkbox').each(function(){
//only toggle if not set
if(!$(this).hasClass('checked')){
if(status){
$(this).attr('checked', 'checked');
}
else{
$(this).attr('checked', '');
}
}
});
});
This should get you along your merry way hopefully.
Now, accessing columns of the checked row?
You could add an onclick event to each table row.
$('#tablename tr').click(function(){
//do something
});
i found this articale very usefull Check/Uncheck all Items in an ASP.NET CheckBox List using jQuery

Resources