I'm trying to use the jQuery UI to style my HTML select menu but I'm having a little trouble getting it working... I'm still relatively new to using jQuery so the answer to this may be fairly simple.
My full code segment (using jQuery v1.6.2):
<link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery.css">
<label for="favorite">Select favorite team</label>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/selectmenu.js"></script></script>
<script type="text/javascript">$(function() {
$('select[name=favorite]').selectmenu();
});
</script>
<select name='favorite'>
<?php
while ($temp = mysql_fetch_assoc($query)) {
echo "<option value=" . $temp['id'] . ">" . htmlspecialchars($temp['teamname']) . "</option>";
}
?>
</select>
But it doesn't seem to do anything. My select menu appears as a normal, boring HTML select menu. I'm really not sure at all if what I'm doing is completely retarded or what, but let me know if you know how to get this working properly.
EDIT Console gives error Uncaught TypeError: Object [object Object] has no method 'selectmenu'
$('select[name=favorite]').selectmenu();
You must set the name of the element you want to use. In this case, a select box with the name favorite.
You must also place the code within jQuery's document ready function
$(document).ready(function() {
$('select[name=favorite]').selectmenu();
});
or use the shorthand
$(function() {
$('select[name=favorite]').selectmenu();
});
why don't you try to give an id or class to the select.
then you can call it from jquery by using it id or class.
i don't know it will work or not, but worth it a try.
Related
i am very new to jquery n javascript. I am trying to make an autocomplete feature. I am using a sample code from a diff page to do this. but the 'term' it passes to the php page is empty. so the autocomplete doesnt work. I dont understand why, can someone take a look? I didnt change the labels but i am just trying to test it to see if it works. the issue is with the php page, the request 'term' is empty.
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#txtLanguage" ).autocomplete({
source: "source.php",
minLength: 1 // how many character when typing to display auto complete
});
});
</script>
</head>
<body>
<label for="Language">Language: </label>
<input id="txtLanguage" class="txtLanguage"/>
</div>
</body>
</html>
<?php
include 'dbconnect.php';
$q=$_REQUEST['term'];
echo $q;
$return = array();
$stat="SELECT email FROM users WHERE email LIKE '$q'";
$query = sqlsrv_query($conn,$stat);
while ($row = sqlsrv_fetch_array($query,SQLSRV_FETCH_ASSOC)) {
array_push($return,array('label'=>$row['email'],'value'=>$row['email']));
}
echo(json_encode($return));
?>
I think you need this:
$stat="SELECT `email` FROM `users` WHERE `email` LIKE '$q%'";
You forgot for % symbol and LIKE without % is equal to email = '$q'
Are you sure, the file path is correct? Is there any javascript error in the console?
Try console $( "#txtLanguage" ).
Remove source.php and add an array
Hope this helps you.
Use $_GET['term'] instead of $_REQUEST['term']
Why doesn't this work?
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").html($("body").html().replace(/®/g, '<sup>®</sup>').replace(/®/g, '<sup>®</sup>').replace("\u00AE" , '<sup>®</sup>'));
};
);
</script>
Firebug in Firefox gives this in the console:
"SyntaxError: missing ) after argument list"
But, this breaks the Wordpress entirely...
<script type="text/javascript">
$(document).ready(function() {
$("body").html($("body").html().replace(/®/g, '<sup>®</sup>').replace(/®/g, '<sup>®</sup>').replace("\u00AE" , '<sup>®</sup>'));
}
);
</script>
The basic of this function is to find every single registration mark in the body, and replace it with "®"
If this function is capable in PHP as well, that's preferable.
It seemed like the best thing to do was to go into the database and just run a sql query to replace all registration marks and wrap it in "" tags.
However, this did work on individual elements. (Like adeneo said, it's not a good idea to replace the entire site HTML... which broke the site for me)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("h1").html(
$("h1").html()
.replace("®", "<sup>®</sup>")
.replace(/®/g, '<sup>®</sup>')
.replace(/®/g, '<sup>®</sup>')
.replace("\u00AE" , '<sup>®</sup>')
);
});
</script>
I have a HTML dropdown list with single selection. I want to select a value according to an value which I get from the database.
<select name="aa">
<option>BE</option>
<option>TE</option>
<option>SE</option>
</select>
I get the value "TE" from the db and then I tried these 3 ways of setting the associated option tag selected.
if($m_aa == "TE"){
$script = <<< EOF
<script type='text/javascript'>
jQuery(document).ready(function($) {
// $('#aa option:contains("' + BE + '")').attr('selected', 'selected'); //won't work
// $('#aa option:eq(0)').attr('selected', 'selected'); //won't work
$('#aa option:eq(1)').prop('selected', true); //won't work
});
</script>
EOF;
echo $script;
}
....
<dropdown list>
But none of the 3 possibilities will work.
Firebug don't show any error, if I add an alert(); it will shown. So syntactically it should be fine. I use jquery version 1.8.6 within a wordpress plugin in which this functionality I mentioned above should be implemented.
BR,
mybecks
To set the selected option of a <select> you can use the .val() function:
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#aa').val('<?php echo $m_aa; ?>');
});
</script>
Also, I noticed that you have <select name="aa">, you should add id="aa" as well for the code to work, or change the selector to $('select[name=aa]').
try using jquery version 1.7.x
I want this effect when php print gets called . How can i do it?
I have tried with
print "<span id=\"highlight\" onLoad=\"Effect.Highlight(highlight);\"><em>Your post was successfully added.</em></span>"."<hr>";
but this is not working. Help!
if it does not need to be in the php itself then use (advise against using short tags to open and close):
?>
<span id="highlight" onLoad="Effect.Highlight(this.id);"><em>Your post was successfully added.</em></span><hr>
<?php
and continue your script.
alternatively,
<head>
...
object.onload="SomeJavaScriptCode";
...
</head>
--EDIT--
Javascript would look like:
<script type="javascript/text">
body.onload=Effect.Highlight(getElemenyById('highlight'));
</script>
-- EDIT --
Javascript, I believe, (thanks to comments) will look like:
document.addEventListener('DOMContentLoaded', function () {
Effect.Highlight(getElemenyById('highlight'));
}, false);
onload=""
Does only work inside of a <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script> or <style> Tag.
if you are using javascript why not print in your script section?
in your body you can have the notice hidden,
and after the post is added to the database you can show and highlight the alert.
are you using Ajax?
an example:
<span id="hightlight" style="display:none"><em>Your post was successfully added.</em></span>
<scrpt type="text/javascript">
<?php
print "$('highlight').show(); Effect.Highlight('highlight')";
?>
</script>
I'm trying to simply echo a function back to the client browser from a server php page after a selection has been made in a jQuery autocomplete box so that the function can process as needed (client-side) with the value of the autocomplete box. The autocomplete is in the php page as follows:
mypage.php
<html>
<head>
<title>Autocomplete</title>
<link href="../../jqSuitePHP/themes/redmond/jquery-ui-1.8.2.custom.css" id="skin" rel="stylesheet" type="text/css" />
<script src="../../jqSuitePHP/js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="../../jqSuitePHP/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script>
$(function ac_boxes() {
$("#dlr").autocomplete({
source: "dlrAutocompleteSearch.php",
minLength: 2,
search : function(){$(this).addClass('ui-autocomplete-loading');},
open : function(){$(this).removeClass('ui-autocomplete-loading');},
select: function( event, ui ) {
// Here's my attempt at calling the client side 'test' function
<?php echo '<script>window[test](ui.item.value)</script>;' ?>
}
});
});
</script>
</head>
<body>
---------
</body>
</html>
But the < and > are causing a problem. If I remove the < and >, the page processes completely (without the 'select' function of course. If I add the < and >, the page does not process.
I have tried assigning the string using the php htmlentities() as such:
<?php
$val = htmlentities('<script>window[test](ui.item.value)</script>;');
echo $val;
?>
But this doesn't seem to work either.
Is my problem stemming from the php being inside of the jQuery script? If so, what is another method of calling the php from the 'select' method of autocomplete?
Thanks in advance.
I don't think this code is doing what you think it is doing; when you load the page the PHP is executed and you end up with something like this in the source code:
<script>
...
select: function( event, ui ) {
<script>window[test](ui.item.value)</script>;
}
...
</script>
Which is not correct (you don't need script tags within script tags; as you've seen it doesn't do anything but cause problems).
If you want to execute some PHP when the selection changes, you have to make another call to the server, via AJAX, submitting a form, or whatever. Something like this might be more like what you want:
select: function(event, ui) {
// send the selected value to the server for processing
$.get("processChange.php", {value: ui.item.value});
}
See the JQuery docs on $.get() for more on that.
On the other hand, if all you're trying to do is call another client-side javascript function (test, for example) with the selected value, you don't need PHP to echo anything. This ought to do the trick:
<script>
function test(args) {
// ...
}
$("#dlr").autocomplete({
// ...
select: function(event, ui) {
test(ui.item.value);
}
}
</script>
You can use < and > just like in HTML. You can also use the replace() function to find all the < and > and replace them.