I'm using Bootstrap 3.2.0 and jQuery 2.1.1.
I've implemented typeahead search suggestions and now wanted to go a step further. I am using the remote method and was hoping to send more than just the query to the PHP that will run a SQL script:
$(function() {
var productEngine = new Bloodhound({
datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.value); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
remote: { url: 'php/product_suggest.php?storeid='.concat(localStorage.getItem('store_id'), '&query=%QUERY') }
});
productEngine.initialize();
$('input#product_suggest').typeahead(null, {
displayKey: 'value',
source: productEngine.ttAdapter()
});
});
I've also tried building the URL and saving as a variable. Then attempting to call that variable in the remote.
remote: { url: builtURL }
As I don't particularly know how this url is being parsed and used or how the %QUERY is being added, I'm assuming my issue lies in my lack of knowledge around how typeahead is processing this.
I thought this would be a fairly common request, but Google has let me down. Anyone have any suggestions or can point me towards examples of sending additional info with a typeahead query?
Related
I am new to Casperjs, phantomjs .I have been trying hard to create some page automation to login and take some steps in a CMS but i am having issues with accessing the global window variables from casperjs evaluate() function. the below example is just checking jquery on Google. Jquery exists in the page and some other global functions but i can't access them from casperjs.
casper.start('https://www.google.ca/#hl=en', function() {
// search for 'casperjs' from google form
this.fill('form[action="/search"]', { q: 'casperjs' }, false);
});
casper.then(function() {
this.evaluate(function jquery() {
console.log('looking for jquery ---');
console.log($ + 'exists');
});
});
getting error - `ReferenceError: Can't find variable: $
How can i fix this ?
Any help is appreciated :)
For use jQuery in casperjs
inject script in page, something like:
var casper = require('casper').create({
some code here,
clientScripts: ['/path/to/jquery.js'],
});
I'm trying to automate an application that uses form security in order to upload a file and then scrape data from the returned HTML.
I started out using the solution from this question. I can define my steps and get through the entire workflow as long as the last step is rendering the page.
Here are the two steps that are the meat of my script:
function() {
page.open("https://remotesite.com/do/something", function(status) {
if ('success' === status) {
page.uploadFile('input[name=file]', 'x.csv');
page.evaluate(function() {
// assignButton is used to associate modules with an account
document.getElementById("assignButton").click();
});
}
});
},
function() {
page.render('upload-results.png');
page.evaluate(function() {
var results = document.getElementById("moduleProcessingReport");
console.log("results: " + results);
});
},
When I run the script, I see that the output render is correct. However, the evaluate part isn't working. I can confirm that my DOM selection is correct by running it in the Javascript console while on the remote site.
I have seen other questions, but they revolve around using setTimeout. Unfortunately, the step strategy from the original approach already has a timeout.
UPDATE
I tried a slightly different approach, using this post and got similar results. I believe that document uses an older PhantomJS API, so I used the 'onLoadFinished' event to drive between steps.
i recomend you use casperjs or if you use PJS's webPage.injectScript() you could load up jquery and then your own script to do form input/navigation.
I have an ExtJS4 site www.mysite.com where I serve index.html when a user enter the site. I want the user to be able to access the site with some param data redirected from another site. For example, www.mysite.com?q=10
How do I capture q=10 which I will use to retrieve some data from the database?
How do I send index.html so that browser retrieves javascript and css files. Once all the javascript and css files are loaded, I need to render a page displaying the result from the database?
Thanks
To get the url parameters I've done this :
var getParams = document.URL.split("?");
var params = Ext.urlDecode(getParams[getParams.length - 1]);
console.log(params.q) // you should see 10 being printed
If index.html is gonna come with some param in the url you can use the launch method to do an ajax request and bassed on that response render something
Ext.application({
name : 'MyAppWithDynamicFirstPage',
launch : function() {
var getParams = document.URL.split("?");
var params = Ext.urlDecode(getParams[getParams.length - 1]);
var q = params.q;
Ext.Ajax.request({
url: 'someServlet/getViewToRender',
params: {
'q': q
},
success: function(response, opts) {
//bassed on this you would do something else like render some specific panel on your viewport
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}
});
I hope this was of some help.
Best regards.
Depends of your web server, programming language and architecture
Usually first ExtJs is loading with all js/css. After it loaded, data loads asynchronously from the server. But if you exactly know what are you doing, you can render your data into a global variable inside a script tag and then use it in the code.
I am making a web application using dojo toolkit and heres my code
dojo.ready(
function(){
dojo.declare("Main",null,{
_dialog:null,
constructor: function()
{
dojo.require("dijit.Dialog");
},
make_dialog: function(url)
{
_dialog= new dijit.Dialog({
href:url,
});
_dialog.show();
}
}); // class ends
temp=new Main();
});// dojo.ready ends
My problem is that when I load dijit.Dialog it is loading various js files( 20 plus) like
tooltip.js,backgroundIframe.js taking about 60kb alone. I want to ask is it dojo normal behaviour or I am doing
And my main problem Is that it making 55 different request. Please help me.
A custom build will package everything up into a fewer files.
http://dojotoolkit.org/reference-guide/quickstart/custom-builds.html
I'm building a sort-of clone of CoverItLive in Rails 3.1 and want to have the stream of comments automatically update. I'm using a partial in the view to display comments. There's a lot of info out there on doing UJS and AJAX wit forms or buttons or links in Rails, but I can't find any specific examples for what I need to do.
I'm assuming that .ajax() is the best approach, but I've never used it before and not sure if I need to provide .js.erb files when using this particular function? Could I just have the controller send JSON back to the client and go from there, or is there a better approach in rails?
This is what I'm thinking so far, based on what I read at another question:
setInterval(function() {
$.ajax({
type: 'GET',
url: ''<%= comments_path(:json) %>'',
data: {
data: "comments_data"
},
cache: false,
success: function(result) {
if (result == "true"){
alert("true");
}else{
alert("false");
}
}
});
}, 3000);
As an alternative you should look into Private Pub, a gem that Ryan Bates has put togeather. See a screencast about it on railscasts.
The trouble with your solution is now often you server will be hit unnecessarily, i guess it depends on the number of concurrent users you thing will be viewing this page.
if you do go down your route the .js.erb could just have a somthing like this in it:
$('#id_of_area_to_replace').html("<%= escape_javascript(render"comments/index") %>")
This would replace the whole area else you could just append new comments to the bottom of the area