I have Department Dropdown on change of this I made jquery-ajax request to get the Department Details.
I'll be binding this result to a Div.
that works well till here.
When I click an asp.net button or any server side control after post back the div element is emptied.
How can I get the previous result in the div element.
Success function for Ajax call goes like below:
function OnSuccess(response) {
var List = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
DeptDetails = "";
$.each(List, function () {
DeptDetails = "<table cellpadding='0' cellspacing='0' class='grid' border='0' width='94%'>";
DeptDetails = DeptDetails + "<tr><td align='right' style='padding-left: 10px; padding-top: 3px;'>Store Name:</td><td align='left' style='padding-left:3px;padding-top:3px;'>" + this["DeptName"] + "</td></tr>";
DeptDetails = DeptDetails + "<tr><td align='right' style='padding-left: 10px; padding-top: 3px;'>Address:</td><td align='left' style='padding-left:3px;padding-top:3px;'>" + this["Address"] + "</td></tr>";
DeptDetails = DeptDetails + "<tr><td align='right' style='padding-left: 10px; padding-top: 3px;'>Zone:</td><td align='left' style='padding-left:3px;padding-top:3px;'>" + this["ZoneName"] + "</td></tr>";
DeptDetails = DeptDetails + "<tr><td align='right' style='padding-left: 10px; padding-top: 3px;'>Zone Manager:</td><td align='left' style='padding-left:3px;padding-top:3px;'>" + this["ZoneManager"] + "</td></tr></table>";
$('div[id*="divDeptDetails"]').html(DeptDetails);
});
}
Thanks in advance.It is urgent guys.
jQuery(document).ready(function(){
// check here if the drop down has a selected item different than the default one
// make the same ajax call you are doing on the drop down
})
Anand, you need to persist the data by adding the data to the viewstate or by sending it along with a hidden input.
Related
hello someone can help me with this ?
I what to change my process indicator from SAPUI5 to make something like this
enter image description here
the idea is show how much percent are favor about something and how much percent is against
thanks
you can create a custom control like this or added some code to the onAfterRendering event.
ProgressIndicator.extend("ProgressIndicatorEx", {
renderer: {},
onAfterRendering: function() {
if (ProgressIndicator.prototype.onAfterRendering) {
ProgressIndicator.prototype.onAfterRendering.apply(this, arguments);
}
var percentValue = this.getPercentValue();
this.$().find("#" + this.getId() + "-bar").html('<span id="' + this.getId() + '-textLeft" class="sapMPIText sapMPITextRight" style="color: #FFF; margin-right:8px">' + percentValue + '%</span>');
var rightBar = this.$().find("#" + this.getId() + "-remainingBar");
rightBar.html('<span id="' + this.getId() + '-textRight" class="sapMPIText sapMPITextRight" style="color: #FFF">' + (100 - percentValue) + '%</span>');
rightBar.css("background-color", "#c00")
rightBar.css("border-color", "#c00")
}
demo: https://jsbin.com/yawiqam/edit?js,output
I am parsing data from a JSON, where one of the fields on the table is an image.
Although, I want that image to fit a specific size.
I have already made so many changes, that I got lost why it doesn't work.
JSON
var products=[];
$.getJSON('products.json',function(data){
$.each(data.products, function(i, f){
var tblRow = "<tr><td class='prod_img'><img src=" + f.image_url + "></td></tr>" + "<tr><td class='title'>" + f.title + "</td></tr>" + "<tr><td class='price'>" + f.price + "</td>" + "<td class='price_org'>" + f.old_price + "</td>" + "<td class='add_cart'><img src='img/buynow-green-5.png'>" + "</td></tr>"
$(tblRow).appendTo("#list_products tbody");
});
});
CSS
#list_products{
position:absolute;
width:100%;
border: 5px solid #B9FFFF;
margin-top:80px;}
.prod_img{
height:200px;
width:300px;}
So, after sleeping some hours, I finally realized what was missing.
I had a tag for the image container, but no for the image.
Sometimes, the answer is simple. You just need to go away for a moment.
The Setup: On the same page (inside the same map canvas), I have 2 info windows. The CSS for both of them is the same. The content is very similar. Initially, the Street View pano loads with an info window open. A button inside the info window is used to toggle between the regular map and Street View. The map has a second info window displayed with a button to go back to Street View.
The Problem: One info window is resizing to fit the content and the other one is not, so it's displaying scroll bars. The only difference I can see is that one is on a regular old road map and the other is on a Street View panorama.
What I've Tried: I have maxWidth for both info windows set to 500 (ridiculously wide) and a set width and height for the inner div of the info window in CSS.
The Code:
Here's the CSS:
#map-canvas{
height: 600px;
width: 1000px;
}
#map-canvas .info-window {
width: 250px;
height: 230px;
}
The full JS is long and on jsfiddle.
The Demo: http://jsfiddle.net/rkXuk/1/
full screen demo
A Call for Help: What is going on here? Why are they rendering differently and how can I fix this?
Use inline css.
Instead of
.info-window {
width: 250px;
height: 230px;
}
Use:
// map info window
var contentString = '<div style="width:250px; height:230px;" class="info-window">' +
'<h3>Hi, we\'re Cuberis</h3>' +
'<table border="0" cellpadding="0" cellspacing="0" class="contact">' +
'<tr>' +
'<th scope="row">Email:</th>' +
'<td>info#cuberis.com</td>' +
'</tr>' +
'<tr>' +
'<th scope="row">Phone:</th>' +
'<td>919.443.2254</td>' +
'</tr>' +
'<tr>' +
'<th scope="row">Office:</th>' +
'<td>Golden Belt - Building 2<br />' +
'807 E. Main Street<br />' +
'Suite 2-210<br />' +
'Durham, NC 27701</td>' +
'</tr>' +
'</table>' +
'<div class="contact">' +
'<input type="button" class="button" value="See inside our office" onclick="toggleStreetView();"></input>' +
'</div>';
And:
// street view info window
var contentString2 = '<div style="width:250px; height:230px;" class="info-window">' +
'<h3>Hi, we\'re Cuberis</h3>' +
'<table border="0" cellpadding="0" cellspacing="0" class="contact">' +
'<tr>' +
'<th scope="row">Email:</th>' +
'<td>info#cuberis.com</td>' +
'</tr>' +
'<tr>' +
'<th scope="row">Phone:</th>' +
'<td>919.443.2254</td>' +
'</tr>' +
'<tr>' +
'<th scope="row">Office:</th>' +
'<td>Golden Belt - Building 2<br />' +
'807 E. Main Street<br />' +
'Suite 2-210<br />' +
'Durham, NC 27701</td>' +
'</tr>' +
'</table>' +
'<div class="contact">' +
'<input type="button" class="button" value="Check us out on the map" onclick="toggleStreetView();"></input>' +
'</div>';
I am trying to add a background image to a div that is within the content of a google maps infobox. I'm running into problems because the function that I'm using to change the .css('background-image') is not recognizing the div's ID. This is likely because the content string has not been DOM loaded when the infobox is opened. I know I have to add an event listening to 'domready' or similar, but I'm not exactly sure how to implement it. Here's the code in question:
var boxContent = var boxContent = "<div id=box><div id=leftside><img id=logo src=" +
logopath + " /><h1>" + number + "<br />" + street +
"<br />" + city + "</h1><h2>" + phone +
"<br /><a target=_blank href=" + website +
">visit website</a></h2></div><div id=menu>" +
"<button id=photo onClick=buttonState(this.id)><img src=infomenu/photoicon.png></button></button>" +
"<button id=comments onClick=buttonState(this.id)><img src=infomenu/commentsicon.png></button>" +
"<button id=games onClick=buttonState(this.id)><img src=infomenu/gamesicon.png></button>" +
"<button id=ed onClick=buttonState(this.id)><img src=infomenu/edicon.png></button>" +
"<button id=stay onClick=buttonState(this.id)><img src=infomenu/stayicon.png></button>" +
"<button id=fly onClick=buttonState(this.id)><img src=infomenu/flyicon.png></button>" +
"<div id=display></div>"
var myOptions = {
content: boxContent,
disableAutoPan: false,
pixelOffset: new google.maps.Size(-400, -173),
closeBoxMargin: "-12px -12px 0px 0px",
closeBoxURL: "close.png",
infoBoxClearance: new google.maps.Size(1, 1),
pane: "floatPane",
enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', function(e) {
map.setZoom(13);
map.setCenter(this.getPosition());
ib.open(map, this, displayphotos(imagepath);
});
function displayphotos(imagepath){
$('#display').css('background-image', 'url(' + imagepath + '1.png)');
}
InfoBox.open only takes 2 parameters - a map and an anchor. You need to set that property separately. I found that holding a reference to the boxContent DOM element can make life easier for you.
var boxContent = $("<div id='display'></div>");
var myOptions = {
content: boxContent[0],
disableAutoPan: false,
pixelOffset: new google.maps.Size(-400, -173),
closeBoxMargin: "-12px -12px 0px 0px",
closeBoxURL: "http://www.carltonhotelblanchardstown.com/files/images/a/calendar-popup-close.png",
infoBoxClearance: new google.maps.Size(1, 1),
pane: "floatPane",
enableEventPropagation: false
};
http://jsfiddle.net/Jeff_Meadows/ujxSq/
My asp .net web application requires a telerik:RadTextBox that can accept 160 characters max. Every time a character is entered into this textbox, I want the number of remaining characters that i can type to be displayed near this textbox as a label.Can anyone tell me which event should i make use of and provide javascript code to implement this?
I have done something similar to this with a series of user controls that have text boxes in them. I would recommend using the onkey up and onkey down events to increase/lower your counter.
This is the javascript that we use.
<script type="text/javascript" language="Javascript">
//Character count script!
function textCounter(field, countfield, maxlimit) {
if (countfield == null) { return; }
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit) + " Characters Remaining";
else
countfield.value = maxlimit - field.value.length + " Characters Remaining";
}
</script>
Here is something similar to the text box with the counter field below it.
<telerik:RadTextBox ID="txtTextBox" runat="server" />
<input readonly="readonly" enableviewstate ="false" type="text" runat="server" id="charCount" size="25" name="charCount" tabindex="-1" value=""
style="border: solid 0px white; display:none; background: white; font-size: 11px; color: #FF0000; text-align: right; float:right" />
The attributes are added onLoad if there is a maxlength for the textbox.
txtTextBox.Attributes.Item("onblur") = charCount.ClientID + ".style.display='none';"
txtTextBox.Attributes.Item("onfocus") = charCount.ClientID + ".style.display='block';"
txtTextBox.Attributes.Item("onkeyup") = "textCounter(this, " + charCount.ClientID + "," + myMaxLength.ToString + ");"
txtTextBox.Attributes.Item("onkeydown") = "textCounter(this, " + charCount.ClientID + "," + myMaxLength.ToString + ");"
When all this is combined it will shoe up the counter if you have set a max limit on it, only when that text box has focus. Once the focus is gone the script onblur hides the text box again. The counter is fired on the onkeyup and onkeydown so the count will stay accurate. It will count backwards to 0 and once it reaches 0 the user will not be able to enter more text.
here are some hints on your questions:
In order to count the number of characters and exclude line breaks, you can use the following:
<telerik:RadTextBox ID="RTB1" runat="server" TextMode="MultiLine" ClientEvents-OnKeyPress="KeyPress" />
<script type="text/javascript">
function KeyPress(sender, args)
{
var text;
if ($telerik.isIE || args.get_domEvent().rawEvent.keyCode == 0 || args.get_domEvent().rawEvent.keyCode == 13) // 13 : Enter key
{
text = escape(sender.get_value() + args.get_keyCharacter());
}
else
{
text = escape(sender.get_value());
}
while (text.indexOf("%0D%0A") != -1) // IE
{
text = text.replace("%0D%0A", " ");
}
while (text.indexOf("%0A") != -1)
{
text = text.replace("%0A", " ");
}
while (text.indexOf("%0D") != -1)
{
text = text.replace("%0D", " ");
}
var calculatedLength = unescape(text).length;
if (args.get_domEvent().rawEvent.keyCode == 8 && calculatedLength > 0) // 8 : backspace
{
calculatedLength -= 1;
}
document.title = calculatedLength;
}
</script>
This way you can do this.
Even you can check http://www.telerik.com/community/forums/aspnet-ajax/input/counting-characters.aspx for more details.
Thanks,
Use the onFocus client side event:
Eg.
textBox1.Attributes.Add("onFocus", "Counter('textBox1','LabelID',160)");
<script>
function Counter(textboxID, LabelID, MaxCharacters) {
var count = MaxCharacters - document.getElementById(textboxID).value.length;
document.getElementById(LabelID).innerHTML = count;
}
</script>