I was wonder if there was a way to change a background image with a button click. The body background for my master page is in my external CSS sheet. I am not sure that this can be done with c#. My css code is like this.
body{
background-image: url(/images/image.jpg)
}
I have updated my code, however it is not working correctly the image does not stay changed it flickers the new pic for a second but doesnt change it.
$(document).ready(function () {
$('#Button2').click(function () {
$('body').css('background-image', 'url(/Image/image.jpg)')
});
});
ASP.NET renames the ID's of Controls when using a Master page. So depending of where the javascript function is you need to use ClientID
If the script is on the child page along with the button you do this
$('#<%= ButtonChild.ClientID %>').click(function () {
If the button is on the master, but the script is on the child you have to navigate up the control tree
$('#<%= Master.FindControl("ButtonMaster").ClientID %>').click(function () {
And when a button is clicked it will trigger a PostBack, so you might want to add return false;
<script type="text/javascript">
$('#<%= ButtonChild.ClientID %>').click(function () {
$('body').css('background', 'url(/images/image.jpg)');
return false;
});
</script>
Make sure you're referencing your button correctly through jQuery (use a # for id references).
$('#button1').click(function() {
$('body').css('background','url(/images/image.jpg)')
});
$('button1').click(function() {
('body').css('background-image','url(/images/image.jpg)')
}
its a duplicate question to the following question:
Changing background image using jquery
Related
I'm using a masked input plugin to control entry of fields (http://digitalbush.com/projects/masked-input-plugin/)..
This is working very well ... until I added my update panel and boom no more masked input after update .. I have my scripts all in the page. Reading jQuery in update panel not successfully adding cssclass after panel refresh I also tried Running Javascript after update panel refresh but this doesn't work either..
it looks as though event bindings are lost.. How can get my script to run to re-add the input masks after update panel update?
script type="text/javascript">
jQuery(function ($) {
$("#Curr_Mileage").mask("9?99999");
$("#Litres").mask("99.9");
$("#ordno").mask("aa99999");
$("#litre2").mask("99.9");
});
</script>
you need to create obj of PageRequestManager and call your jquery after update panel updated
and make sure this script block should be outside update panel
<script>
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded() {
jQuery(function ($) {
$("#Curr_Mileage").mask("9?99999");
$("#Litres").mask("99.9");
$("#ordno").mask("aa99999");
$("#litre2").mask("99.9");
});
}
</script>
Try this
<script>
function pageLoad(){
jQuery(function ($) {
$("#Curr_Mileage").mask("9?99999");
$("#Litres").mask("99.9");
$("#ordno").mask("aa99999");
$("#litre2").mask("99.9");
});
}
</script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(myFunc);
function myFunc () {
jQuery(function ($) {
$("#Curr_Mileage").mask("9?99999");
$("#Litres").mask("99.9");
$("#ordno").mask("aa99999");
$("#litre2").mask("99.9");
});
}
This link may help you.
Managing partial-page updates of server UpdatePanel controls in the browser.
http://msdn.microsoft.com/en-us/library/vstudio/bb311028(v=vs.100).aspx
I have a internal site called DataEntry.com which is made in such a way that whenever we load the page it will save some data into the database. but my requirement is that i have to load the page programatically from aspx page. i have tried
$(document).ready(function () {
window.location.replace("http://DataEntry.com");
});
but once it is redirected I cant load again. and the Dataentry.com is not editable because it is in exe form.. How can i do this?
This really is strange requirement. Use setinterval to call function after specific interval
Use setinterval
$(document).ready(function () {
setInterval(function() {
//ur code
}, 1000);//1000 is in miliseconds=1 second
});
There is a window.refresh method in javascript.
$(document).ready(function () {
location.reload();
});
It can also take in a parameter that does a hard refresh (ignoring the cached version)
$(document).ready(function () {
location.reload(true);
});
That being said, this is a very strange requirement. What are you trying to accomplish?
I have a ASP.NET web app with a MasterPage and contents page, from the MasterPage when I click a MenuItem to open a new aspx Page. if I want to close the new page browser tab, I want to show a popup or a dialog that alert the user that he is closing the browser tab. I used the following code in the new aspx page:
<script type="text/javascript">
$(window).bind("beforeunload", function () {
$(window).unbind("beforeunload");
return confirm("Do you really want to close?")
})
</script>
the problem is that if i press also other buttons than the browse closeTab the method works. i would like to know how can i avoid it.
thanx in advance.
Yes, you should use something like this:
<script language="JavaScript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You are about to exit the system before freezing your declaration! If you leave now and never return to freeze your declaration; then they will not go into effect and you may lose tax deduction, Are you sure you want to leave now?";
}
$(function() {
$("a").click(function() {
window.onbeforeunload = null;
});
$("input").click(function() {
window.onbeforeunload = null;
});
});
</script>
So this message is not showing everytime you refresh the page
Link here to the source
I have a page that contains a user control within an update panel. $(document).ready(function() ) { is called and executes the code correctly when the page firsts loads but if the user clicks a button (within the user control), the document.ready() doesn't get called (document.load, onload also don't work)
I have researched this on the net and found similar problems but nothing that can explain why this isn't working. What other causes can there be for document.ready not working?
This will be a problem with partial postback. The DOM isn't reloaded and so the document ready function won't be hit again. You need to assign a partial postback handler in JavaScript like so...
function doSomething() {
//whatever you want to do on partial postback
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(doSomething);
The above call to add_endRequest should be placed in the JavaScript which is executed when the page first loads.
Instead of $(document).ready you could use function pageLoad(){}.
It's automatically called by the ScriptManager on a page, even on a postback.
I've run into this a while ago, as El Ronnoco said, it has to go with the DOM not being reloaded. However you can simply change
$(document).ready(function() {
to
Sys.Application.add_load(function() {
This will force it to run on every postback.
You can use function pageLoad() as well, but you can only have one pageLoad function, whereas with Sys.Application.add_load, you can add as many handlers as you wish.
Bestest way is
<asp:UpdatePanel...
<ContentTemplate
<script type="text/javascript">
Sys.Application.add_load(LoadScript);
</script>
you hemla code gose here
</ContentTemplate>
</asp:UpdatePanel>
Javascript function
<script type="text/javascript">
function LoadScript() {
$(document).ready(function() {
//you code gose here
});
}
</script>
or
Its under UpdatePanel than you need to register client script again using
ScriptManager.RegisterClientScript
or
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
loadscript();
});
$(document).ready(loadscript);
function loadscript()
{
//yourcode
}
This is an example that worked for me in the past:
<script>
function MyFunction(){
$("#id").text("TESTING");
}
//Calling MyFunction when document is ready (Page loaded first time)
$(document).ready(MyFunction);
//Calling MyFunction when the page is doing postback (asp.net)
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyFunction);
</script>
This code below works nice to solve this problem. As indicated in link posted before (http://encosia.com/document-ready-and-pageload-are-not-the-same/), when you have an asp.NET with updatePanels you shall use function pageLoad(). When you have only one page and in each postback it will be fully reloaded, the $(document).ready() is the right option.
Example using pageLoad:
function pageLoad() {
$(".alteraSoVirgula").keyup(function () {
code here
})
}
I was also facing the same problem but i found the jQuery $(document).ready event handler works when page loads, but after ASP.Net AJAX UpdatePanel Partial PostBack it does not get called. so use Sys.Application.add_load(function(){}); instead of $(document).ready.
This works perfectly for me :)
<script>
Sys.Application.add_load(function() {
//Your code
});
</script>
$(document).ready(function () {
PreRoles();
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
PreRoles();
}
});
};
function PreRoles() {
// Add codes that should be called on postback
}
Most of the times, this is happening because of the Updatepanle.
Just put postback triggers to the button and it will solve this.
I have an update panel with a runat server div inside,
this div isn't shown in the first load of the page. I used to show it after user input the search key then reload the update panel which contain the div and fill div controls then show it.
I have a CheckBox inside this div tag and I need to get the click event of this check box with jquery
I try to use direct .click or .live but all doesn't work !!
Any help will be appreciated.
Use this code
$(document).ready(function()
{
//This will add one function to be called on every request of the update panel
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler()
{
$('#checkboxID').change(function(){
//Your functionality
});
}
You need to introduce javascript into the page to simulate the click event again. Page.RegisterClientScriptBlock or Page.RegisterStartUpScript should do it.
or
place this inside the updatepanel
<script type="text/javascript">
Sys.Application.add_load(your jquery function);
</script>