I use a tabView component with many tabs. In many of them, I have form which are submitted by primefaces commandButton component.
By default, PF commandButton using ajax mode but when I submit my form, my page seems to be fully loaded and my tabView component lost its index view (index 0 is rendered).
Is that normal behaviour please ?
I though that I would stay in the same index because it's ajax...
Looks like there is some naming container (p:tabView maybe) that you better assign an id to it , so instead of getting prefix like j_idt16 (which could vary from time to time) you will get myTab0 , myTab1 etc prefix...
for example <p:tabView id="myTab"
Another thing you could do to be on the safe side is checking if the element exists before trying to select it with jquery and access its value, like this
if($('#j_idt16\\:register_location_choice_2_input').length > 0){
//some code here
}
Ok, my problem is the JS validateRegisterForm function. When I remove it, it works but I need it...
I use it to check if validation form can be launched.
function validateRegisterForm(){
if($('#j_idt16\\:register_location_choice_2_input').attr('checked')){
if($('#j_idt16\\:register_galaxies_input').val() == 0){
var galaxie = MUST_CHOOSE_GALAXY;
alert(galaxie.charAt(0).toUpperCase() + galaxie.slice(1));
return false;
}
if($('#j_idt16\\:register_solar_systems_input').val() == 0){
var ss = MUST_CHOOSE_SOLAR_SYSTEM;
alert(ss.charAt(0).toUpperCase() + ss.slice(1));
return false;
}
if($('#j_idt16\\:register_positions_input').val() == 0){
var position = MUST_CHOOSE_POSITION;
alert(position.charAt(0).toUpperCase() + position.slice(1));
return false;
}
}
return true;
}
So how can I check fields values before sending and allowing or not validation form with ajax please ?
EDIT :
Ok, I solved my problem by launching validation inside my JS function with button type passed to button not submit and using remoteCommand component :
My JS function :
function validateRegisterForm(){
if(...)
validateForm();
}
And my remoteCommand :
<p:remoteCommand name="validateForm" actionListener="#{login.registerAccount()}"/>
Related
I am using in one of the lightning components and I am using it to filter a table. But when I'm trying to get its value in JS controller with the keyup function, it's giving one less value than actual.
This question has been already asked for HTML here , But for HTML, we have a solution that we can use onkeyup instead of keyup.
But in salesforce lightning, we don't have any onkeyup function for ui:inputText Source ,
So how to solve this issue?
I have already tried keypress, keyup, keydown.
All are giving one less value than actual one
Component :
<ui:inputText aura:id="search-phrase" class="slds-input" keyup="{!c.filterTable}" placeholder="Search Table" />
JS Controller :
, filterTable :function(component, event, helper) {
var dynamicVal = component.find("search-phrase");
var week = dynamicVal.get("v.value") ;
alert((week+'').toLowerCase());
var searchTerm = (week+'').toLowerCase() ;
$('#userTbl tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
}
I found it's solution.
Just need to add updateOn="keyup" in <ui:inputText>
So new one will become :
<ui:inputText aura:id="search-phrase" class="slds-input" updateOn="keyup" keyup="{!c.filterTable}" placeholder="Search Table" />
Include updateOn attribute to ui:inputtext control. By default, it is mapped to change event so you will get only the exact value when the change event fires. updateOn="eventName"
event details : enter link description here
I'm using Laravel and I have a dropdown which fills its options from the database on load page and another text field.
Then on the submit I validate the text field to avoid empty entries, the validation is based on the request validator from Laravel. The validation is made correctly.
The problem is that when the validation is completed (it doesn't submit because i keep the text field empty) it returns to the page, but the dropdown remains selected with the last selection by the user, but in the back(sourcecode), its selected the original value that was loaded originally.
I want that the selectedIndex is the one original from the load page, not the last one selected. I tried with javascript but I had no luck change in it since it's already as the selectedIndex, but to the user, it still showing the other option. If I refresh manually it still showing the selected one incorrectly, I need to enter the URL manually so it shows correctly.
What could be a good approach to solve this "visual" issue?
Here is the controller code
public function update($user_id,GuardarBancoRequest $request)
{
$cuenta = user::whereId($user_id)->first();
$cuenta->nombrecompleto = Input::get('completo');
$temp = Input::get('tipo');
$cuenta->tipocuenta = Input::get('tipo');
$temp1 = Input::get('banco');
if ($temp == "1") {
$cuenta->cuentaclabe = Input::get('clabehidden');
$cuenta->cuentatarjeta = Input::get('cuentahidden');
} else {
$cuenta->cuentatarjeta = Input::get('cuentahidden');
$cuenta->cuentaclabe = Input::get('clabehidden');
}
if ( $temp1 == "10") {
$cuenta->otrobanco = Input::get('otro');
$cuenta->banco = "10";
} else {
$cuenta->banco = Input::get('banco');
$cuenta->save();
}
return Redirect::route('bancos.show',array(Auth::user()->id));
}
The dropdown that I'm referring is the [tipo] one
It's hard to presume without getting a chance to look at your code, but it sounds like when you do a redirect after validation you have something like
return redirect()->back()->withInput(); which causes fields to be prepopulated with the values entered earlier on the page. Remove withInput() portion in your controller if you have this.
Otherwise please mind posting your code in addition to your question, that would be helpful. (the controller part with the redirection and the view where you have the dropdown)
I'm trying use HtmlUnit to submit a form, there are two select in my form, when i selected the first select, his call a function ajax and load the second select, follow my code:
HtmlPage page5 = anchor.click();
HtmlForm form = page.getFormByName("form1");
HtmlSelect state = form.getSelectByName("ddlMarca");
state.setSelectedAttribute(state.getOptionByValue("56"), true);
state.fireEvent(Event.TYPE_CHANGE);
HtmlSelect city = form.getSelectByName("ddlModelo");
for (HtmlOption option : city.getOptions()) {
System.out.println("city : "+option.asText()+" valor: " +option.getValueAttribute());
}
I'm using the method fireEvent to call event change, but does't work, How I can do this event work?
It may be working but you're not giving the browser time to make the ajax call, get a response and edit the dom. If the page makes an ajax call after firing the change event, try letting the page wait for a moment before checking again.
I haven't tested the below code so I can't say for certain this will solve you're issues, but I have used this technique to solve a similar issue.
You'll have to find something on the page that changes when the ajax call is completed for this to work. From the above question I'm assuming that changing one select populates the 2nd select box.
state.fireEvent(Event.TYPE_CHANGE);
//try 20 times to wait .5 second each for filling the page.
for (int i = 0; i < 20; i++) {
if (condition_to_happen_after_js_execution) {
break;
}
synchronized (page) {
page.wait(500);
}
}
HtmlSelect city = form.getSelectByName("ddlModelo");
for (HtmlOption option : city.getOptions()) {
System.out.println("city : "+option.asText()+" valor: " +option.getValueAttribute());
}
Example pulled from: http://htmlunit.sourceforge.net/faq.html#AJAXDoesNotWork
I have used Ajax.BeginForm / Html.BeginForm for a view which sends an object to the controller on clicking submit. There are some telerik controls which are disabled conditionally. On clicking submit, the object is unable to retrieve the already existing value in the control since it is disabled. Hence object is made with null values. Any help?
Im using jquery to disable these telerik controls on loading the page.
Change.setDropDownValues = function () {
if (condition) {
$("#A").data('tDropDownList').enabled = false; $("#A").data('tDropDownList').disable();
}
}
else if (condition) {
$('#Pop').attr('disabled', 'disabled'); //text box
$('#ShortDesc').attr('disabled', 'disabled'); //textarea
$('#LongDesc').attr('disabled', 'disabled'); //text area
$('#Cont').attr('disabled', 'disabled'); //text box
$('#iDate').attr('disabled', 'disabled'); //datepicker division
$('#C').data('tDropDownList').enabled = false; //drop down list
$('#C').data('tDropDownList').disable();
}
};
Can anyone say how to remodify so that I can fetch the disabled field values?
That's how disabled inputs work. They never send the value to the server. You could use readonly instead if you want to prevent the user from modifying the value and yet send the old value to the server when the form is submitted.
you can use something like this
$(":disabled", $('#yourform')).removeAttr("disabled");
before submit.
Here is the problem:
By default jQuery Mobile is using GET requests for all links in the application, so I got this small script to remove it from each link.
$('a').each(function () {
$(this).attr("data-ajax", "false");
});
But I have a pager in which I actually want to use AJAX. The pager link uses HttpPost request for a controller action. So I commented the above jQuery code so that I can actually use AJAX.
The problem is that when I click on the link there are two requests sent out, one is HttpGet - which is the jQuery Mobile AJAX default (which I don't want), and the second one is the HttpPost that I actually want to work. When I have the above jQuery code working, AJAX is turned off completely and it just goes to the URL and reloads the window.
I am using asp.net MVC 3. Thank you
Instead of disabling AJAX-linking, you can hijack clicks on the links and decide whether or not to use $.post():
$(document).delegate('a', 'click', function (event) {
//prevent the default click behavior from occuring
event.preventDefault();
//cache this link and it's href attribute
var $this = $(this),
href = $this.attr('href');
//check to see if this link has the `ajax-post` class
if ($this.hasClass('ajax-post')) {
//split the href attribute by the question mark to get just the query string, then iterate over all the key => value pairs and add them to an object to be added to the `$.post` request
var data = {};
if (href.indexOf('?') > -1) {
var tmp = href.split('?')[1].split('&'),
itmp = [];
for (var i = 0, len = tmp.length; i < len; i++) {
itmp = tmp[i].split('=');
data.[itmp[0]] = itmp[1];
}
}
//send POST request and show loading message
$.mobile.showPageLoadingMsg();
$.post(href, data, function (serverResponse) {
//append the server response to the `body` element (assuming your server-side script is outputting the proper HTML to append to the `body` element)
$('body').append(serverResponse);
//now change to the newly added page and remove the loading message
$.mobile.changePage($('#page-id'));
$.mobile.hidePageLoadingMsg();
});
} else {
$.mobile.changePage(href);
}
});
The above code expects you to add the ajax-post class to any link you want to use the $.post() method.
On a general note, event.preventDefault() is useful to stop any other handling of an event so you can do what you want with the event. If you use event.preventDefault() you must declare event as an argument for the function it's in.
Also .each() isn't necessary in your code:
$('a').attr("data-ajax", "false");
will work just fine.
You can also turn off AJAX-linking globally by binding to the mobileinit event like this:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
Source: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html