RemoteFunction inside jQDateRangeSlider's UserValuesChanged Event - jquery-ui

Question

I have one drop-down and a jQDateRangeSlider(a jQuery widget) in index.gsp of my Grails app.I am posting the value selected in the dropdown and the range selected over the slider to a query in my controller using remoteFunction.I want these three values(2 values from the slider and one value from the drop-down) to be posted to the controller when either of the following events occur:
Drop-down changes
Values over the slider change
The remoteFunction works fine from the onChange of the drop-down but when I replicate the remoteFunction inside the UserValuesChanged block of the slider, it throws an error.This is how my code looks like:
Controller
class PgtypController {
def ajaxGetMv = {
def pgtyp = Pgtyp.executeQuery("select p.date_hour ,p.visits, p.mv, p.browser,p.pagetype,p.platform,p.device,p.time_period from Pgtyp p where p.mv = ? and p.date_hour >= ? and p.date_hour <= ? order by col_0_0_ asc ",[ params.mv ] + params.list( 'date_hour' ))
render pgtyp as JSON
}
def dataSource
def datejson = {
def sql = new Sql(dataSource)
def rows = sql.rows("select min(date_hour) as a , max(date_hour) as b from pgtyp")
sql.close()
render rows as JSON
}
def index() {
}
GSP
<form>
<g:select from="['AFFILIATES', 'CSE','DISPLAYADS','EMAIL','MOBILEWEB','OTHERS','ORGANIC','SEO', 'SEM']" name="mv" id = "mv"
onchange="${remoteFunction(
controller:'Pgtyp',
action:'ajaxGetMv',
params:'\'mv=\' + escape(this.value)+\'&date_hour=\'+ z+\'&date_hour=\'+ b',
//params:'\'mv=\'+this.value',
onSuccess: 'printpgtyp(data)')}"
></g:select>
</form>
<script>
dataFile = "http://localhost:8080/marchmock2/Pgtyp/datejson";
d3.json(dataFile, function(error,data) {
if (data)
dataset = data;
var min = dataset[0].a;
var min2 = new Date(min);
var max = dataset[dataset.length - 1].b;
var max2 = new Date(max);
function addZero(val) {
if (val < 10) {
return "0" + val;
}
return val;
}
var s = $j("#slider").dateRangeSlider({
bounds: {
"min": min2,
"max": max2
},
range: {
min: {
hours: 1
}
},
formatter:function(val){
var m = moment(val);
return m.format("DD/MM/YYYY HH:00:00 ");
},
defaultValues:{
min: min2,
max: max2
}
});
x = (s.dateRangeSlider("values").min);
x.setMinutes(0);
x.setSeconds(0);
z = x.getFullYear()+'-'+(x.getMonth()+1)+ '-'+x.getDate()+' '+x.getHours()+':'+'00'+':'+'00' ;
var y = (s.dateRangeSlider("values").max);
y.setMinutes(0);
y.setSeconds(0);
b = y.getFullYear()+'-'+(y.getMonth()+1)+ '-'+y.getDate()+' '+y.getHours()+':'+'00'+':'+'00' ;
$j('#slider').on("userValuesChanged",function (e, data) {
var x = datavalues.min;
x.setMinutes(0);
x.setSeconds(0);
z = x.getFullYear()+'-'+(x.getMonth()+1)+ '-'+x.getDate()+' '+x.getHours()+':'+'00'+':'+'00' ;
var last = data.values.max;
last.setMinutes(0);
last.setSeconds(0);
b = last.getFullYear()+'-'+(last.getMonth()+1)+ '-'+last.getDate()+' '+last.getHours()+':'+'00'+':'+'00' ;
${remoteFunction(
controller:'Pgtyp',
action:'ajaxGetMv',
params:'\'mv=\' +$(\'mv\').value+\'&date_hour=\'+ z+\'&date_hour=\'+ b',
onSuccess: 'printpgtyp(data)')}
})
});
function printpgtyp(data)
{
console.log(data)
console.log(data.length)
}//end of printpgtyp
</script>
This however gives an error like this:
Uncaught SyntaxError: Unexpected token &
Can anyone tell me where exactly am I going wrong? If the code is working fine inside onChange of select tag then why am I getting this error inside UserValuesChanged of the slider?