I want to reload jqgrid with new parameters.I'm using .setPostData().Please look at my code below.It always give me error at .setPostData().M I missing something? format?
$('table[id$="'+tabID+'_BBGrid"]').jqGrid({
url:'/Controls/Advertiser/BBControlNew.ascx.ashx?action=getBBData&advertiserID=' + $('#advertiser_id').text() + '&startDate=' + $('input[id$="' + tabID +
'_FromCalBuyBack_CalendarTbx"] ').val() + '&endDate=' + $('input[id$="' + tabID + '_ToCalBuyBack_CalendarTbx"] ').val(),
datatype: 'json',
mtype: 'POST',
height:'100%',
width:'100%',
colNames: result.colNamesData,
colModel: result.colModelData,
//pager: '#RequestLeadspager',
rowNum : 100,
shrinkToFit :false,
...........
function BuyBackGridReload(tabID,NoSelectedValues)
{
$('table[id$="'+tabID+'_BuyBackGrid"]').setPostData({
advertiserID:$('#advertiser_id').text(),
CampaignsDdlSelectedValue: $('select[id$="CampaignDdl"] option:selected').val(),
startDate: $('input[id$="'+tabID+'_FromCalBuyBack_CalendarTbx"] ').val(),
endDate: $('input[id$="'+tabID+'_ToCalBuyBack_CalendarTbx"] ').val(),
NoSelectedValue: NoSelectedValues
}).trigger("reloadGrid");
};
I have search btn.I'm getting values for NoSelectedValues inside that search btn. here is the code for button click.
$('input[id$="'+tabID+'_BuyBackSearchBtn"]').click(function(){
var values = [];
$('div[id$="' + tabID + '_SelectedBuyBackFilterDiv"] .children').each(function (){
$(this).find('option').each(function (){
var attr = $(this).attr('rel');
if (typeof attr == 'undefined' ){
values.push($(this).val());
}
});
});
BuyBackGridReload(tabID,values);
}); //End search click
ERROR:
$("table[id$=\"" + tabID +
"_BuyBackGrid\"]").setPostData({advertiserID:
$("#advertiser_id").text(),
CampaignsDdlSelectedValue:
$("select[id$=\"CampaignDdl\"]
option:selected").val(), startDate:
$("input[id$=\"" + tabID +
"_FromCalBuyBack_CalendarTbx\"]
").val(), endDate: $("input[id$=\"" +
tabID + "_ToCalBuyBack_CalendarTbx\"]
").val(), NoSelectedValue:
NoSelectedValues}) is undefined
I also don't want to pass as a querystring for new parameters.
Any suggestion?
Thanks
A
You don't need to use setPostData to set the postData parameter. You can use setGridParam function instead. See here examples.
I suppose if you will use postData parameter which contain functions you will not need to set any postData parameter at all. The url and postData parameters of jqGrid can look like
url:'/Controls/Advertiser/BBControlNew.ascx.ashx",
postData: {
action: "getBBData"
advertiserID: function() { return $('#advertiser_id').text(); },
startDate: function() { return $('input[id$="' + tabID + '_FromCalBuyBack_CalendarTbx"] ').val(); },
endDate: function() { return $('input[id$="' + tabID + '_ToCalBuyBack_CalendarTbx"] ').val(); },
advertiserID: function() { return $('#advertiser_id').text(); },
CampaignsDdlSelectedValue: function() { return $('select[id$="CampaignDdl"] option:selected').val(); },
startDate: function() { return $('input[id$="'+tabID+'_FromCalBuyBack_CalendarTbx"] ').val(); },
endDate: function() { return $('input[id$="'+tabID+'_ToCalBuyBack_CalendarTbx"] ').val(); },
NoSelectedValue: function() { return NoSelectedValues; }
}
The variables tabID and NoSelectedValues must be defined before. On every grid reloading the function from every postData property will be called and you can read the current values from the corresponding controls.
Related
new to stackoverflow and implementing treeview. I'm having an issue where whenever I select a different value from my dropdown list that would populate my treeview the expand and checkbox is not working anymore. But the first time works.
So I have ajax call that would grab a parameter from a dropdown list to return JSON data to populate my tree. Here's my code. I've been pounding my head for this error and I've also tried some solution in the kendo ui documentation but it just doesn't work. Really need some help. Thank you!
Here's my code:
dataB1 = #Html.Raw(Json.Encode(ViewData["branchList"]));
reloadNewBranch = #Html.Raw(Json.Encode(ViewData["reloadNewBranch"]));
$('#comboNewBranch').kendoAutoComplete({
dataSource: dataB2,
placeholder: "Enter branch name...",
value: reloadNewBranch
});
//Create TreeView
function onChange(e) {
$("body").css("cursor", "progress");
$('#hiddenPackageArray').val('');
document.getElementById("textTestpassId").innerHTML = 'At least one(1) template must be selected.';
$('#treeview').empty();
$.ajax({
url: '#Url.Action("LoadOldBranchTemplates", "Home")',
data: { oldBranchName: $("#comboOldBranch").data("kendoAutoComplete").value() },
dataType: "json"
}).done(function (result, textStatus, jqXHR) {
var viewModel = new kendo.data.HierarchicalDataSource({
data: result,
schema: {
model: {
id: "Id",
hasChildren: true,
children: "Templates"
}
}
});
$("#treeview").kendoTreeView({
loadOnDemand: false,
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: viewModel,
dataTextField: ["TestPassName", "DisplayName"]
})
// gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (let i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].Id);
let filtered = checkedNodes.filter(function (listOfId) {
return listOfId != null;
});
$('#hiddenPackageArray').val(filtered);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
function onCheck(e) {
console.log("I'm in onSelect function");
var checkedNodes = Array();
var treeView = $("#treeview").data("kendoTreeView");
var message = String();
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
console.log("Checkbox changed :: " + this.text(e.node));
if (checkedNodes.length > 0) {
message = checkedNodes.join(" ");
} else {
message = "No package(s) are selected.";
$('#hiddenPackageArray').val('');
}
$("#result").html(message);
}
$("body").css("cursor", "default");
})
.fail(function (xmlHttpRequest, textStatus, errorThrown) {
$('#mainDiv').append('<p>Status: ' + textStatus + '</p>');
$('#mainDiv').append('<p>Error: ' + errorThrown + '</p>');
$('#mainDiv').append('<p>' + xmlHttpRequest + '</p>');
});
};
i try to make a Facebook Style User search using elastiquent on Laravel 5.5 that autocomplete ad sugest user by typing some char in input field.
The response from Ajax call return correct object but in my js code there is probably somethings wrong.
This the elasticsearch url http://basketmapp.com/users-list?q=Paolo, and in response i can see that item is correctly fetched:
this is the js used for selectize:
$(document).ready(function () {
var topUserSearch = $('.js-user-search');
if (topUserSearch.length) {
topUserSearch.selectize({
persist: false,
maxItems: 2,
valueField: 'name',
labelField: 'name',
searchField: ['name'],
options: [],
render: {
option: function(item, escape) {
return '<div class="inline-items">' +
(item.avatar ? '<div class="author-thumb"><img src="' + escape(item.avatar) + '" alt="avatar"></div>' : '') +
'<div class="notification-event">' +
(item.first_name ? '<span class="h6 notification-friend"></a>' + escape(item.first_name) + '</span>' : '') +
'</div>';
},
item: function(item, escape) {
var label = item.first_name;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
'</div>';
}
},
load: function(query, callback)
{
if (!query.length) return callback();
$.ajax
({
url: '/users-list',
type: 'GET',
dataType: 'json',
data:
{
q: query
},
error: function()
{
callback();
},
success: function(res)
{
callback(res.data);
}
});
}
});
}
});
need your help!
I am trying to do a search on the Rotten Tomatoes website for their movies and when I try to type in 'TOY' I got a searchCallBack that is not defined the search should return movies that have the word Toy in them. I am completely new to AJAX by the way. I found that error in the developers tools console.
here is the code:
$(function () {
// You will need this API key in order to call the Rotten Tomatoes API.
var apiKey = *removed for security purposes;
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apiKey
document.getElementById('searchBox').addEventListener('keydown', function (event) {
if (event.which === 13 || event.keyCode === 13) {
var searchText = this.value;
$(document).ready(function () {
$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies.json", {
q: 'TODO put in search text',
page_limit: 10,
page: 1,
success: seachCallBack(),
dataType: 'jsonp'
});
});
// callback for when we get back the results
function searchCallback(data) {
var movies = data.movies;
$.each(movies, function (index, movie) {
$(document.body).append('<h1>' + movie.title + '</h1>');
$(document.body).append('<img src="' + movie.posters.thumbnail + '" />');
});
}
}
});
});
In your Ajax request callback, you have misspelled the function "seachCallBack." If you spell it correctly it should work. It should be "searchCallback"
$(function () {
var apiKey = "removed for security purposes";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apiKey
function keydownHandler(evt) {
if (event.which === 13 || event.keyCode === 13) {
var searchText = this.value;
$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies.json", {
q: search text,
page_limit: 10,
page: 1,
success: searchCallback,
dataType:"json"
});
}
}
// callback for when we get back the results
function searchCallback(data) {
var movies = data.movies;
$.each(movies, function (index, movie) {
$(document.body).append('<h1>' + movie.title + '</h1>');
$(document.body).append('<img src="' + movie.posters.thumbnail + '" />');
});
}
$('#searchBox').addEventListener('keydown', keydownHandler);
});
I have searched stackoverflow, as well as the web for some insight into how to get the jQueryUI Autocomplete plugin working with my JSON data, and I'm at a loss. I had it working like a charm with a local data array. I was able to pull values and build html.
I ran into a problem when I had to pull JSON form this source:
/Search/AjaxFindPeopleProperties2
?txtSearch=ca pulls up the test data that I am trying to loop through, when I type in 'ca' to populate the autocomplete list. One of the problems is that ?term=ca is appended to the url instead of ?txtSearch=ca and I'm not sure how to change it.
This is an example of the data:
{
"MatchedProperties": [
{
"Id": 201,
"Name": "Carlyle Center",
"Description": "Comfort, convenience and style are just a few of the features you'll ...",
"ImageUrl": "/Photos/n/225/4989/PU__ThumbnailRS.jpg"
}
]
}
...and here is the ajax call I'm trying to implement:
$(document).ready(function () {
val = $("#txtSearch").val();
$.ajax({
type: "POST",
url: "/Search/AjaxFindPeopleProperties2",
dataType: "json",
data: "{}",
contentType: "application/json; charset=utf-8",
success: function (data) {
$('#txtSearch').autocomplete({
minLength: 0,
source: data.d, //not sure what this is or if it's correct
focus: function (event, ui) {
$('#txtSearch').val(ui.item.MatchedProperties.Name);
$.widget("custom.catcomplete", $.ui.autocomplete, {
//customize menu item html here
_renderItem: function (ul, item) {
return $("<li class='suggested-search-item" + " " + currentCategory + "'></li>")
.data("item.autocomplete", item)
.append($("<a><img src='" + item.MatchedProperties.ImageUrl + "' /><span class='name'>" + item.MatchedProperties.Name + "</span><span class='location'>" + "item.location" + "</span><span class='description'>" + item.MatchedProperties.Description + "</span></a>"))
.appendTo(ul);
},
_renderMenu: function (ul, items) {
var self = this,
currentCategory = "Properties Static Test Category";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("<li class='suggested-search-category ui-autocomplete-category'>" + currentCategory + "</li>");
//currentCategory = item.category;
}
self._renderItem(ul, item);
});
}
}//END: widget
//return false;
},
select: function (event, ui) {
$('#txtSearch').val(ui.item.MatchedProperties.Name);
//$('#selectedValue').text("Selected value:" + ui.item.Abbreviation);
return false;
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
}); //END ajax
}); //END: doc ready
and I'm initializing here:
<script type="text/javascript">
//initialize autocomplete
$("#txtSearch").autocomplete({ //autocomplete with category support
/*basic settings*/
delay: 0,
source: "/Search/AjaxFindPeopleProperties2",
autoFocus: true,
minLength: 2 //can adjust this to determine how many characters need to be entered before autocomplete will kick in
});
//set auto fucus
$("#txtSearch").autocomplete("option", "autoFocus", true);
</script>
any help would be great...
Thanks!
I have a plugin which retrieves JSON data from external file and appends it to the "div#slider", the data is retrieved and is working fine but the easySlider is not initialized after retrieving the data successfully . and the slide does not starts.
I have codes on http://lkamal.com.np/r3dImage
my plugin code is as follows:
(function($) {
$.fn.r3dImage = function(options){
var defaults = {
url: 'ajax/test.txt',
pause: 2000,
};
var options = $.extend(defaults, options);
//retrive json file
return this.each(function() {
obj = $(this);
var body = obj.html();
getJson();
});
function getJson(){
$.ajax({
type: "POST",
url: options.url,
dataType: "json",
cache: false,
contentType: "application/json",
success: function(data) {
//alert("Success");
$.each(data.dashboard, function(i,post){
obj.html('<li><img src="' + post.ImageUrl + '" title="' + post.OverlayText +'" /></li>');
});
$(obj).easySlider({
pause: options.pause
});
},
error: function(xhr, status, error) {
alert(xhr.status);
}
});
};
/* this.each(function() {
$(options.container).easySlider({
pause: options.pause
});
});*/
};
})(jQuery);
and another is easy slider 1.7.
or
can i do it inside the easyslider plugin.
How Can i merge this two plugin and make one.
I got solution for this also.
$(function() {
$.fn.r3dImage = function(param) {
var options = {
url : "",
pause : 2000,
feedFetchDelay : 10
};
this.each(function() {
var element = $(this);
//alert(element.attr('id'));
element.html("<ul></ul>");
options = $.extend(options,param);
if(options.url=="") { console.log("URL is not specified"); }
else {
getJsonFeed(element); //retrives json feed and appends to respective div
setInterval(getJsonFeed, options.feedFetchDelay*1000*60); //Time interval in milli seconds converted to minute using delay*1000*60
}
});
function getJsonFeed(element){
//function to retrive json feed start using post of json data
$.post(
options.url,
function(data) {
//alert(data.dashboard);
html = '';
$.each(data.dashboard, function(k,v) {
html += '<li>';
html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
html += '</a><p>'+v.OverlayText+'</p></li>';
});
//alert(html);
$("ul", element).append(html); //appending the json data with respective div
//initialize the slider to easy slider
$(element).easySlider({
auto: true,
continuous: true
});
},
"json"
);
}
}
});