Develop Reference

Change content of a w2ui html field

I have a w2ui popup form with a field definition is like this:
{ field: 'step', type: 'html', html: { label: '', column: 'before', span: 0, html: "xx" } },
On runtime I want to change the content of that field. It is not (directly) based on a record, I would say it is an arbitrary html div. For the sake of simplicity let's say let replace the value "xx" with "coucou"
in the onOpen event ot the popup I'v tried the followings:
w2ui.DocForm.set('step', {html: {html: "coucou"}});
It didn't work, so I tried this:
w2ui.DocForm.fields[0].html.html = "coucou"
with and without w2ui.DocForm.refresh(); after that
The content didn't change. Any idea?

Finally I've found a solution.
Once I've modified the html field like this: w2ui.DocForm.fields[0].html.html = "coucou", instead of calling refresh(), I had to call
w2ui.DocForm.formHTML = w2ui.DocForm.generateHTML();
That was the trick.
I do not understand why it working this way, while for all the other record based fields on the other way, but at least it's working now.

How to get modified text from input JQuery or javascript

I'm having a problem getting modified text from input. The input is loaded with some text I get from a database and with an option i should take the onlyread attr off and change the values. Thats ok but when i click on the save button after writing something else in the inputs, it gets the old values with .val(). How can i get the new ones?
The code is something like this.
var anInput = $("#anInput").val(); //gets old value
var otherInput = $("#otherInput").val(); //gets old value
$.ajax({
type: "POST",
dataType: "html",
success: doSomething,
timeout: 4000,
error: someProblems,
url: "modules/mod.php",
data: {anInput: anInput, otherInput: otherInput}
});
I added the AJAX code just to mention that i need the values to do something. AJAX is working.
I know this can be done with a form but that will reload the page and I don't want that.
Sorry for my rusty English and thanks :)
EDIT: Perhaps I'm not correctly speaking when saying "change the values" what I'm doing is selecting the text and writing something else.
I show some information with the inputs, click a button that allows me to modify, type some new text in the inputs and then click "save"
HTML is genereted by another AJAX
<div class="infoVideo">
<input id="anInput" value="someTextFromDataBase">
<input id="otherInput" value="someTextFromDataBase">
<input type="button" id="btnMod">
<input type="button" id="btnSave">
</div>
If I erase and type something else in the input .val() is getting old someTextFromDataBase

Edit: As per a guess in my comments, there was more than one #anInput in the page so the code was only retrieving the value from the first one which was not the one being edited. The solution is to not have any duplicate id values in the HTML of the page.
I suspect that your code isn't really like you show. You are probably doing these:
var anInput = $("#anInput").val(); //gets old value
var otherInput = $("#otherInput").val(); //gets old value
only once and then trying to use anInput and otherInput much later when the form fields have already changed. You can get the current values by not caching those and just retrieving the current values when you need them by changing this:
data: {anInput: anInput, otherInput: otherInput}
to this:
data: {anInput: $("#anInput").val(), otherInput: $("#otherInput").val()}
That way, you are always retrieving the latest and greatest values right before your Ajax call.

