currently im having problems with the jquery form plugin. Part of this because i need to change the hash value on form submit. Heres the basic of what im doing:
$(document).ready(function() {
$('#search').ajaxForm({
target: '#pageContent',
success: function() {
$('#pageContent'); //this is all i need to 'ajaxify' this form
var hash = 'query='+encodeURI(document.getElementById('query').value);
window.location.hash = hash;
}
});
});
Now what happens is i am able to change the hash value but my form no longer 'ajaxify's itself and instead i just get a blank page..
What am i doing wrong?
since no-one had a suitable answer i managed to hack my implementation of jquery.history.js to allow searching via ajax.. heres the code:
$(document).ready(function() {
// bind form using ajaxForm
$('#search1').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#pageContent',
// success identifies the function to invoke when the server response
success: function() {
$('#pageContent');
var hash = '#search.php?term='+($('#query').val()+'&submit=Submit').replace(/ /g, '+');
update(window.location.hash = hash);
}
});
});
i also replaced the spaces in the search to include + signs.. maybe this will help someone.
Try adding an actual hash, denoted by #:
$(document).ready(function() {
$('#search').ajaxForm({
target: '#pageContent',
success: function() {
var hash = '#query='+encodeURI($('#query').val());
window.location.hash = hash;
}
});
});
Related
I am new to Protractor (and Javascript by the way), and I am writing some tests to practice. My goal so far is to check that when I click on the home button of a website, the redirection leads me correctly to the expected address.
I have written this:
var HomeTopBanner = function() {
this.homeUrl = browser.params.homePageObject.homeUrl;
this.topBanner = element(by.css('.navbar-inner'));
this.homeButton = this.topBanner.element(by.css('.icon-home'));
}
describe('Home button', function(){
var homeTopBanner = new HomeTopBanner();
var newUrl = '';
it('clicks on the Home button', function(){
homeTopBanner.homeButton.click();
browser.getCurrentUrl().then(function storeNewUrl(url) {
newUrl = url;
});
})
it('checks that the home button leads to the homepage', function(){
expect(newUrl).toEqual(homeTopBanner.homeUrl);
})
});
This works, but my question is:
Why do I need to separate the "GetCurrentUrl" and the "expect(newUrl)" parts? I would prefer to have both of them in the same spec, but if I do that, during the comparison of the expect, newUrl=''
I assume this is related to browser.getCurrentUrl() being a promise, but is there a better way to do it?
Yes, getCurrentUrl returns a promise with the url in the form of a string as explained in the protractor api docs. You have to wait until the url is returned in order to use it. Now in order to combine both the specs you can write your expect statement inside the function that getCurrentUrl returns as shown below and there is no need of using a newUrl variable too if you want -
it('clicks on the Home button', function(){
homeTopBanner.homeButton.click();
browser.getCurrentUrl().then(function(url) {
expect(url).toEqual(homeTopBanner.homeUrl);
});
})
There could also be another issue when after the click action the previous url is being captured due to the fact that protractor is async and fast. In that case you can write your getCurrentUrl() function inside the promise that click() function returns. Here's an example of it -
it('clicks on the Home button', function(){
homeTopBanner.homeButton.click().then(function(){
browser.getCurrentUrl().then(function(url) {
expect(url).toEqual(homeTopBanner.homeUrl);
});
});
})
Hope this helps.
I'm using the jQuery ajax form plugin in my WordPress plugin's settings page. Before I started using ajax, I had this script that compared text input values to placeholder values, and if they matched, set the text input value to null. But it no longer works now that I'm using ajax. With the jQuery ajax form plugin, I can pass arguments in a beforeSerialize function, or in a beforeSubmit function. I think it would need to be done in the beforeSerialize. Anyway, I'm not sure how to make this work. Here is the script that was working before I switched to ajax:
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('ssfa-placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
And here is my current script for the ajax form submit:
var svn = $("#ssfa-saving"),
bck = $("#ssfa-saving-backdrop"),
svd = $("#ssfa-settings-saved");
$("#ssfa-form").ajaxForm({
beforeSend: function() {
svn.fadeIn('slow');
bck.fadeIn('fast');
},
success: function(){
svn.fadeOut('slow');
svd.delay(1000).fadeIn('slow').delay( 2500 ).fadeOut('slow');
bck.delay( 4500 ).fadeOut('slow');
}
});
Any ideas on how I can get the ajax submit (either beforeSerialize or beforeSend ) to ignore placeholder values? This first script above was a really simple solution for regular post submit. I'm hoping I can find something just as simple for ajax.
UPDATE
I worked out a basic way of doing it but it involves calling each text field that has a placeholder, so it's not exactly elegant like the original script, but this is functional:
$("#ssfa-form").ajaxForm({
beforeSerialize: function() {
var permex = $('input#exclusions');
$('input[id^=bs]').each(function(){
var bs = $(this);
if (bs.val() === 'Display Name')
bs.removeAttr('value');
});
$('input[id^=custom_]').each(function(){
var cs = $(this);
if (cs.val() === 'classname1|Display Name 1, classname2|Display Name 2')
cs.removeAttr('value');
});
if (permex.val() === '.avi, My Embarrasing Photograph, .tif')
permex.removeAttr('value');
},
beforeSend: function() {
etc.
And since it's a placeholder text, the text doesn't actually disappear when the value attribute is removed, so no one is really the wiser. I'm not over the moon with this, but it works. If I had a much larger form, this wouldn't be workable.
Open to better ideas....
Well, I played around with it quite a bit more and found a way to get the original code to work with ajax submit. It's quite simple actually. I just had to specify the element within which to search for the placeholder attr. Here it is:
beforeSerialize: function() {
$("#ssfa-form").find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
},
etc.
To track the issue, see:
https://github.com/mathiasbynens/jquery-placeholder/issues/30
https://github.com/mathiasbynens/jquery-placeholder/issues/197
In my code I disable the submit button with jquery and then do a check to enable it. It works fine but not in IE. Could some please help me out, Thanks
function checkPassword() {
$('input#password').mouseout(function(){
var password =$('#password').val();
//event.preventDefault();
//alert(password);
$.ajax({
type: "POST",
url: "ajax/pass.php",
cache: false,
datatype:"html",
data: "password="+ password,
success: function(msg){
if (msg) {
$('#feedbk').html(msg);
var name = $('#feedbk').text().length;
var valid = 'Valid Password.';
var n = valid.length
if (name == n) {
$('#submit').attr("disabled", false);
$('#feedbk').fadeOut(3000);
} else {
$('#submit').attr("disabled", true);
}
}
}
});
});
};
The solution is to use regular javascript
var el = document.getElementById(selectBoxCheckBoxOrButtonID);
el.removeAttribute('disabled');
I used straight JavaScript to sort out the problem
document.getElementById('selectBoxCheckBoxOrButtonID').removeAttribute('disabled');
Thanks #user843753 your solution work marvelously.
I am reiterating it here because I cannot comment at the moment and it looks so non- intuitive (What! not a jquery solution).
But why oh why is it not fixed in JQuery 1.6.2?
My original issues with IE include, re-enbled disable buttons, only be made visible on mouse-over.
In another case the re-enabled disabled buttons could not made visible with any user interaction.
I'm trying to manipulate forms with Mootools. My purpose is to inject the response content of a form into a div element named result.
Here a code that works, but it replaces the content of the result div. This is not what I want : I want to ADD the form response content to the result div existing content. I just can't find on the web how to do this, and I've tried many things that are not working ... Please help
window.addEvent('domready', function() {
$('myform').addEvent('submit', function(e) {
e.stop();
var result = $('result').empty();
this.set('send',{
url: this.get('action'),
data: this,
onSuccess: function() {
result.set("html", this.response.text);
}
}).send();
});
});
If it's only text you want to add, just remove the empty method, and replace result.set() with result.appendText().
If you need to append an element tree, repeat the first step, and do:
onSuccess: function(){
Elements.from(this.response.text).inject(result);
}
Btw. It's all in the documentation - http://mootools.net/docs/core/Element/Element
I am trying to get the Jquery UI autocomplete working on AJAX loaded dynamic fields in div #right
I do not fully understand the code below.
$("#right").delegate(".drugName", "focus", function(){
//attach autocomplete
$(".drugName").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON("druglist.php?callback=?", req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
suggestions.push(val.name);
});
//pass array to callback
add(suggestions);
});
},
});
});
But it works in Chrome/FF. However it seems to be killing AJAX loading in Internet Explorer causing the application to be non - functional
The error returned is
SCRIPT1028: Expected identifier, string or number ajaxfunctions.js, line 41 character 6
The error in the console refers to the brackets on the second last row.
I tried to work this out using the documentation, but couldnt get it to work :-(
Whats happening with the code & IE?
Pls help.
//pass array to callback
add(suggestions);
});
}, //OK the comma here was the problem
});
Got it working. this helped