I have the following js:
$('.overview_table_header').click(function() {
header = $(this)
$.get("/sort", { col: $.trim($(this).text()), sort: header.data('sort') },
function(data) {
$('#pages').html(data.html);
header.data('sort', data.sort);
}
);
});
Which passes 2 parameters (A get request to /sort): {"col"=>"DATA", "sort"=>"OTHERDATA"}
I'm new to JQuery and Ajax. How do I store The above DATA and OTHERDATA in a hidden field tag within my html? Is using JQuery.data() the best method to accomplish this task?
.data() is what I would use. You can do:
$(header).data({"col":"DATA", "sort":"OTHERDATA"});
or
$(header).data("col","DATA");
$(header).data("sort","OTHERDATA");
Related
I have an MVC page that contains multiple text entries. The controls on the page are all data driven. What I've done, is tag each of the autocomplete inputs with class="ACBox". They all have their own Ids. I have also added a custom attribute called fname, where fname is the field identifer. fname could be "size", "color", "connectionpoints", etc. (could be lots of these)
What I would like to do, is use one autocomplete function to make an ajax call to my controller with the fname of the control passed back to my function to return the appropriate list of possibles.
However, I do not find a way to get a reference to the calling object for autocomplete to read in the fname attribute. My current solution below, the pfield is Nothing when I examine in GetOptionsFromField.
Is there a way to set pfield? Optionally, I could use this.id to set as pfield.
$(".ACBox").autocomplete({
source: function (request, response) {
$.ajax({
url: "#Url.Action("GetOptionsFromField", "ControllerX")",
dataType: "json",
data: {
pfield: $(this).attr("fname")
},
success: function (data) {
response(data);
}
});
},
minlength: 5,
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
Okay, It looks like I needed to search better. This was answered back in 2014, with this question.
I use
$(this.element).data("colname")
and it works like a charm.
I want to remove a parameter from the store of a comboBox before it shows to the user, I know more or less how to do it but it´s not working properly, any one could give some solution? Maybe I need to select an specific event, but I tried with all the events that make sense and didn´t work, Here is the code:
var combo = fwk.ctrl.form.ComboBox({
storeConfig: {
url: app.bo.type.type_find
,fields: ['id', 'code']
}
,comboBoxConfig:{
triggerAction: 'all'
,allowBlank:false
}
});
combo.on('beforeshow', function() {
combo.store.removeAt(2);
});
Thank you very much!!!
Try removing it inside 'afterRender' event,
sample code:
listeners: {
'afterrender': function(comboRef) {
comboRef.store.removeAt(2);
}
}
Here you have the solution,
combo.getStore().load({
callback: function (r, options, success) {
if (success) {
combo.store.removeAt(2);
}
}
});
Is necessary to change it before the load of the store because first is painted the combobox and then is charged with the store data I was erasing data in a empty store.
I am currently adding flagging functionality to a project of mine, and I can't get jQuery's $(this) selector to work.
The goal of this is to change the text in the div from flag to flagged when the user clicks it, and the ajax query runs successfully. My HTML/PHP is:
<div class="flag" post_to_flag='".$post_to_flag."'>Flag</div>
And my javascript that deals with the div is:
$('.flag').live('click', function () {
$.post('../php/core.inc.php', {
action: 'flag',
post_to_flag: $(this).attr('post_to_flag')
}, function (flag_return) {
if (flag_return == 'query_success') {
$(this).text('flagged');
} else {
alert(flag_return);
}
});
});
I can't replace the text with flagged, but if I replace the this selector with the .flag selector, it will replace everything with the class of flag on the page.
I have checked, and the $(this) selector is getting the attribute of 'post_to_flag' just fine. Why is this happening, and how can I fix it?
You should add a context variable:
$('.flag').live('click', function () {
var $context = $(this);
$.post('../php/core.inc.php', {
action: 'flag',
post_to_flag: $context.attr('post_to_flag')
}, function (flag_return) {
if (flag_return == 'query_success') {
$context.text('flagged');
} else {
alert(flag_return);
}
});
});
You are calling multiple functions within your jQuery selection call. When you go into that $.post() function, your scope changes. this now refers to a different scope from when you were inside one().
#Moak's suggestion, if you set a variable to a jQuery object, it's probably best to denote the variable with a beginning $ just for potential clarity for future readers or yourself.
this inside the ajax callback is not the element, but it is the Ajax object itself.
You can use $.proxy to pass in the context.
Ref $.proxy
$('.flag').live('click', function () {
$.post('../php/core.inc.php',
{action: 'flag', post_to_flag: $(this).attr('post_to_flag')},
$.proxy(function(flag_return) {
if(flag_return == 'query_success'){
$(this).text('flagged'); //Now this here will represent .flag
}else{
alert(flag_return);
}
},this)); //Now here you are passing in the context of `.flag`
I use jquery ajax. I have created function: getDatalist ();
This function displays a table with data. I use this function on multiple places on your page. When you make a change in one table, I would like to see change in others. How to rebind all the tables? Is it a trick?
Thank you very much.
getDatalist: function(dataid)
{
$.post('ActionScripts/Load.php',{
}, function(data) {
$(dataid).html(data);
});
},
if you have all table ids or classes you can use each.
var ids = ["id1", "id2", "id3"]
getDatalist: function(dataid)
{
$.post('ActionScripts/Load.php',{
}, function(data) {
$.each(ids,function(index, value){
$("#"+value).html(data);
})
// or u can give same class name table then find and re insert them.
//for same class usage
//$(".commonTable").each(function(){
//$(this).html(data);
//})
});
}
I'm trying to bind an onChange event of one FilteringSelect to populate another FilteringSelect.
// View
dojo.addOnLoad(function () {
dojo.connect(dijit.byId('filterselect1'), 'onChange', function () {
dijit.byId('filterselect2').store = new dojo.data.ItemFileReadStore(
{ url: "/test/autocomplete/id/" + dijit.byId("filterselect1").value }
);
});
});
The JSON is generated from what I can tell correctly from a Zend Action Controller using a autoCompleteDojo helper.
// Action Controller
public function autocompleteAction()
{
$id = $this->getRequest()->getParam('id');
$select = $this->_table->select()
->from($this->_table, array('id','description'))
->where('id=?',$id);
$data = new Zend_Dojo_Data('id', $this->_table->fetchAll($select)->toArray(), 'description');
$this->_helper->autoCompleteDojo($data);
}
I receive the JSON from the remote datastore correctly, but it does not populate the second FilteringSelect. Is there something else I need to do to push the JSON onto the FilteringSelect?
I couldn't believe this was causing the problem, but the whole issue boiled down to the fact that it appears that a dojo ItemFileReadStore REQUIRES the label property of the JSON to be "name". In the end this is all that it required to wire them together.
dojo.addOnLoad(function () {
dijit.byId('filtering_select_2').store = new dojo.data.ItemFileReadStore({url: '/site/url'});
dojo.connect(dijit.byId('filtering_select_1'), 'onChange', function (val) {
dijit.byId('filtering_select_2').query.property_1 = val || "*";
});
});
UPDATE: The property within Zend form has been fixed as of ZF 1.8.4
Try console.log() in the event to see if it is launched. Changing the store should work, however for other widgets like grid you have also to call refreshing methods.