Simple onclick fails to redirect url

Question

I'm looking for some help.

I've got what should be a simple onclick redirect on a image.

I found some code (shown below) that assigns an onclick function to every image that uses the class thumbnails. For some reason its not allowing the url to redirect. I get no JS errors pop up but clearly something is failing...

$script .= "$(document).ready(function() {";
$script .= "$('img.thumbnail').click(function() {";
$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
$script .= "});";
$script .= "});";

$s .= '<input type="radio" name="app_select_services" id="'.$service->ID.'" value="'.$service->ID.'"'.$sel.' /><label for="'.$service->ID.'"><img class="thumbnail" src="http://kerrymotorservices.co.uk/wp-content/uploads/2015/04/'.$service->ID.'.png" title="'.$service_description.'"></label>';

Can anyone help please?

that is some nasty php right there....could you possibly show where all those other variables are coming from? — deowk, Apr 28 '15 at 22:29
@deolectrix - Sorry, have a look at http://pastebin.com/D0Dc9N24 - thats the entire page. I'm editting a prewritten plugin but cannot understand why a button with a redirect works but an image onclick doesnt. Line 1203 is where I'm working :) — Totally Tech IT, Apr 28 '15 at 22:36
this is the location of the website: http://goo.gl/0VYvrE I'll now get the output :) — Totally Tech IT, Apr 28 '15 at 22:44
`window.location.href=''.replace(/__selected_service__/, selected_service);` what's the purpose of `replace` ? Was there supposed to be an actual string before it, which at the moment seems to be empty? and `selected_service` doesn't seem to be a defined variable unless it was meant as a string? — Samurai, Apr 28 '15 at 22:53
oddly, when I echo $href it comes back blank and when I echo this code: "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);"; it says: window.location.href=''.replace(/__selected_service__/, selected_service); so I'm assuming its not passing href however if I use the submit button it works... button code is line 1238 — Totally Tech IT, Apr 28 '15 at 22:56
@samurai the url appends ?app_service_id=1 or ?app_service_id=2 depending on which radio button you select - in the php it checks to see if you have selected service 1 or 2. If you look at the website now the button is shown and it now works if you click on either the car or van, it then redirects using the button... — Totally Tech IT, Apr 28 '15 at 23:02
And the click on the image should redirect exactly to the same url as the button? p.s. I changed its display and tested it already :p — Samurai, Apr 28 '15 at 23:04
@Samurai - Yes the image should be the same as the button, then I hide the button so they just click on the image... — Totally Tech IT, Apr 28 '15 at 23:10
See the answer, hopefully it'll work. Alternatively you could also make the button click fire on img.thumbnail click, so you didn't have to worry about other stuff. — Samurai, Apr 28 '15 at 23:15

Samurai · Accepted Answer · 2015-04-29T00:15:32.920

1

Firstly you use the $href before defining it (in the pastebin you posted you define $href like 50 lines later). So either move this bit of code after, or define $href earlier.

Secondly, in your button you're defining the variable selected_service which you're not doing it in your click for thumbnail img. So add the following line first line in your click function, so it should look like:

$script .= "<script>$(document).ready(function() {";
$script .= "$('img.thumbnail').click(function() {";
$script .= "var selected_service=$('input[type=radio][name=app_select_services]:checked').val();";
//...

Edit:
Alright changed the added line a little bit:

$script .= "var selected_service=$(this).parent().prev('input[type=radio][name=app_select_services]').val();";

edited Apr 29 '15 at 00:15

answered Apr 28 '15 at 23:12

Samurai

3,724
5
27
39

Thank you, its almost worked... The images are now clickable, however the url doesnt change - no matter which image I click on, I get ?app_service_id=1 View http://pastebin.com/afPUnjng for the current code (I've moved the href above the click code you helped with! :) – Totally Tech IT Apr 28 '15 at 23:24
I see some part of the script being echoed in the page, likely missed a closing syntax somewhere you just modified. – Samurai Apr 28 '15 at 23:32
I added this in to the code to verify it was outputting ok $outscript = "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);"; echo "href - ".$href."
"; echo "script - ".$outscript."
"; – Totally Tech IT Apr 28 '15 at 23:37
Is this correct as above? ` $script .= "$(document).ready(function() {"; $script .= "$('img.thumbnail').click(function() {"; $script .= "var selected_service=$('input[type=radio][name=app_select_services]:checked').val();"; $script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);"; $script .= "});"; $script .= "});";` I cannot add this as code :( – Totally Tech IT Apr 28 '15 at 23:37
I've removed the echo code now, and the submit button but its still not assigning the selected service – Totally Tech IT Apr 28 '15 at 23:46
Well the id is always 1 because at the moment we get it from `input[type=radio][name=app_select_services]:checked` which is always the one with id of 1 (they have display none as well). Do you want the id to be 2 when the right img is clicked if I understand correctly? – Samurai Apr 28 '15 at 23:49
yes, if the left one is clicked it is 1, then if the right is clicked it is 2 Sorry, I thought the code was already doing that :( – Totally Tech IT Apr 28 '15 at 23:51
Check the edit. (replace the new line with the old). – Samurai Apr 29 '15 at 00:06
Sorry, its still not worked :( If I view the website (so the url ends /mot-booking/ - with no ?app_ser.....) when I click on the second image the service_id becomes undefined (check the url) and when I click on the first image, the service_id=2 – Totally Tech IT Apr 29 '15 at 00:12
No worries, change the next to prev (my bad, didn't look them properly). Edited the new line again. – Samurai Apr 29 '15 at 00:16
Sorry to be a pain, I'm trying to add a variable to a JS function. http://pastebin.com/FasFfRhm - if you look at line 389 you'll see me setting a $vehicle variable. The echo works fine (see it on the main site first line on screen) however line 408 should then display that $vehicle but its blank.... Any ideas? – Totally Tech IT Apr 29 '15 at 01:15
Well in line#389 you're defining a global variable, line#408 is in a class though and to be able to access that variable you need to use the keyword global. Take a look here: http://stackoverflow.com/questions/1415577/accessing-variables-and-methods-outside-of-class-definitions – Samurai Apr 29 '15 at 01:38
Of course!!! Ugh, missing the global... **Thank you (Again!!)** – Totally Tech IT Apr 29 '15 at 01:44

score 0 · Answer 2 · answered Apr 28 '15 at 22:47

0

Your javascript code on http://goo.gl/0VYvrE isn't surrounded by script tags.

Change to this:

$script .= "<script>$(document).ready(function() {";
$script .= "$('img.thumbnail').click(function() {";
$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
$script .= "});";
$script .= "});</script>";

answered Apr 28 '15 at 22:47

garryp

5,508
1
29
41

Thank you for your suggestion but that didn't work - I believe the $script is all appended to the other scripts and then added in to the footer. If you view the source of the page you can see on line 373 where it builds the whole script in JS (I do note that $href seems to be empty all the time though... – Totally Tech IT Apr 28 '15 at 23:06

Simple onclick fails to redirect url

2 Answers2