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
I have searched and implemented a code where I am able to disable the back button of the browser. But I am facing a problem like when I log in and don't do anything and click back button it takes me to login page and then a forward button appears. I don't want the back button to get functional on my home screen immediately when I am logged in. But the back button should be enable within my application but not exactly after i log in. Following is my code that I have used in my master page coding. Please help as I am working on live application.
<script type="text/javascript">
function disableBackButton() {
window.history.forward(1);
//alert("You cannot Nevigate To Back!!!");
}
</script>
<body onload="disableBackButton()" >
</body>
On code behind(Server side) write this:
protected void Page_Load(object sender, EventArgs e)
{
HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
HttpContext.Current.Response.Cache.SetNoServerCaching();
HttpContext.Current.Response.Cache.SetNoStore();
}
and on client side write this:
<script type="text/javascript" language="javascript">
window.history.forward(1);
document.attachEvent("onkeydown", my_onkeydown_handler);
function my_onkeydown_handler()
{
switch (event.keyCode)
{
case 116 : // F5;
event.returnValue = false;
event.keyCode = 0;
window.status = "We have disabled F5";
break;
}
}
</script>
Lot's of way's here
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 a page configured to hide a FileUpload control, so when you click a button it shows the file upload windows and after you choose the file it automatically submits it to the server.
Ir order for this to work i created 2 linkbuttons and a file upload but only one of the buttons is visible. When you click the button it triggers the fileupload window and when the FileUpload control has a change it triggers the submit (invisible) button. The proble I'm having is that only the OnClientClick is being triggered and the server side code is not running
<script type="text/javascript">
document.getElementById('<%= button.ClientID %>').onclick = function () {
document.getElementById('<%= fileupload.ClientID %>').click();
return false;
}
document.getElementById('<%= fileupload.ClientID %>').onchange = function () {
document.getElementById('<%= save.ClientID %>').click();
}
</script>
The save button has a onclientclick to show a modal window and should send to server
OnClick="lnkChange_OnClick" OnClientClick="ShowModalDialog(0);"
Any way to fix this?
I think __doPostBack('','') will help you.
Call _doPostBack function from your client side function. It will postback the page.
I've just determined using Firebug that when Fancybox window is created it actually takes all of my ASP.NET controls (contained in DIV tag) and puts them outside FORM tag. So I guess this is the reason why then ASP.NET button doesn't do anything - it is placed outside form.
So, do you have any suggestions how I can prevent this (or make that ASP.NET button work), other than using completely different modal dialog?
EDIT: OK, people are reporting that some of the proposed fixes are working for them on certain versions. So, be sure to read all of the answers / scroll to the bottom for how to fix this issue on different Fancybox versions.
You need to change this (somewhere around line 719 of jquery.fancybox-1.3.1.js):
$('body').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
to
$('form').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
For anyone needing a simple answer to this problem using Fancybox version 2 theres a much easier way of doing it. All you have to do is add parent: "form:first" in the code eg
$(document).ready(function () {
$(".various").fancybox({
parent: "form:first",
fitToView: true,
width: '300px',
height: '100px',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
modal: false
});
});
then this will append the fancybox elements in the dom inside the form tag, rather than inside the body tag.
Fancybox Version 2.1.4
Change these 2 lines
Around Line 2069 :
document.all && !document.querySelector ? $('html') : $('body');
to
document.all && !document.querySelector ? $('html') : $('form:first');
and around Line 1960 :
this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');
to
this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');
You could also use appendTo but that's up to you. In my case I needed prependTo.
I've been trying to figure out this problem all week, I haven't really had any luck
I just came across this article
http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html
That explains how to get postback working with the jQuery UI Dialog box.
If it's not 100% necessary to use fancy box then this method is definitely worth a try, it's saved me a lot of hassle today.
Without altering the FancyBox source, put this after the FancyBox script (outside any load events!!!):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">
// Override $.fancybox.init to fix ASP.NET PostBack bug;
var fancyboxInitOld = $.fancybox.init;
$.fancybox.init = function () {
fancyboxInitOld.apply(arguments);
$("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
};
// Your code ...
</script>
jquery.fancybox-1.3.4.js line 1040
//$('body').append(
$('form').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
Works (my asp:Button does postback) for me on FF and IE9, thanks for the solution
The above update didn't work for me, the fancybox was still added outside the form. I then commented out those 6 lines in jquery.fancybox-1.3.2.js and found they weren't being used at all in my code.
I did a search on 'body' in the fancybox js files and changed it to 'form' in:
jquery.fancybox-1.3.2.js (ln 484)
jquery.fancybox-1.3.2.pack.js (ln 27, ln 41)
The fancybox is now getting added to the form and the server controls are working.
Fancybox Version: 2.1.2
Line 1782 of jquery.fancybox.js
Change this:
this.el = document.all && !document.querySelector ? $('html') : $('body');
To this:
this.el = document.all && !document.querySelector ? $('html') : $('form:first');
I use Fancybox 1.3.4 to show an aspx page as a popup page in fancybox iframe. But button in the popup page does not cause postback. I did not change anything as you said before. Rather I did the following.
function check()
{
var validated = Page_ClientValidate();
if (validated) {
__doPostBack('<%=bur.ClientID%>','');
parent.$.fancybox.close();
return true;
}
else
{
return false;
}
}
<asp:Button ID="bur" runat="server" Text="ser"
OnClientClick="check()" />
protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.
}
Fancybox 1.3.4 actually does postback.
But if is closed in OnClientClick that is before server side click event it wont postback .So The above is the solution to this problem.(Adding doPostBack in javascript function).
Normally Fancybox 1.3.4 does postback without any change in its .Js files. But to close it , need to write this line ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true); in server side click event. Only then both serverside event gets called and fancybox also closes.
But Fancybox 2.1.3 (latest) does postback event after it is closed in OnClientClick.
If refreshing the parent is a solution which serves the purpose, you can refresh onClosed:
$(".fancybox").fancybox({
'onClosed': function() {
parent.location.reload(true);
}
});
Without any change in fancybox js library file, what works for me was below,
$('.your-selector').fancybox({
afterShow: function () {
$('.fancybox-overlay').appendTo('form');
}
});
I have moved the fancybox div inside the form tag, and now, server side button is working like a charm :)
All the best.. I hope this will work for you too. .:)
You don't need to change any code or any library... Just try this..
$('.fancybox').fancybox({
parent: "form:first", // jQuery selector
});
Heres the worst solution possible, however it worked for me. I needed faceybox and codebehind at the same time. Setup your fancy box to load when button clicked. Then onClosed pass values to another C# page and do the code behind on Page Load.
<script type="text/javascript">
$(document).ready(function () {
$(".fancy").fancybox({
onClosed: function () {
window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
"&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
"&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
}
});
});
and then just the "class=" thing here:
<asp:Button ID="Button1" href="logo.png" runat="server" class="fancy" Text="Create" Width="109px" BorderColor="#009933" OnClick="Button1_Click" />