php - -Not as straightforward as in this fiddle? -

in fiddle here http://jsfiddle.net/mjmitche/kvwgw/21/, when submit form, new form appears, , background color changes.

on wordpress blog, i'm trying change background image when form submitted. image uploaded server here

www.example.com/wp-content/themes/thesis_18/custom/images/strawhat.jpg 

and it's displayed using css (in custom wordpress theme) so

body.custom {     background: #8db6b6 url('images/subway.jpg') repeat;  } 

in stupidity, tried make background image change unsuccessfully using code below, because background image uploaded server, realize/think ajax required change background image on submit, haven't been able figure out how it

does know how make ajax call this?

$("#submit").click(function(){     $(".contactform").hide(1000,function(){         $(".contactforms").css({display:"block"});         $("body.custom").css({background: "url('images/strawhat.jpg') repeat;"});     });   });  $("#send").click(function(){     $(".contactforms").hide(1000)         });  

update tried (writing out path), following suggestion of first responder, didn't work.

$("#submit").click(function(){     $(".contactform").hide(1000,function(){         $(".contactforms").css({display:"block"});         $("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"});      });   });  $("#send").click(function(){     $(".contactforms").hide(1000)         });  

the problem image path.

in original css file, path specified relative css file. css file @ www.example.com/wp-content/themes/thesis_18/custom/, specifying 'images/subway.jpg' image url load www.example.com/wp-content/themes/thesis_18/custom/images/subway.jpg.

however, when alter style using jquery, new style not being set in css file, url not relative stylesheet.

i imagine need set background image url relative main page, there's no other context can relative @ run-time. suggest best way use qualified path root of domain, starting backslash, so:

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"}); 

that force right image.

hope helps explain things.

[edit] regards comment op, stating still can't work:

assuming paths correct, should have worked. can't prove or explain why didn't work without seeing non-working example, can give advice on how track down cause of problem.

that advice use firebug. (or of other dev tools come other browsers, firebug still favourite).

firebug browser-based debugging tool, has several features may able use track down problem.

firstly, has "net" tab, allows watch when http requests made, , results were. if have open when script runs, should see request being made new image.

if see request being made, can check succeeded, ie not 404 error or similar. seems me problem. if throw error, can @ error type , url called - if that's wrong, should give big clue how fix it.

if don't see request happening, can use firebug's css tab check stylesheet element has been updated. again, should give avenues investigate either way.

next, firebug's js tab includes full javascript debugger, allows put break points code , step through line line.

if fails, post link version of page doesn't work, , i'll see if can work out there.

[edit] found it:

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"}); 

in line above, problem semi-colon not required inside stylesheet string after word repeat. should be:

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat"}); 

heh. easy 1 miss.

i found in end pasting line of code above firebug's console, , trying different things until worked. :-)