We Keep Coding

Wordpress Search & Filter Autosubmit

I'm working with the Wordpress Search & Filter plugin and it's exactly what I needed for filtering though my gallery and shop content! I would like to make my selections submit every time a dropdown is changed, as opposed to having to click the submit button. (See link below).
In researching other posts, I've found that the solution is to implement this into my theme's java script file:
$(".searchandfilter select").change(function() {
$(".searchandfilter").submit();
});
I have put the line into my WooThemes Canvas's 'general.js' file but it seems to make no difference. I still need to click on the submit button to make changes. I've tried placing it in various other js files but I've had no luck. The page in questions is this one:
http://richardrosenman.com/wordpress/portfolio/
Does anyone have any insight as to what I'm doing wrong? I would REALLY appreciate any help as I'm stuck (and somewhat of a novice with Javascript!).
Thanks!

jQuery is loaded with jQuery.noConflict(); therefore you cannot use $ as selector (other libraries may be using it), instead use jQuery as selector:
jQuery(document).ready(function(){
jQuery(".searchandfilter select").change(function() {
jQuery(".searchandfilter").submit();
});
});
I think you can add it to general.js end of file since I see that file is loaded.

Load a html page in a div by clicking an image

I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.

I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.

Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.

Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).

Twitter Bootstrap Javascript - how to use only tooltip library?

I have a project that is without Twitter Bootstrap. I would like to use Tooltip, so I downloaded bootstrap-tooltip.js file, put it to the page. (there is included jQuery lib as well).
And this is how I am trying to call tooltip:
$(document).ready(function() {
$('.tooltip_link').tooltip();
});
www.something.com
But the tooltip will never appear, in console log are no JS errors. What am I missing?
Thanks

data-toggle="tooltip" maybe?
I've tried to reproduce what you have here, after inserting this I got it working (JSfiddle right here).
In the docs you've referenced there's the following code:
hover over me

Tweet button looks like a normal <a> link without any JS or CSS

I am trying to embed the Tweet button in my website, I already added
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
inside <head>, widgets.js gets included normally and everything looks fine when i put
Tweet
But the problem is, When i use
$('.someclasses').append('<a href="https://twitter.com/share" class="twitter-share-butto ...</a>');
the button will be appended, but this time it doesn't looks fine, But looks like a normal link without any CSS or JS effects, As well as the link guide me to https://twitter.com/share
Any solutions ? Thanks :)

you need to re-apply the twitter script. After you append your new elements try this snippet:
$('.someclasses > a.twitter-share-button').each(function() {
var tweet_button = new twttr.TweetButton(this);
tweet_button.render();
});

Thank you all, The solution for this is to put this code under the appended <a> element :
twttr.widgets.load();

I had the Disconnect extension in Chrome. I figured this out the hard way after struggling for hours. After removing it, it worked fine. Didn't even need to close Chrome windows.

How to put jQuery Dialog popup div into the jQuery code?

I have a very simple message to display in one jQuery popup and I just want to generate it without adding extra divs into my HTML.
What I'd like to do is just open a dialog box with a message and thats it.
Here is something like that I want:
$("<div>Hello sir</div>").dialog("open");
But that doesn't work. Should it? It seems like that should just open a simple dialog box, shouldn't it?
Thanks!!

You don't need to call open, simply:
$('<div />').html('Hello sir').dialog();
And here's a live demo.

Have you made sure you have included jQuery.UI library in addition to core jQuery ?
see example here :
http://jqueryui.com/demos/dialog/

$("<div>This is a test</div>").dialog();
works fine for me http://jsfiddle.net/fyMct/