I have a formpanel, which displays information after clicking on a company in my grid.
this is the handler for my clickevent on the grid:
var onCompanyGridClickHandler = function (grid, rec) {
Ext.Ajax.request({
url: '../GetCompany',
params: { id: rec.get('id') },
success: function (res) {
//Fill Fields with values
companyFormValues = JSON.parse(res.responseText);
companyInfoFormPanel.getForm().setValues(companyFormValues);
}
});
};
So everytime I click on the grid, the form gets new values.
How can I implement a dirty change listener, which reminds me, when I changed a form value, to save the changes.
I tried to fire the isdirty on a beforeclick event on the grid, but it didn't work, and all I get is a dirtychange on every form that changes.
This should work.
var onCompanyGridClickHandler = function (grid, rec) {
form = companyInfoFormPanel.getForm();
if(!form.isDirty()){
Ext.Ajax.request({
url: '../GetCompany',
params: { id: rec.get('id') },
success: function (res) {
//Fill Fields with values
companyFormValues = JSON.parse(res.responseText);
companyInfoFormPanel.getForm().setValues(companyFormValues);
}
});
}
else{
Ext.Msg.alert("Warning", "Please save the data!!")
}
};
Simple Working fiddle for reference.
Was missing trackResetOnLoad:true
Updated Fiddle : Updated
Related
d3js (both v4 and also v3) charts in Drupal 7 with having click event attached to one of the svg text element using .attr("class", "ajax_button") and attaching Drupal behavior for that element. Problem is that click event is lost once tree gets collapsed and not get reattached on expand.
link : d3js + Drupal behavior
following is code for click element
(function($) {
Drupal.behaviors.listload = {
attach: function(context, settings) {
if (context == document) {
$('.ajax_button', context).once(function() {
$(this).click(function(e) {
e.preventDefault();
// https://stackoverflow.com/a/1369080
// to prevent collapsible function which is attached to parent element
e.stopPropagation();
var the_id = $(this).attr('href'); // contextual filter(nid) to views
noSlashes = the_id.replace(/\//g, '');
$.ajax({
url: Drupal.settings.basePath + 'views/ajax',
type: 'post',
data: {
view_name: 'candidate_list_er', //view name
view_display_id: 'candidate_list_block', //your display id
view_args: noSlashes, // your views arguments, //view contexuall filter
},
dataType: 'json',
success: function(response) {
//console.log(response);
if (response[1] !== undefined) {
//console.log(response[1].data); // do something with the view
var viewHtml = response[1].data;
$('#ajax-target .content').html(viewHtml);
//Drupal.attachBehaviors(); //check if you need this.
}
},
error: function(data) {
alert('An error occured!');
}
});
}); //click ends
}); //once ends
}
},
detach: function(context, settings, trigger) { //this function is option
$('.ajax_button').unbind(); //or do whatever you want;
}
};
})(jQuery);
I am having trouble updating hidden inputs using data retrieved from Select2 Ajax.
Please see my code:
var select2_town = $('.select-test select').select2({
ajax: {
url : ajax_var.url,
dataType: 'json',
type: 'post',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page,
};
},
processResults: function (data, page) {
return {
results: $.map(data, function (item) {
return {
id: item.id, //eg 1149
town: item.place_name, //eg Reading
county: item.county, //eg Berkshire
country: item.country,
data: item
};
})
};
},
cache: true;
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: function (item) { return ('<p>' + item.town + ' - ' + item.county + '</p>'); },
templateSelection: function (item) { return (item.town); },
});
This code works fine for me. My issue is what happens after a value is selected.
I would like to update my hidden input ids "#town","#county" and "#country" with town,county and country respectively through an 'change' event.
I have seen many SO examples but they all stop at $(this).select2('data')[0];but do not expand on it.
Weird thing is that the following script displays the correct value in console log. but ALWAYS only apply the object id to #country.
select2_town.on('change', function() {
var obz = $(this).select2('data')[0].country;
console.log(obz);//displays Reading in console
$("#country").attr("value",obz); //displays 1149
});
This actually works.
I had another function that was adding the ID hidden in another file. I deleted that and then the script worked as I wanted it to.
Regards
Thanks
I have a computed observable that makes AJAX calls based on other data (in a computed observable). The resulting data is used to populate part of the UI. Sometimes that part of the UI is hidden and I'd like to avoid the AJAX calls when it's hidden. Right now I have the following, but it updates whenever isVisible becomes true:
this.loadData = ko.computed(function() {
if (this.isVisible()) {
this.isProcessing(true);
var self = this;
$.when.apply($, ko.utils.arrayMap(this.parent.data.filteredSelectedDatasetLinks(), function(datasetLink) {
return $.ajax({
url: datasetLink.getDownloadUrl('.json'),
success: function(data) {
//... do stuff with the data
}
});
}))
.done(function() {
self.isProcessing(false);
});
}
}, this);
So obviously I need to split this up somehow, but I haven't figured out how to do it. To reiterate, when isVisible is false, no updates should happen. When isVisible is true, updates happen whenever filteredSelectedDatasetLinks changes. When isVisible becomes true, updates happen if filteredSelectedDatasetLinks changed while it was false.
Presumably you want to call your ajax when the filteredSelectedDatasetLinks is changed (and only if visible?). I think the best way to do this is to make that dependency explicit using the subscribe function... (I have simplified slightly and fixed issue with your final 'this')
this.filteredSelectedDatasetLinks.subscribe(function() {
if (this.isVisible()) {
this.isProcessing(true);
var self = this;
$.when.apply($, ko.utils.arrayMap(this.filteredSelectedDatasetLinks(), function(datasetLink) {
return $.ajax({
url: datasetLink.getDownloadUrl('.json'),
success: function(data) {
//... do stuff with the data
}
});
}))
.done(function() {
self.isProcessing(false);
});
}
}, this);
The issue with your original attempt is that ko.computed runs the function once and automatically works out which observables it needs to subcribe to. In your case this included the isVisible observable (which is not what you wanted). But making it explicit with the subscribe call directly you no longer have to worry about isVisible firing the callback.
Here is what I ended up using based on RP Niemeyer's comments.
this.trackData = ko.computed(function() {
this.parent.data.filteredSelectedDatasetLinks(); // for notification
this.isDataDirty(true);
}, this);
this.loadData = ko.computed(function() {
if (this.isVisible() && this.isDataDirty()) {
this.isDataDirty(false);
this.isProcessing(true);
var self = this;
$.when.apply($, ko.utils.arrayMap(this.parent.data.filteredSelectedDatasetLinks.peek(), function(datasetLink) {
return $.ajax({
url: datasetLink.getDownloadUrl('.json'),
success: function(data) {
//... do stuff with the data
}
});
}))
.done(function() {
self.isProcessing(false);
});
}
}, this);
Right now I have a collection that fetches value, and after that every view attached to the reset event get rendered again
the problem is that I also have to issue another query to fetch the total number of records retrieved, and only after that ajax call is completed the reset event should be triggered
is more clear with a bit of code:
fetch: function() {
options = { data: this.getParams() };
this.fetch_total();
return Backbone.Collection.prototype.fetch.call(this, options);
},
fetch_total: function() {
var that = this;
var options = {
url: this.url + '/count',
data: this.getParams(),
contentType: 'application/json',
success: function(resp, status, xhr) {
that.total = parseInt(resp);
return true;
}
};
return $.ajax(options);
}
as you can see, I have to issue a get to localhost/myentity/count to get the count of entities...
The thing is I need the collection.total varaible to be updated before refreshing the views, that means I need both request, the GET to localhost/myentity and to localhost/myentity/count, to be completed before refreshing all the views...
any idea how can I achieve it???
If your $ of choice is jQuery>1.5, you could take advantage of the deferred object to manually trigger a reset event when both calls have completed. Similar to your answer, but a bit more readable and without chaining the calls:
fetch: function() {
options = {silent: true, data: this.getParams()};
var _this = this;
var dfd_total = this.fetch_total();
var dfd_fetch = Backbone.Collection.prototype.fetch.call(this, options);
return $.when(dfd_total, dfd_fetch).then(function() {
_this.trigger('reset', _this);
})
},
fetch_total: function() {
// what you have in your question
}
And a Fiddle simulating these calls http://jsfiddle.net/rkzLn/
Of course, returning the results and the total in one fetch may be more efficient, but I guess that's not an option.
I think #nikoshr's answer is a good one so that you don't have to modify your API. If you think that you want to lessen your calls to the server, then consider returning an object from that endpoint that has paging information.
{
count: 1243,
page: 3,
per_page: 10,
results: [
...
]
}
and then overriding the collection's parse functionality
parse: function(res) {
this.count = res.count;
this.page = res.page;
this.per_page = res.per_page;
// return the collection
return res.results;
}
RESOURCES
http://backbonejs.org/#Collection-parse
I think I found a way to do it. What I did was to silently fire the fetch call, without triggering the 'reset' event
There, from the callback, I issue the fetch of the total (GET to localhost/myentity/count)
and from the total callback, I finally trigge the reset event
in code is something like this:
fetch: function() {
var that = this;
options = {
// will manually trigger reset event after fetching the total
silent: true,
data: this.getParams(),
success: function(collection, resp) {
that.fetch_total();
}
};
return Backbone.Collection.prototype.fetch.call(this, options);
},
fetch_total: function() {
var that = this;
var options = {
url: this.url + '/count',
data: this.getParams(),
contentType: 'application/json',
success: function(resp, status, xhr) {
that.total = parseInt(resp);
// manually trigger reset after fetching total
that.trigger('reset', that);
return true;
}
};
return $.ajax(options);
}
This is my first attempt, I wonder if there's an easier way
I have a html input text field and a button.
I want to take user input value from that html text field by clicking that button and want to send that value (by AJAX) into a MVC3 Controller ( as like as a parameter of an ActionResult setValue() ) ?
An other thing i want to know that, how i can get a return value (that return by a ActionResult getValue() ) from a MVC3 Controller and set it in a html text field (by AJAX) ?
please help me with a good example, please. and sorry for my bad English. :)
Button click event
$(document).ready(function ()
{
$('#ButtonName').click(function ()
{
if ($('#YourHtmlTextBox').val() != '')
{
sendValueToController();
}
return false;
});
});
You call your ajax function like so:
function sendValueToController()
{
var yourValue = $('#YourHtmlTextBox').val();
$.ajax({
url: "/ControllerName/ActionName/",
data: { YourValue: yourValue },
cache: false,
type: "GET",
timeout: 10000,
dataType: "json",
success: function (result)
{
if (result.Success)
{ // this sets the value from the response
$('#SomeOtherHtmlTextBox').val(result.Result);
} else
{
$('#SomeOtherHtmlTextBox').val("Failed");
}
}
});
}
This is the action that is being called
public JsonResult ActionName(string YourValue)
{
...
return Json(new { Success = true, Result = "Some Value" }, JsonRequestBehavior.AllowGet);
}