I have an asp.net page with some JQuery tabs. Everything works ok.
I added a dropdownlist in one of the tabs, that causes a postback. After the postback I want the same tab to be selected.
I initialize the tabs as:
<script type="text/javascript">
$(document).ready(function() {
var $myTabs = $(".tabsDiv").tabs();
</script>
Then, on the PageLoad event, I inject a script to select the tab:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect", "$myTabs.tabs('select', 1);", true);
For some reason this doesn't work. The script is running but the tabs are not selected.
Is it because the RegisterClientScriptBlock places the script in the bottom of the page and, for some reason, it runs too late?
Any help is appreciated.
Thx in advance
Calling $myTabs.tabs('select', 1); I think results in an error. $myTabs is not a global variable. It's scope is only in $(document).ready(function() { ... });
Can you try with $(".tabsDiv").tabs('select', 1); and see if it works?
Regards...
It might run too early... bottom of the page is good, try this instead:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect",
"$(document).ready(function() { $myTabs.tabs('select', 1); });", true);
Basically, it also runs this code at the ready event.
Related
I have a grid that includes a checkbox control with Autopostback=yes and CheckChanged calling a routine in the vb.net code that updates the record with the checkbox value. When a checkbox is clicked it takes a second or two to run the code and return control back to the web page. I have some users that are clicking several checkboxes one after another so the program is not being called correctly and they are getting a hodgepodge of updated records. For now my solution is for them to wait until the page refreshes before they click the next one. Pretty lamo. Does anyone have any suggestions to work around this problem?
Thanks!
You could write a little jQuery function to temporarily hide your checkbox immediately after it has been checked.
Maybe extend the code below slightly to display a <div id="loading">Loading...</div> or loading .gif image to the user so that they know that your page is being processed and don't get frustrated:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#" + "<%: CheckBox1.ClientID %>").change(function () {
if (this.checked) {
$(this).hide()
}
});
});
</script>
Thanks so much Dennis! Your solution finally got me learning jQuery (which I have wanted to do for some time) and helped me get it to work like I wanted.
When the grid loads all the check boxes show with their values. When one is clicked the jquery below runs and hides them all. I have an OnCheckedChanged event on the asp checkbox control that calls the program and updates the clicked record, and when the grid loads again all the check boxes show with their correct values. Totally cool!
<script src="../Scripts/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("input:checkbox").click(function () {
$("input:checkbox").hide();
});
});
</script>
I have a link which downloads a file on click. I wrote a function on onclick event of that link tag to do some ajax operations when it is clicked.
But the function is not getting called when we click on that link.
However, if i debug the code or place a alert box in that js function, it just works fine. what will be the cause for this?
My code:
HTML:
<a href="DllLocation.dll" onclick=fntrackdownloads() ></a>
JS:
function fntrackdownloads() {
$.get("default.aspx?RT=1", Responsetrackdownloads);
}
Working code:
JS:
function fntrackdownloads() {
$.get("default.aspx?RT=1", Responsetrackdownloads);
alert("something");
}
Any help will be appreciated.
note: the anchor tag is generated dynamically from code behind and
written to dom. i am unaware of what dll location will come in href
attribute.
$(document).("click", "a.putaclass", function(e) {
//what to do on the click
var $a=$(this);
$.get(pathtoserver,function(d) {
alert('data received:'+d);
})
return false; //or e.preventDefault
});
It's probably because the default anchor behaviour interrupts your AJAX response.
Try to put return false at the end of the function that's called on click and see what happens.
I think you are missing the "quotes" here:
//--------------------------------^------------------^
or more in jQuery way:
$('a[href="DllLocation.dll"]').click(function(){
fntrackdownloads();
});
and
$('a[href="DllLocation.dll"]').click(fntrackdownloads);
);
I have this code in some of my ASCX files:
<%=Html.ActionLink(Resources.Localize.Routes_WidgetsEdit, "Edit", "Widget",
new { contentType = Model.ContentType, widgetSlug = Model.Slug, modal=true},
new
{
rel = "shadowbox;height=600;width=700",
title = Resources.Localize.Routes_WidgetsEdit,
#class = "editWidget"
})%>
Take note of that rel="shadowbox..." there. This is to wire up ShadowBox Lightbox clone for this ActionLink.
This works fine when user requests a page containing this User Control thru normal browser request. But I also render/build those View User controls trough AJAX requests. For instance, I would make request to /Widget/RenderToString/... using jQuery .ajax() method and it would return HTML code for that control. This works fine and it renders the code fine. I would then insert (append) the result to a DIV in a page from where the AJAX request was made. This also works fine and the returned HTML gets appended. The only problem is - ShadowBox is not wired up. Even though the code for it gets rendered.
It seems it requires page reload (F5) every time to wire ShadowBox up. Since I am doing AJAX GET and instant append to get rid of having to make a server roundtrip, I would also want ShadowBox to wire up without doing refresh.
Can someone help me with that? Thank you
UPDATE:
Yes, I have this in my Site.Master head:
<script src="<%=Url.Content("~/Scripts/shadowbox-build-3.0rc1/shadowbox.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// insert functions calls here that provide some default behaviour
externalLinks();
});
Shadowbox.init({
language: "en",
players: ["img", "html", "iframe"],
onClose: function() { location.reload(true) }
});
</script>
How do I init the Shadowbox again after AJAX call?
There are many shadowbox plugins... which one are you using? (I can't give you exact code without it.) In any case I imagine you have something in your $(document).ready(function () { ... }); that tells shadowbox plungin to bind itself. You need to call that again after the AJAX call.
Just found the solution here
// call this after adding the new HTML to the page
// set up all anchor elements with a "editWidget" class to work with Shadowbox
Shadowbox.setup("a.editWidget", {});
I have the following JQuery code in a external JS file linked into a
usercontrol in .Net 1.1 webapp.
The usercontrol is a timesheet.
When the page loads it calls MonthChange and works fine in one page.
But now I want to load the timesheet/usercontrol into aother
webpage that pops up a in a new browser window for printing.
Problem is my MonthChange is not firing.
Any ideas why???
$(function() {
MonthChange();
//TestData();
$('[class^=TSGridTB]').blur(function() {
var day = GetDay($(this).attr('id'));
var date = GetRowDate(day);
var bgcolor = GetInputFieldColor(date, false);
$(this).css("background-color", bgcolor);
$(this).parent().css("background-color", bgcolor);
//CalcHours($(this).get(0));
});
$('[class^=TSGridTB]').focus(function() {
var day = GetDay($(this).attr('id'));
var date = GetRowDate(day);
var bgcolor = GetInputFieldColor(date, true);
$(this).css("background-color", bgcolor);
$(this).parent().css("background-color", bgcolor);
});
$('[id$=lstMonth]').change(function() {
MonthChange();
});
});
without seeing further code, ensure that the selector is correct for the control in the new page.
The problem may be that the DOM has changed for the new page/window and JQuery does not yet know about it.
The change event
fires when a control loses the input
focus and its value has been modified
since gaining focus.
You might want to use the live event:
Binds a handler to an event (like
click) for all current - and future -
matched element.
When you bind a "live" event it will
bind to all current and future
elements on the page (using event
delegation). For example if you bound
a live click to all "li" elements on
the page then added another li at a
later time - that click event would
continue to work for the new element
(this is not the case with bind which
must be re-bound on all new elements).
Did you make sure that the new web page has jQuery script includes?
ensure you're using:
$(document).ready(
);
around your entire code block. The $ alone often does not do the trick.
I have a JavaScript method that I need to run on one of my pages, in particular, the onresize event.
However, I don't see how I can set that event from my content page. I wish I could just put it on my master page, but I don't have the need for the method to be called on all pages that use that master page.
Any help would be appreciated.
Place the following in your content page:
<script type="text/javascript">
// here is a cross-browser compatible way of connecting
// handlers to events, in case you don't have one
function attachEventHandler(element, eventToHandle, eventHandler) {
if(element.attachEvent) {
element.attachEvent(eventToHandle, eventHandler);
} else if(element.addEventListener) {
element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
} else {
element[eventToHandle] = eventHandler;
}
}
attachEventHandler(window, "onresize", function() {
// the code you want to run when the browser is resized
});
</script>
That code should give you the basic idea of what you need to do. Hopefully you are using a library that already has code to help you write up event handlers and such.
I had the same problem and have come across this post :
IE Resize Bug Revisited
The above code works but IE has a problem where the onresize is triggered when the body tag changes shape. This blog gives an alternate method which works well
How about use code like the following in your Content Page (C#)?
Page.ClientScript.RegisterStartupScript(this.GetType(), "resizeMyPage", "window.onresize=function(){ resizeMyPage();}", true);
Thus, you could have a resizeMyPage function defined somewhere in the Javascript and it would be run whenever the browser is resized!