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
Related
I’m hoping to be able to use Infinite Ajax Scroll for a project I’m working on.
I’ve been looking at the Infinite Scroll JSON example here (https://infiniteajaxscroll.com/examples/json/) and I’m finding it difficult to understand how it works. I was wondering if there is any further documentation or code examples on how to use a JS or jQuery handler as shown in the example.
Ultimately what I want to do is load my container "items" using my own ajax function and then have Infinite Ajax Scroll display them. I want to do this because my container "items" are not located at URLs, but are saved as Wordpress transients.
Any help I could get with this would be very much appreciated.
Thanks,
David.
Thank you for your question. The docs on using the nextHandler could indeed use improvement. Regardless, I'll try to explain how it works.
Normally IAS uses a selector to find the url of the next page. Then it loads the page and extracts the elements and appends them to the DOM. If you use the nextHandler, you will completely bypass this behavior. That means you will have to fetch data (in this case JSON) yourself and also insert new elements in the DOM.
Here is an example with comments to explain what it does.
First, let's assume our movie(1..n).json has the following format:
[
{
Title: 'item1',
Plot: 'description1'
}, {
Title: 'item2',
Plot: 'description2'
}
]
Now the implementation of the nextHandler:
import InfiniteAjaxScroll from "#webcreate/infinite-ajax-scroll";
function nextHandler(pageIndex) {
// we use the fetch api to load the next page. Any http client library will do, like axios.
return fetch("./static/movies"+pageIndex+".json")
// use the response as json
.then((response) => response.json())
// process the actual json data
.then((jsonData) => {
// create an array to store our html elements in memory
let elements = [];
// we loop over the items in our json and create an html element for each item
jsonData.forEach(function (item) {
const template = `<div class="item">
<h1>${item.Title}</h1>
<p>${item.Plot}</p>
</div>`;
const element = document.createElement("div");
element.innerHTML = template.trim();
elements.push(element.firstChild);
});
// now use IAS's append method to insert the elements
// it's import that we return the append result, as it's an promise
return this.append(elements);
})
// page 3 returns a 404, returning false here indicates there are no more pages to load
.catch(() => false);
}
window.ias = new InfiniteAjaxScroll(".container", {
item: ".item",
next: nextHandler,
pagination: false
});
I also prepared an interactive demo on Codesandbox:
https://codesandbox.io/s/serene-einstein-f73em
I have a question regarding how protractor handles the locating of elements.
I am using page-objects just like I did in Webdriver.
The big difference with Webdriver is that locating the element only happens when a function is called on that element.
When using page-objects, it is advised to instantiate your objects before your tests. But then I was wondering, if you instantiate your object and the page changes, what happens to the state of the elements?
I shall demonstrate with an example
it('Change service', function() {
servicePage.clickChangeService();
serviceForm.selectService(1);
serviceForm.save();
expect(servicePage.getService()).toMatch('\bNo service\b');
});
When debugging servicePage.getService() returns undefined.
Is this because serviceForm is another page and the state of servicePage has been changed?
This is my pageobject:
var servicePage = function() {
this.changeServiceLink = element(by.id('serviceLink'));
this.service = element(by.id('service'));
this.clickChangeService = function() {
this.changeServiceLink.click();
};
this.getService = function() {
return this.service.getAttribute('value');
};
};
module.exports = servicePage;
Thank you in advance.
Regards
Essentially, element() is an 'elementFinder' which doesn't do any work unless you call some action like getAttribute().
So you can think of element(by.id('service')) as a placeholder.
When you want to actually find the element and do some action, then you combine it like element(by.id('service')).getAttribute('value'), but this in itself isn't the value that you are looking for, it's a promise to get the value. You can read all about how to deal with promises elsewhere.
The other thing that protractor does specifically is to patch in a waitForAngular() when it applies an action so that it will wait for any outstanding http calls and timeouts before actually going out to find the element and apply the action. So when you call .getAttribute() it really looks like
return browser.waitForAngular().then(function() {
return element(by.id('service')).getAttribute('value');
});
So, in your example, if your angular pages aren't set up correctly or depending on the controls you are using, you might be trying to get the value before the page has settled with the new value in the element.
To debug your example you should be doing something like
it('Change service', function() {
servicePage.getService().then(function(originalService) {
console.log('originalService: ' + originalService);
});
servicePage.clickChangeService();
serviceForm.selectService(1);
serviceForm.save();
servicePage.getService().then(function(newService) {
console.log('newService: ' + newService);
});
expect(servicePage.getService()).toMatch('\bNo service\b');
});
The other thing that I'm seeing is that your pageObject appears to be a constructor when you could just use an object instead:
// name this file servicePage.js, and use as 'var servicePage = require('./servicePage.js');'
module.exports = {
changeServiceLink: element(by.id('serviceLink')),
service: element(by.id('service')),
clickChangeService: function() {
this.changeServiceLink.click();
},
getService: function() {
return this.service.getAttribute('value');
}
};
Otherwise you would have to do something like module.exports = new servicePage(); or instantiate it in your test file.
When you navigate another page, the web elements will be clear, that you selected. So you have to select again. You can select all elements that is in a page of HTML. You can click that you see. So the protactor + Selenium can decide what is displayed.
You have a mistake in your code, try this:
expect(servicePage.getService()).toMatch('\bNo service\b');
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;
}
});
});
Here is the exact copy of my code: jsFiddleCode
As you can see I have a two sortable connected lists and when some item is dropped to them they execute functions subFunction and unsubFunction respectively. Now, I also have the code for doubleclicking one of the items so that then they are put in the opposite list (the function switchLists() takes care of that.
Now, what I would like to accomplish here is the same behavior as when the items are dragged and dropped (the alert box appearing and saying exactly (for example): "Item 6 just subed".
My lack of understanding is how can it be that I have the ui available when the function subFunction is called, and not when I call the switchLists. ( I did try to add ui to the call of switchLists like this:
switchLists(e, ui){
//same code as before...
//this code doesn't execute
var itemText= ui.item.text();
alert(itemText + " just subed");
}
But I get an error in FireBug in Firefox saying that the ui is undefined.
You are free to edit the code on fiddle and post it here as a link.
As a more general questions: how does jquery pass variables to other functions? I mean, the code:
receive: subFunction
is called without any arguments, so how does the subFunction get event and ui? If you have some good tutorial on all this, it's appreciated.
Thank you for your help.
After a long day playing with this I finally came to the answer and did it like this: jsFiddle link
In short, I separated the previous function to two functions and I also read a little more about jQuery and found out that in the function I can do $(this) and so access the text of the element.
OK, just for reference the whole code is here:
$(function() {
$( "#sortable1" ).sortable({
connectWith: ".connectedSortable",
receive: subFunction
});
$( "#sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: unsubFunction
});
$(".ui-state-default").dblclick(function() {
$(this).removeClass().addClass("ui-state-highlight");
var litem = $(this).clone();
litem.appendTo($('#sortable2'));
$(this).remove();
$.jGrowl($(this).text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
});
$(".ui-state-highlight").dblclick(function() {
$(this).removeClass().addClass("ui-state-default");
var litem = $(this).clone();
litem.appendTo($('#sortable1'));
$(this).remove();
$.jGrowl($(this).text() + " successfully subed!", {header:"Subscription Status", life: 1000});
});
function subFunction(event, ui) {
ui.item.toggleClass("ui-state-default");
ui.item.toggleClass("ui-state-highlight");
$.jGrowl(ui.item.text() + " successfully subed!", {header:"Subscription Status", life: 1000});
}
function unsubFunction(event, ui) {
ui.item.toggleClass("ui-state-default");
ui.item.toggleClass("ui-state-highlight");
$.jGrowl(ui.item.text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
}
});
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