JQuery and modified autocomplete - javascript

I'm just starting with jquery so maybe there's a really easy way to do this... but I would like to have a form with an input element, where a user can enter a filename, and then next to it a listbox or something similar where it displays the folder(s) in which files that match the input pattern are displayed.
Ideally I wouldnt start searching the folders until I have 3 characters or so as well since there may be a lot of folders.
The autocomplete that comes with jquery out of the box seems to have some of what, I wan't but being a jquery n00b I'm not sure if that is the right way to approach this or I should do something else.
Thanks!
Edit: Here's how I'm getting the folders:
var fso = new ActiveXObject("Scripting.FileSystemObject");
var folder = fso.GetFolder("top/level/directory");
// Iterate over folders
var subFlds = new Enumerator(folder.SubFolders);
var subFolder;
for (; !subFlds.atEnd() ; subFlds.moveNext()) {
subFolder = subFlds.item() + "";
if (subFolder.match(/* My input string goes here */)) {
break;
}
}
This isn't the exact way I would use this for the use case I describe, but it shows what I'm doing to go through folders.

It sounds like you need to get familiar with the jQuery UI Autocomplete documentation:
http://jqueryui.com/autocomplete/
I hate to just leave a RTFM response, but it is important for you to be familiar with the widget so that you can ask a more precise question.
The page allows you to view source and see exactly what their demo was using to operate. And the API documentation has a plethora of more examples.
If you have any specific questions on it, let us know.

Related

Can't access object in jquery (prevObject?)

A function in my WP plugin has just randomly (as far as I can tell) stopped working.
Here's the code in question:
window.send_to_editor = function(html) {
var classes = jQuery('img',html).attr('class');
var items = classes.split(" ");
... more stuff here
}
I've confirmed that the html variable is indeed an img html tag. Here's what firebug shows when I do a console.log of the object (console.log(jQuery('img',html));):
Object[]
context -> undefined
jquery -> "1.11.2"
length -> 0
prevObject -> Object[img.alignnone.size-full.wp-image-1234 name.jpg]
And the error it shows is classes is undefined.
I figure there's something wrong with the object I get, but this used to work recently and I'm not aware of any changes in the site that could have caused this.
I'd appreciate any input on this.
EDIT:
More info. This happens with two plugins which are supposed to be unrelated (made by different people). It happens when, after uploading an image to the server (or selecting a previously uploaded picture) you try to insert it into the post.
As I said before this error has appeared out of nowhere, it was working as intended a couple days ago. The only thing I can think of that has changed since then is the domain name, but I can't see how that could be related.
The jQuery selector always returns a jQuery object, but when the length is 0 then no elements were found matching the selector that you provided. In your example you've confirmed that nothing is selected as the length of the jQuery object is 0. Perform a check whether an element was selected like this:
var $els = jQuery('img',html),
classes;
if ($els.length) {
classes = $els.attr("class");
}
Keep in mind that your DOM query is limited by what you pass in as the html parameter. If you simply want to find the images on the page do: var $els = jQuery('img');
I finally managed to fix this; the key was parsing the html string variable into proper HTML, using jQuery.parseHTML(). Thanks to everyone who helped!

javascript regex in chrome extension

Okay, a little context. I want to modify some crappy HTML on a page that I use a lot. I'm doing this via my content_script "js", as defined in the manifest.json file of the chrome extension. The primary method I've been using is this sort of ugly thing:
var str1 = 'something already on the page';
var str2 = 'something already on the page, plus some extra stuff';
document.body.innerHTML = document.body.innerHTML.replace(str,st2);
I'm mostly trying to re-order form objects, and expand them a little to show more information, and filter/condense them to be less superfluous. I'd appreciate any pointer as to a better way to do this.
Anyway... here's my specific problem.
I want to retrieve pistol (or any string) from the following:
<form action="map.cgi?use-o" method="post" class="a"><input type="submit" value="pistol" class="m"\></form>
I tried every variation of the following:
str.exec(/value="([^]+)" class/);
and I'm either getting null or junk strings that I don't want. Ideas?
Thanks!
If you insist on regex, then use below one:
(?:value=")([^"]+)
Here is DEMO
Using JavaScript it will look like:
var value = document.querySelectorAll("input[type=submit]")[0].value;

Easiest way to use Facebook API JSON for my website (which language and how to syntax)

i must start by saying i only know how to comfortably work with HTML and CSS.
Which would be the easiest way to take the image sources from this, which i'm assuming is a JSON call, http://graph.facebook.com/103184243098195/photos?fields=source&limit=999 and stick them into my HTML in a way that i could format them with CSS?
i have picked around the internet to find out how to do this using jquery and found a few snippets of example code but i do not know how to tell, i'm assuming javascript, what to look for, how to find it and then where to put what it found, ie., the image sources.
i think i need at least this:
var url = 'https://graph.facebook.com/103184243098195/photos?fields=source&limit=999';
$.getJSON(url, function(data) {
});
but i don't know what to put in-between to grab the image sources and then plug them into, let's say, just a div in general. everywhere i go to try and learn which syntax i would need uses terms i do not understand as i am unfamiliar with most languages. i don't even know if this is the right start/direction.
Any help is appreciated!
I've never used this API whatsoever, but this should at least give you a start until someone else comes along. :P
HTML:
<body>
<div id="facebook-stuff"/>
</body>
JS:
$.getJSON('http://graph.facebook.com/103184243098195/photos?fields=source&limit=999', function(url) {
var data = url.data;
var paging = url.paging;
for(var i = 0; i < data.length; i++)
{
$('#facebook-stuff').append('<img src="' + data[i].source + '" class="facebook-pics" id="pic' + i + '"/>');
}
});
http://jsfiddle.net/zV99P/
Basically, the parameter passed into your function is your JSON object. Data is an array of objects(within that object) from which you can extract the id, source and time of creation from. Using Jquery or just plain javascript you can dynamically create img elements with the source attribute and append them to any element created on the page. There's also a pagination object here if you are looking to split your images across multiple pages. As far as I can understand it from a quick look, you'd have to lower your limit at the end of your query string to a lower number, i.e: ?limit=5, and then you could create previous or next links from the paging object, with paging.previous or paging.next.

