We Keep Coding

Change backgroundimage url of masterpage on button click

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

Run Javascript after C# Update panel Refresh

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

Document.Ready() is not working after PostBack

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.

ajax asp.net and jquery conflict

I have multiple jquery files in my project.
Yesterday googled this problem and find solution. I edited this
$(document).ready(function () {
with this
function pageLoad() {
Now problem is that if i will use this in all my jquery files. Every scripts will stops working.

That is two different things. The
$(document).ready(function () {
is from and to jquery, it tells when the DOM is loaded and it start executing the code inside.
The
function pageLoad() {
is from ASP.NET and it is one of handler of Application.Load (client-side)
The reason why it will stop working is because in the same page you can only have one event with the same name, by default pageLoad will be the handler of Application.Load but you can associate another name. I don't see why you have problems between the two, can you explain it better?
EDIT:
After your comment, if you want/need to use Sys.Application.add_load (by default pageLoad) you should add a different name for each js file you need.
From msdn:
// Attach a handler to the load event.
Sys.Application.add_load(applicationLoadHandler);
function applicationLoadHandler() {
// Redirect to alternate page if not business hours.
var d = new Date();
if (!(8 < d.getHours() < 17)) {
window.location = "AfterHours.aspx";
}
As you can see, you can give a different name to add_load and you should give a different name to use more than one for the same page/request.
}

Replace pageLoad with something like this:
$(function() {
// This will be executed when the page is loaded
});
or to avoid name collisions...
(function($) {
// This will be executed when the page is loaded
})(jQuery);
Edit: As rich.okelly pointed out the second example will run as soon as the script is loaded.

Run ajax scripts on page when navigating with ajax?

I got a bit of an issue in my ASP.NET MVC project.
I have a chat div in the bottom right corner (like facebook), and of course I do not want this to reload when navigating to all my navigation is ajax.
The problem I am facing is that I use the following code on the top of the view page:
<script type="text/javascript">
$(document).ready(function() {
$('#divTS').hide();
$('a#showTS').click(function() {
$('#divTS').slideToggle(400);
return false;
});
});
</script>
The problem is that this code is only loaded with ajax and does not seem to fire? I would like to run all scripts in the newly loaded view, just as if I hadn't navigated with ajax.
I cannot put this in the site.master as it only loads once and then probably the divs I am trying to hide doesn't exist.
Is there a good way to run scripts in the ajax-loaded div?

You will need to run the scripts in the success callback function of your ajax script. I would recommend you externalizing this into a separate function:
function setupEffects() {
$('#divTS').hide();
$('a#showTS').click(function() {
$('#divTS').slideToggle(400);
return false;
});
}
$(document).ready(function() {
setupEffects();
});
And in the success callback of your script call this function:
success: function(result) {
setupEffects();
}

The Masterpage gets reloaded when you navigate to another View. You can also check if a div exists with $('#div').length > 0.
By the way, "full site" ajax navigation should not be used. Reload your chat on navigation - best put it into a control (makes things easier).