jeasyui: how to get queryparams in another page by clientside
page 1(root.html):
$.ajax({
type: "get",
async: true,
url: "/ashx/product/root.ashx",
dataType: 'json',
success: function (res) {
var o = $('#tb');
for (i = 0; i < res.length; i++) {
o.tabs('add', {
title: res[i].Name + '-' + res[i].PkId,
href: '/html/usr/node.html', queryParams: { 'id': res[i].id }
});
o.tabs('select', 0);
}
}
});
page 2(node.html):
<script>
// how to get queryParams from page root.html here in javascript.
alert();
</script>
Use JSONP
JQUERY
$.ajax({
url:"node.html.html",
dataType: 'jsonp',
success:function(json){
alert("Success");
},
error:function(){
alert("Error Message");
}
});
node.html ( note im using php )
<?php
$arr = array("param1",
"param2",
array("param3","param4"));
$arr['name'] = "response";
echo json_encode($arr);
?>
Related
Hi I'm using jQuery UI Autocomplete and want do something like this: I want to get the list with AJAX when length=3 and this work great it populate the drop-down. Next I want when the length is >3 to use the returned list from the AJAX and filter it. But it give the same list not filtered.
$( ".selector" ).autocomplete({
source:function(request, response) {
var str_req = request.term;
if(str_req.length==3) {
$.ajax({
url: "/?search=1",
type: "GET",
dataType: "json",
data: {term: request.term},
success: function (data) {
auto_data=data;
response(data);
}
});
} else{
return response(auto_data);
}
},
minLength: 3,
select: function( event, ui ) {
console.log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
I would simply set the min to 1 and do a comparison in the source.
$(".selector").autocomplete({
source:function(request, response) {
var str_req = request.term;
if(str_req.length < 3) {
// Send your list back, if it was stored in 'myData'
response(myData);
} elseif(str_req.length==3) {
$.ajax({
url: "/?search=1",
type: "GET",
dataType: "json",
data: {term: str_req},
success: function (data) {
auto_data=data;
response(data);
}
});
} else{
response(auto_data);
}
}
},
minLength: 1,
select: function(event, ui) {
console.log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
You could also do this as a Switch statement:
var str_req = request.term;
switch(true){
case str_req.length < 3:
// Send your list
break;
case str_req.length == 3:
// Perform AJAX & return results
break;
default:
// All other options
response(auto_data);
}
I am using this functionality to fill the JQuery UI with minimum length set to 2. This code works good when I try to select the list through mouse or through keyboard.
But once I publish my code through my virtual machine it does not work. Neither the minimum length works nor the mouse or keyboard selection works.
Please help me here.
function SPAutoComplete(request, response) {
//debugger;
$.ajax({
url: 'Contracts/SearchSpByNumber',
type: 'GET',
cache: false,
contentType: "application/json; charset=utf-8",
data: request,
dataType: 'json',
success: function (json) {
var i = 0;
i++;
// call autocomplete callback method with results
response($.map(json, function (item) {
return {
label: item.SP_NBR,
SPDesc: item.SP_DESC,
ID: item.ElementID
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert('error - ' + textStatus);
console.log('error', textStatus, errorThrown);
}
});
}
$("#SP1").autocomplete({
source: SPAutoComplete,
minLength: 2,
select: function (event, ui) {
// alert('you have selected ' + ui.item.name + ' ID: ' + ui.item.name);
$("#SP1").val(ui.item.label);
$("#SPDesc1").val(ui.item.SPDesc);
$("#SPDesc1").attr("readonly", true);
$("#SP1ID").val(ui.item.ID);
_newDirty = true;
event.preventDefault();
return false;
},
change: function (event, ui) {
debugger;
if (ui.item != undefined || ui.item != null) {
$("#SP1").val(ui.item.label);
$("#SPDesc1").val(ui.item.SPDesc);
$("#SPDesc1").attr("readonly", true);
$("#SP1ID").val(ui.item.ID);
event.preventDefault();
return false;
}
},
focus: function (event, ui) {
debugger;
$("#SP1").val(ui.item.value);
return false;
}
});
I found this example online and it was perfectly fine but I'd like to know how to store (hidden) the employeeID, so it can be used later on the server side.
Thank you
<script type="text/javascript">
$(function() {
$(".tb").autocomplete({
source: function(request, response) {
$.ajax({
url: "EmployeeList.asmx/FetchEmailList",
data: "{ 'mail': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
value: item.Email
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1
});
});
</script>
The autocomplete has a change event which is fired when the field is blurred if the value has changed. You need to bind an event handler to this event and then set a hidden field within that event handler.
So
$(".tb").autocomplete({
source: function(request, response) {
$.ajax({
url: "EmployeeList.asmx/FetchEmailList",
data: "{ 'mail': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
value: item.Email
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1,
change : function (event,ui) {
$("#hdnEmpId").val(ui.item.value);
}
});
You will have to figure out how you want to implement the change event handler. You can read more about that at http://jqueryui.com/demos/autocomplete/#event-change
Hope this helps!
Ok..i want to redirect a user after the validation check using $.AJAX to a peritcular view... how do i do that ? .. pleae help...
here is my $.AJAX code... EX: i want user redirected to "/Home/Movies" controller action...
if not logged in stay on the same page...
<script type="text/javascript">
$('#btnLogin').click(function () {
var email = $('#Email').val();
var Password = $('#Password').val();
var postdata =
{
"Email": email,
"Password": Password
};
$('.Loading').fadeIn(50);
$.ajax({
url: '#Url.Action("CheckLogin","Home")',
data: postdata,
success: function (msg) {
var data = msg.split(':');
$('#Result').html(data[0]);
$('.Loading').fadeOut(50);
},
error: function (data) {
$('#Result').html(data);
$('.Loading').fadeOut(50);
}
});
});
</script>
here is my controller action which is used for checking Login details...
public ContentResult CheckLogin(Users checkuser)
{
if (db.CheckUserLoginDetails(checkuser.Email, checkuser.Password))
{
return Content("Login Successful:" + checkuser.Email);
}
else
{
return Content("Login UnSuccessful");
}
}
also how can i pass a returned results from this view to another view.. in this exmaple if the user is logged in i want to show his email id on the redirected page which is lets say "/home/Movies"
thx in advance
Show your loading image before ajax request, and hide on success or error handlers.
add <div class="loading">Loading...</div> to your markup
$('.loading').fadeIn(50);
$.ajax({
url: '#Url.Action("CheckLogin","Home")',
data: postdata,
success: function (msg) {
$('#Result').html(msg);
$('.loading').fadeOut(50);
},
error: function (data) {
$('#Result').html(msg);
$('.loading').fadeOut(50);
}
});
Take a look at the ajaxStart() and ajaxStop() event handlers in jQuery. You could use these to show and hide a layer with a gif-animation.
http://api.jquery.com/ajaxStart/
http://api.jquery.com/ajaxStop/
use beforSend and complete attributes.
$.ajax({
url: '#Url.Action("CheckLogin","Home")',
data: postdata,
success: function (msg) {
$('#Result').html(msg);
},
error: function (data) {
$('#Result').html(msg);
},
beforeSend: function() {
$("body").append("<div class=\"ajaxLoader\" id=\"ajaxLoader"\"><div class=\"ajaxAnimation\"></div></div>");
$("#ajaxLoader").hide();
$("#ajaxLoader").fadeIn('fast');
},
complete: function() {
$("#ajaxLoader").remove();
}
});
And specify animation with css
.ajaxAnimation {
background-image: url('images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center center;
}
I am developing a web application using asp.net mvc... I am listing out the details of Clients,Staff,Reports via ajax requests using jquery... What i am doing is writing seperate functions(jquery ajax requests) for each actions (ie) view,add,edit,Delete ...
//Clients
function getClients(currentPage) {
$.ajax({
url: "Clients/GetClients",
data: { 'currentPage': (currentPage + 1), 'pageSize': 5 },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
if (data.isRedirect && data.isRedirect === true) {
alert('must redirect to ' + data.redirectUrl);
location = 'http://www.google.com';
}
else {
var divs = '';
$("#hfId").val('');
$("#ResultsDiv").empty();
$.each(data.Results, function() {
divs += '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + this.ClientName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No :</span> <span class="resultfieldvalues">' + this.ClientMobNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + this.ClientId + ' onclick="storeIds();"/></span><br/><br/><span class="resultfields">Address :</span> <span class="resultfieldvalues">' + this.ClientAddress + '</span></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
$("#HfId").val("");
$("#HfId").val(data.Count);
}
}
});
return false;
}
//Drivers
function getDrivers(currentPage) {
$.ajax({
url: "Staff/GetDrivers",
data: { 'currentPage': (currentPage + 1), 'pageSize': 5 },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
if (data.isRedirect && data.isRedirect === true) {
alert('must redirect to ' + data.redirectUrl);
location = 'http://www.google.com';
}
else {
var divs = '';
$("#hfId").val('');
$("#ResultsDiv").empty();
$.each(data.Results, function() {
divs += '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + this.DriverName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No :</span> <span class="resultfieldvalues">' + this.DriverMobileNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + this.DriverId + ' onclick="storeIds();"/></span></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
$("#HfId").val("");
$("#HfId").val(data.Count);
}
}
});
return false;
}
//get client by id
function getClientbyId(clientId) {
$.ajax({
url: "Clients/getClientById",
data: { 'clientId': clientId },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
$("#Name").val(data.ClientName);
$("#MobileNo").val(data.ClientMobNo);
$("#Address").val(data.ClientAddress);
$("#hfEditId").val(data.ClientId);
$("#adddiv").show();
$("#ResultsDiv").hide();
$("#PagerDown").hide();
$("#ImageButtonDiv").hide();
}
});
return false;
}
//get driver by id
function getDriverById(driverId) {
$.ajax({
url: "Staff/getDriverById",
data: { 'driverId': driverId },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
$("#Name").val(data.DriverName);
$("#MobileNo").val(data.DriverMobileNo);
$("#hfEditId").val(data.DriverId);
$("#adddiv").show();
$("#ResultsDiv").hide();
$("#PagerDown").hide();
$("#ImageButtonDiv").hide();
}
});
return false;
}
//clients delete
function deleteClients(clientIds) {
$.ajax({
url: "Clients/deleteClients",
data: { 'ids': clientIds },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
if (data.Result == "Success") {
getClients(0);
var maxvalues = $("#HfId").val();
$(".pager").pagination(maxvalues, {
callback: getClients,
current_page: 0,
items_per_page: 5,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
num_edge_entries: 1
});
return false;
}
}
});
$("#alert").remove();
topBar('successfully deleted');
return false;
}
//delete drivers
function deleteDrivers(driverIds) {
$.ajax({
url: "Staff/deleteDrivers",
data: { 'ids': driverIds },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
if (data.Result == "Success") {
getDrivers(0);
var maxvalues = $("#HfId").val();
$(".pager").pagination(maxvalues, {
callback: getDrivers,
current_page: 0,
items_per_page: 5,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
num_edge_entries: 1
});
return false;
}
}
});
$("#alert").remove();
topBar('successfully deleted');
return false;
}
How to make these functions into a single function and just pass the values to the function... Is there way to do this...
As all your functions have similar AJAX setup options I would recommend you to setup common options globally using the $.ajaxSetup function:
$(function() {
$.ajaxSetup({
contentType: 'application/json; charset=utf-8',
global: false,
async: false,
dataType: 'json',
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
});
});
Next let's first consider the getClients and getDrivers functions. Those look pretty much the same. The only difference I can see between them is the url you are sending the AJAX request and the html that's being appended to the #ResultsDiv. So you could have two separate functions that handle the result:
function formatDriversResult(result) {
return '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + result.DriverName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No :</span> <span class="resultfieldvalues">' + result.DriverMobileNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + result.DriverId + ' onclick="storeIds();"/></span></div>';
}
and
function formatClientsResult(result) {
return '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + result.ClientName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No :</span> <span class="resultfieldvalues">' + result.ClientMobNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + result.ClientId + ' onclick="storeIds();"/></span><br/><br/><span class="resultfields">Address :</span> <span class="resultfieldvalues">' + result.ClientAddress + '</span></div>';
}
And finally the two functions could be merged into a single one:
function getEntities(url, currentPage, formatResultFunction) {
$.ajax({
url: url,
data: { 'currentPage': (currentPage + 1), 'pageSize': 5 },
success: function(data) {
if (data.isRedirect && data.isRedirect === true) {
alert('must redirect to ' + data.redirectUrl);
location = 'http://www.google.com';
}
else {
var divs = '';
$("#hfId").val('');
$("#ResultsDiv").empty();
$.each(data.Results, function() {
divs += formatResultFunction(this);
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
$("#HfId").val("");
$("#HfId").val(data.Count);
}
}
});
return false;
}
Now when you want to get the current clients:
var clients = getEntities("Clients/GetClients", currentPage, formatClientsResult);
and when you want to get the current drivers:
var drivers = getEntities("Staff/GetDrivers", currentPage, formatDriversResult);
Next let's consider the getClientbyId and getDriverById functions. They could be simplified to:
function getEntityById(data, url, formatResultFunction) {
$.ajax({
url: url,
data: data,
success: function(data) {
formatResultFunction(data);
$("#adddiv").show();
$("#ResultsDiv").hide();
$("#PagerDown").hide();
$("#ImageButtonDiv").hide();
}
});
return false;
}
The same pattern could be used for the rest.