Extract data from url with JavaScript

EDIT_2: I forgot to specify its for Android app, so i dont think this is any use, i made a new post instead :( Added Android TAG..
EDIT: Im making an Android App
I need help to extract a number from an url, generated by JavaScript!
Site is:
http://www.oddsportal.com/sure-bets/
And the path looks like this:
<span class="logos l60"> </span>
<div class="odds-nowrp" xodd="xzoxfxzox">2.62</div> // <- 2.62 is the numer i need
For full path see this screenshot:
What library would do this best? (I know Jsoup cant do it) I have searched a few like:
HtmlUnit
Java Script Engine
Apache Commons BSF
Rhino
But i cant really make sense of it or find any examples for android which look like my problem
or find any examples for android which look like my problem
You need it for android?
Pretty much any library allowing DOM traversing will allow you to do this providing you know how to find your value.
is this value exactly at the same position in DOM every time?
is it wrapped by an easy to identify element? i.e. with a static ID
are there any other value that look alike in the DOM that you don't want?
Based on that, using JQuery for example, you could select it like this :
$('.table-main td.center > a[href^="/bookmaker"] + div[xodd]')
or this:
$('.table-main tr:nth-child(3) div.odds-nowrp[xodd]')
Use Jquery:
var number = $(".odds-nowrp").text();
you can just use regex if you have the url already in escaped string format
reg = /[A-z\"\>\<=?()0-9 \/]*(\d+.\d+)[A-z\"\>\<=?()0-9 \/]*/
reg.exec(url)[1] // this will return your number
if it's already rendered and the xodd value doesn't change, you could do something like this
document.querySelectorAll('.odds-nowrp[xodd=xzoxfxzox]')[0].innerText

Passing 2 URL Parameters?

I need to pass 2 URL parameters in a URL. The URL originates in an email and the user will click the link directing them to my site. The first parameter triggers a script on the page the second parameter is for a module my CMS will render from the parameter.
First Parameter is : message=1 (This parameter triggers the javascript)
The second Parameter is: name={tag_recipientfirstname} (My CMS will render the module)
The script that is called for the first looks like this:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
var url = window.location.href;
url = url.toLowerCase();
if (url.indexOf('message=1') != -1) {
$j("a.message").colorbox({
open:true
});
}
$j("a.message").colorbox(); //not related to URL parameter
});
</script>
The second parameter is used on the page as:
<div>
<p>{ module_url,name} (again CMS will render this module)</p>
</div>
EDIT
I realize I left a couple things out:
First: How do I pass both parameters so they will both function as listed above?
And the CMS I am using is Business Catalyst.
//split the `location.search` string at the ampersands
var search_arr = window.location.search.replace('?', '').split('&'),
len = search_arr.length,
get_vars = {},
tmp = [];
//iterate through the key/value pairs and add them to the `get_vars` object
for (var i = 0; i < len; i++) {
tmp = search_arr[i].split('=');
get_vars[tmp[0]] = tmp[1];
}
//you can now access your GET variables through the `get_vars` object like: `get_vars.name`
//you can check for the existence of a certain GET variable like this
if (typeof(get_vars['message-1']) != 'undefined') {
$j("a.message").colorbox({
open:true
});
}
Here is a demo:http://jsfiddle.net/aBH8K/1/ (http://jsfiddle.net/aBH8K/1/show/?message-1=3 to see with get var)
Some related documentation:
window.location: https://developer.mozilla.org/en/DOM/window.location
Your question is not so much about generic development, rather a very specific commercial product; I do not know which plan you subscribed (free o pay-for?) with them but in any case it would be best to go through their support (see also my conclusion)
Nevertheless I'll try to put you on the right track.
Your questions
First,
the url in the email
In the email you will have somehow to build a link with the two parameters you want as #Jasper is explaining.
this means something like:
http://yourwebsite.com/destination/path/?message=1&name={tag_recipientfirstname}
Everything after the question mark is a GET query string.
Parameters are separated by the "&" symbol.
I definitely don't know how properly build urls in BC emails, but I feel like it should be an automated somewhere allowing you to specify additional parameters if you need.
the javascript
What you got will still work. It's not very nice, and you can use Jasper's solution or any other such as How can I get query string values in JavaScript?
Nothing to do then unless you want to make it better and more robust.
Business Catalyst (the page)
You usually have ways in a CMS to retrieve get parameters. Often something like
{ GET.param_name }
One step back
I am no expert with BC, but I have the feeling that you are taking a complicate path for something that is probably already baked in.
Again I suggest you go into their support section (though it's rather confusing I must say!) and try to understand what's the best way to achieve your objective. There are always many ways to skin a poor cat.
If you are getting support in your plan, definitely go that way and try to explain what you objectives are rather then how to achieve the technical solution that you think is the good one!

Categories