Please confirm format of data returned by mod.php. The AJAX block is expecting to receive HTML formatted text dataType: 'html', -- but you are sending json, so is that what you are expecting back?
If this note doesn't reveal the solution, then please show us your doSomething function - that's where the returned data is handled.
Probably you've tried this already, but what happens if you do this:
var anInput = $("#anInput").val(); //gets old value
alert(anInput);
var otherInput = $("#otherInput").val(); //gets old value
alert(otherInput);
$.ajax({ //etc });

passing value of select to jQuery UI autocomplete

I have select control and input with jQuery UI autocomplete.
<select name="labels">
...some options
</select>
<input type="attr_type_input" class="attr_autocomplete ui-autocomplete-input">
<input type="attr_value_input" class="attr_autocomplete ui-autocomplete-input">
The values shown in autocomplete should depend on the value of select.
My javascript code looks like:
$(document).ready(function(){
$( ".attr_autocomplete" ).each(function(){
var type=$(this).attr("type");
$(this).autocomplete( {
serviceUrl: '?',
params: {
action: 'attr_autocomplete',
type:type,
label:$("select[name=labels]").val()
}
});
});
});
The problem is that label value passed to server is always the same, even if I change the select. As far as I understand this data structure is formed once on page load.
The question is - how to pass actual value of select?

You are correct, this structure is being initialised with the starting value of the select on page load. You can switch to using a function for the source parameter:
$(".attr_autocomplete" ).each(function(){
var type=$(this).attr("type");
$(this).autocomplete({
source: function(req, autoCallback) {
$.get('?', {
term: req.term,
action: 'attr_autocomplete',
type:type,
label:$("select[name=labels]").val()
}, function(response) {
//perform any transforms needed on the data, then:
autoCallback(response);
//autoCallback is expecting an array of strings to display
});
}
});
});
This function is then executed whenever the autocomplete wants data, and so it will read the value of the select each time, rather than when it's initialised.

you are not retrieving the value of select after change
try this way
$("select[name=labels]").change(function(){
var changeValue=this.value;
});
demo

I just had this issue and came up with this solution. Just another way to handle it.
If you want to have an autocomplete result set based on the value in another field in the form you can do this:
$(document).ready(function(){
$('#alpha').change(function(){setLibraryAutoComplete();});
setLibraryAutoComplete();
});
function setLibraryAutoComplete(){
$('#beta').autocomplete({source: "TypeAhead?param1=ABC&param2="+$("#alpha").val()});
}
This sets up the auto complete on page load with the value from the field but then also causes the autocomplete call to update any time the source field value changes.

Getting JS to set post data

I'm currently working a page that lists a lot of users inside a table using a role id.
The role id value is gathered using the select dropdown and then pressing submit. This shows the table below with all the users with that specific role. The way this is done is that when the form is submitted, the id is returned inside the $_POST of my select box. What i want to do is not use a submit button at all, I want to be able to scroll through the different roles, and when I click on a different role within the select, it update the table below automatically without needing to post.
Let's say my select box is called role:
<select id="role">
And the options are:
id: 1, name: blah1
id: 2, name: blah2
I have been working on trying to get this work using ajax and posting the data back to PHP using the change function. Here is my code:
$(document).ready(function() {
$('#role').change(function(){
var role_id = $('#role').val();
$.ajax({
url: 'assign-roles-2.php',
data: {"roleID":role_id},
type: 'post',
success:function(data){
$('#section').slideDown();
}
});
});
$('#role').trigger("change");
});
I have this in PHP also:
$role_id = trim($_POST["roleID"]);
But this returns as null. How would I go about getting the value I get from the select input and use it to set this role_id variable in PHP without submitting a form?

I am assuming that your description of your option elements: id: 1, name: blah1 does not reflect their markup and that they are defined like so...
<option value="1">blah1</option>
If so, then the following should work fine.
var role_id = $('#role').find('option:selected').val();

Clearing bootstrap editable forms

I am currently using bootstrap editable for the front end of my application.
See plugin: http://vitalets.github.io/x-editable/index.html
What I am doing is loading data onto a page via Ajax and allowing each item on the page to be editable. For example; I load a user onto a page and allows for his first name, last name and date of birth to be editable.
Because I am loading via Ajax, when a second user is loaded for example or third and i try to edit the first name etc, I keep getting the values of the first user loaded initially.
I am presuming it may be cache. I have tried setting display on the function and even auto-text.
Is there anyway I can reset or clear the editable form?
see sample code below:
function editable(obj) {
$('#title, #lastName, #firstName).editable('option', {
pk: obj.lId,
placement: 'bottom',
emptytext: 'Empty',
display: function(value) {
$(this).text(value);
},
validate: function(value) {
if ($.trim(value) === '') {
return 'This field is required';
}
}
});
}

Assuming that obj is your new user, and it contains the title, last name, and first name of the new user, all you have to do is set the values of the x-editable objects:
$('#title').editable('setValue', obj.title);
$('#lastName').editable('setValue', obj.lastName);
$('#firstName').editable('setValue', obj.firstName);
The reason why your example is not working is because x-editable separates the display from the actual value. Your display function is called whenever the user changes an x-editable value. By default, x-editable displays whatever the value is set to. But perhaps the internal value is different from a displayed value, that is what the display function is used for - it has no impact on the actual value, just the display of the value.
X-Editable has a lot of different methods you can take advantage of, you can find them on the 'Methods' tab here: http://vitalets.github.io/x-editable/docs.html#editable