I've a pretty long sign up form and I have autocomplete on one field which has worked before. The site is on WordPress, I've loaded jQuery UI in main.js and it is shown on the source of the page. And it's included after jQuery. Here's the snippet that powers the autocomplete.
jQuery(document).ready(function($) {var kurssit = [<?php echo file_get_contents("http://xxx.xxx", "r");?>];
$("#kurssi").autocomplete({
source: kurssit
});
});
And php will load it like this:
jQuery(document).ready(function($) {var kurssit = [
"Taaperokurssi",
"Junnukurssi",
"Yhteiseloa myötäkarvaan",
"Lapsi ja koira",
"Pentutoko",
"Aktivoi tokolla",
"Rallytoko",
"Näyttelyyn tutustumiskurssi",
"Ratkaisuja pulmalliseen ohitukseen",
"Ratkaisuja pulmalliseen ohitukseen - jatkokurssi",
"Hihna-, kontakti- ja luoksetulokurssi",
"Naksutin",
"Lupa koskea",
"Sienikurssi",
"Mejä",
"Mejä jatkokurssi",
"Puuhakurssi",
"Koiranhoidon ABC",
"Hieronta",];
$("#kurssi").autocomplete({
source: kurssit
});
});
It should work, why it won't work?
In your code you have two element with the same id
id="kurssi"
Related
here below code using insertdata in jquery and ajax is not working please slow this code
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function()
{
var fname=$("#fname").val();
var lname=$("#lname").val();
//alert(fname);
var URL="insertprocess.php";
var datastring='fname'+fname+'&lname'+lname;
$.ajax()
});
});
</script>
Problem is here use = equal
var datastring='fname='+fname+'&lname='+lname;
If still getting any issue share complete code
I've tried adding a manual "Pause" and "play" button to my frontpage slider (It uses cycle-plugin) is what I'm using. I've tried refering to the cycle plugin examples to get mine working, but my lack of java / jquery knowledge has me slightly puzzled.
Here is the link to the cycle plugin on what I want to achieve:
HTTP ->> jquery.malsup.com/cycle/pause.html (spam filtering won't let me post this URL for some reason..????)
- Instead of using an input button, I am using a div with ID's of the following:
From what I understands its not as easy as adding "Next" and "prev" buttons as the cycle plugin doesn't except div ID's as an option for advancing and pausing the slideshow.
For the pause button the javascript in question is as follows (taken from the cycle-plugin website):
$('#pauseButton').click(function() {
$('#s1').cycle('pause');
});
Obviously I would change #pauseButton to #slider_pause. What would I change #s1 to?
The wordpress them I am using currently has the following setup to make the cycle-plugin work. Where would I add it at this point?
Here is the currenty wordpress theme file code that integrates the cycle=plugin:
<?php
$jcycle_timeout = get_option('ka_jcycle_timeout');
$jcycle_pause_hover = get_option('ka_jcycle_pause_hover');
if ($jcycle_pause_hover == "true") {$jcycle_pause_hover_results = '1';}
else {$jcycle_pause_hover_results = '0';}
echo '<script type="text/javascript">
//<![CDATA[
TTjquery(window).load(function() {
TTjquery(\'.home-banner-wrap ul\').css("background-image", "none");
TTjquery(\'.jqslider\').css("display", "block");
TTjquery(\'.big-banner #main .main-area\').css("padding-top", "16px");
TTjquery(\'.home-banner-wrap ul\').after(\'<div class="jquery-pager">
</div>\').cycle({
fx: \'fade\',
timeout: '.$jcycle_timeout.',
height: \'auto\',
pause: '.$jcycle_pause_hover_results.',
pager: \'.jquery-pager\',
cleartypeNoBg: true,
prev: \'#prev1\',
next: \'#next1\'
});
});
//]]>
</script>';
?>
Unfortunately its on a localhost development at the moment and I don't have the ability to upload it ATM
#s1 it is element that contains images that should be cycled so if you name it as #s1 it should stay #s1
<script>
$(function() {
$('#slider_pause').click(function() {
$('#s1').cycle('pause');
});
});
</script>
<div id='s1'>
<img....
<img....
<img....
</div>
I'm trying to get a PHP array to use in some jquery script using the qTip plugin. This is my array:
$descqtip[ ] = array('name' => ''.$name.'', 'description' => ''.$description.'');
Here is my jquery code:
<script type="text/javascript">
$(document).ready(function() {
var description = <?php echo json_encode($descqtip)?>;
$('#homepage_catgames h2').each(function(i){
$(this).qtip({
content: description
})
});
});
</script>
I know the above doesn't work, but i'm stuck on trying to get the description variable in each part of the array to their own individual tooltip.
Can anyone help me?
Thanks
You have some problems with how you are referencing the array on the Javascript side. I went ahead and made an example of what you wanted to do.
What you need is this:
var rows = <?php echo json_encode($descqtip); ?>;
var index = 0;
$('#sections h2').each(function()
{
$(this).qtip(
{
content: rows[index].description
});
index++;
});
The details are covered in this article I put on my blog http://blake.breakwatersyndicate.com/2011/03/php-array-in-json/
I hope that helps.
I want to display the image actual view when the mouse is over the thumb sized image. But when the mouse is placed over the first image it appears and then disappears, not the case with the second and following images.
It works perfectly fine in Internet Explorer, but not in Firefox or Chrome.
$file - runs displays all the files in a directory
$id_v - is a simple count on the number of files
$path1 - is the path
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#view').hide();
$('#ig<? echo $id_v; ?>').bind('mouseover', function(ev) {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
});
$('#ig<? echo $id_v; ?>').bind('mouseout', function(ev){
$('#view').slideUp();
});
});
</script>
Please note, my interpretation of your HTML may be completely wrong. Please post all relevant code with your questions. --help us, help you. :op
Please also note (in case you were unaware) that you can edit your question to update with relevant info.
Can't say for sure without seeing HTML, but consider the following:
$('#view').hide();
Here 'view' is an id. IDs must be unique. You can't have them assigned to more than one element.
I'm assuming each item that you want to animate is getting id='view' in your HTML, when you should be doing class='view' in HTML with the following in your javascript:
$('.view').hide()
etc...
Give that a try.
It's hard to tell (for me) without live example...
Did you try to :
preload you images (with css
technique or with preload jQuery
plugin) ?
change mouseover/mouseout by
mouseenter/mouseleave ?
Just for information, in jQuery 1.4, you could use multiple events.
So your code could be rewritten like this :
$('#ig<? echo $id_v; ?>').bind({
mouseover: function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
mouseout: function() {
$('#view').slideUp();
}
});
I would suggest using the hover method instead of the mouseover and mouseout:
<script language="javascript" type="text/javascript">
$(function() {
$('#view').hide();
$('#ig<? echo $id_v; ?>').bind('hover',
// over
function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
// out
function() {
$('#view').slideUp();
}
);
});
</script>
I would also suggest (to make your life a little easier), instead of binding new methods to each new id, just assign a class to each one of them and use
<script language="javascript" type="text/javascript">
$(function() {
$('#view').hide();
$('.some-class').hover(
// over
function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
// out
function() {
$('#view').slideUp();
}
);
});
</script>
There could be a lot of things.
If the image #view is fixed or is showed over the position of the thumbnail it will fire a mouseout in the thumbnail at the moment you show up.
Another thing that may cause that the #view hide instantaneously is that the element #view modifies the position of the whole document, if it is on the top or something like that.
Try to remove the mouseout bind and load the page with Internet Explorer and look how the document is modified.
php sends html strings to html via ajax wrapped in <p class="select"></p> tags, css reads class perfectly. javascript/jquery does not. javascript/jquery wont even parse <p onclick="function()"></p>. What am i doing wrong?
heres my php (sends data via ajax fine)
echo "<p class='select' onclick='populate();' >{$row['song_name']} </p>";
heres my css (works fine)
p.select{color:#fff;padding: 5px;margin:0}
p.select:hover{color:#fff;background:#f60;cursor:pointer;}
heres my javascript
method 1 jquery.
$("p .select").click(function(){
var str = $(this).val();
alert(str);
});
method 2 onclick function.
function populate()
{
alert('here')
}
neither of the two methods respond at all. Guru why is this?
$("p .select").live ( "click" , function(){
var str = $(this).text();
alert(str);
});
See
Events/live
Binds a handler to an event (like
click) for all current - and future -
matched element.
Two things:
p .select will choose <p> tags containing an element with class select. p.select selects <p class="select">.
Why not move the populate function to within the live? I suspect the jquery live (or click) removes any explicit handlers.
Try this:
$("p.select").live("click",function()
{
var str = $(this).text();
alert(str);
populate();
});
I posted a working(in Firefox) example below. I think you forgot to put the jquery method inside the onload event. Beside the other (small) bugs...
<html>
<head>
<style>
p.select{color:#fff;padding: 5px;margin:0}
p.select:hover{color:#fff;background:#f60;cursor:pointer;}
</style>
<script src="jquery-1.3.2.min(2).js" type="text/javascript"></script>
<script type="text/javascript">
function bodyOnLoad() {
//instead of "p .select" "p.select"
$("p.select").click(
function(){
//changed val() into text()
var str = $(this).text();
alert(str);
});
}
</script>
</head>
<body onload="bodyOnLoad()">
<p class='select'>Songname</p>
</body>
</html>