I am fetching data from database using jquery in search bar as user enter some character in it will fetch data from database the search is working perfectly but it disable my drop down menus on the top and when i remove jquery-1.8.2.min.js from the page the search module stop working and drop down menus start working . i have tried jquery-2.1.0.min.js but did not get the result.Here is my coding.please help me out.
<form action="view_cat.php" method="post" >
<input type="text" name="search" class="autosuggest" >
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/javascrip.js"></script>
<script>
$(document).ready(function() {
$('.autosuggest').keyup(function() {
var search_term=$(this).attr('value');
$.post('search.php', {search_term:search_term},function(data){
$('.result').html(data);
$('.result li').click(function(){
var result_value=$(this).text();
$('.autosuggest').attr('value', result_value);
$('.result').html('');
});
});
});
});
</script>
</body>
</html>
The drop down menus script.
<script>
$(function () {
var example = $('#sf-menu').superfish({
delay: 400,
animation: {opacity:'show',height:'show'},
speed: 'fast',
autoArrows: false
});
});
</script>
Please suggest me some Alternative path.
if you are using template than for sure I can say there should be another jquery file which are conflicting with each other please check out the file if you have another jquery file remove it and as far I am seeing your calling your jquery above the body so remove the jquery script from the bottom and put in the head section will work fine I hope.
Related
I have a tiny issue if anybody can help... I am trying to implement a form, so when the page loads the textbox is disabled. If the user wishes to amend information they first have to press a button which will enable the text box.
<input id="text" type="text" disabled="disabled">
<br />
<button>Enable</button
So I have a basic textbox which is disabled. Then an event that should enable the textbox...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#text").attr("disabled","false");
});
});
</script>
I can get this working when the textbox is not initially disabled and I want to disable it, though I can not get it working the other way round - when it is disabled and I want to enable it.
Can anyone point me in the right direction?
Hi i have created a jsfiddle for you see the working example...
you should use removeAttr instead of attr
code:-
$(document).ready(function(){
$("button").click(function(){
$("#text").removeAttr("disabled");
});
});
link:-http://jsfiddle.net/L7S37/15/
You are giving boolean value as String
Use this
$("#text").attr("disabled",false);
instead of
$("#text").attr("disabled","false");
DEMO
Or you can use this, Even the last answer by Mr Soni is correct.
$(document).ready(function(){
$("button").click(function(){
$("#text").prop('disabled', false);
});
});
Creating the form is the easy part
<form action="mymovies.php" method="get" >
<input type="text" size="25" onkeydown="searchq();" placeholder="Search" name="search" class="search_box fanceyInput"></form>
Using this script as is does not output the file when searched for. I know it's not right but can someone help me fix it?
<script>
function searchq() {
var searchTxt = $("input[name='search']").val();
$.get("mymovies.php", {searchVal: searchTxt}, function(output) {
$("#output").php(output);
});
}
</script>
Currently I am pulling the filenames down from my server using,
$myDirectory = opendir("./movies"); // Opens directory
and then doing a lot of other stuff, if you care to look { FILE } but ultimately the list of movies gets printed out into a table using this,
print("
<tr class='$class'>
<td><a href='./$namehref$name</a></td>
<td>$mpreview</td>
<td>$mrating</td>
<td>$mrunningtime</td>
<td>$thefilesize</td>
<td>$DateAdded</td>
</tr>");
So again my question is how can I change or clean up my page so when searching for a specific movie it either scrolls down, goes to, or displays the searched movie at the top of the page?
In addition to all this how can I HIDE/IGNORE files with a .php extension from showing up in the print list? It's a list of movies so they are all .mp4 but in order for me to grab the file sizes (over 2 gigs) I had to put a php page inside the movies folder. No reason for it to show in the list.
One last thing at the top of the pastebin page there are a list of other things I would like to add to this page, if someone that codes pretty easy could spend an hour with me I would really appreciate it.
Thanks in advance.
You can use jquery for searching...
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = ["ActionScript","AppleScript","Asp","BASIC","Scheme"];
$( "#tags" ).autocomplete({source: availableTags});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
I have a live search bar where if the user types in "M" only results that have an M are shown and so on, i've made each result into a link so when the user clicks it, it'll load to a different page.
Now, I can make it load to another page, however I'm trying to do it on the same page but it just wont work.
The search code is simply a form that takes text, then im using the xmlhttp method to make it live.
Now, displaying it is as follows: (I have given it a class to use in the ajax)
echo "<a href = 'display.php' class='display'>" . $row['carName'] . "</a>";
Ajax:
$(document).ready(function() {
$(".display").each(function(){
var btn = $(this);
btn.on("click",function(){
$("#displayDiv").empty();
$.post("display.php",function(data) {
$("#displayDiv").append(data);
Any help? Currently, clicking it just loads test.php on which I have some text to see its working. I'm trying to get it to load dynamically on the right.
Thanks.
EDIT: it loads test.php which is:
<html>
<body>
<div id="displayDiv">
<h2> Test </h2>
</div>
</body>
</html>
EDIT2: div id which is in the same page as script:
<html>
<div id="displayDiv" style="width: 40%; float:right">
</div>
It's just following the link when you click on it. To stop this you need to change the event handler to:
btn.on("click",function(e){
e.preventDefault();
// rest of your code
});
$(document).ready(function() {
$(".display").on("click", function(e) {
$("#displayDiv").empty();
$.post("display.php", function(data) {
$("#displayDiv").append(data);
}
);
e.preventDefault();
});
});
<script type="text/javascript">
$(function(){
$('input.check1').click(function(){
$('#show1').show();$('#show2').hide();
});
$('input.check2').click(function(){
$('#show2').show();$('#show1').hide();
});
});
</script>
This is the Javascript code that I'm trying to use in one of my Wordpress 7.1 pages to show and hide a 'div' part that contains a table, using radio buttons. Below is code for the radio button:
<input type="radio" name="chec" class="check1" checked="checked">Option 1
<input type="radio" name="chec" class="check2">Option 2
But it is not working. I don't know what to do, maybe the Javascript is not triggering?
Try this
<script type="text/javascript">
jQuery(function(){
$('.check1').click(function(){
$('#show1').show();
$('#show2').hide();
});
$('.check2').click(function(){
$('#show2').show();
$('#show1').hide();
});
});
</script>
Also make sure you have the script source in your header.
replace all '$' sign by 'jQuery'
As wordpress by default uses jQuery=noconflict
I'm trying to make magnific popup contain some forms. I would like to pass variables through the html anchor to the final popup.
As Var1 in this pseudocode:
<!-- HTML launcher element -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup">
<form method="post" action="">
<input type="hidden" id="myVar" name="Var1" value="[placeholder]" />
<input type="submit" />
</form>
</div>
<!-- Inizialization -->
<script type="text/javascript">
$(document).ready(function() {
$('.open_popup_link').magnificPopup({
type:'inline',
midClick: true,
function() {
**Here some magic code that sets Var1 = X **
$('#myVar').attr('value', function(i, attr){
return attr.replace('[placeholder]', Var1);
});}
});
});
</script>
I need this because I will generate serverside (w. PHP) the launchers so that each link will generate different form data.
edit: One approach i thought at was to use custom attributes in the launcher, eg:
Show inline popup
But I couldn't really get the right jQuery syntax for nesting the attributes processing INSIDE the magnific-popup inizialization.
My js/jquery knowledge is very basic, so thank you for any hint.
How about using a separate click handler outside the magnificPopup settings that changes the value of your input whenever a link is clicked, just make sure to bind it before initializing the plugin
HTML
Using data attributes as correctly suggested
Show inline popup
Javascript
$('.open-popup-link').click(function(){
$('#myVar').val($(this).data('var1'));
});
$('.open_popup_link').magnificPopup({
type:'inline',
midClick: true
});
Try:
Javascript/jQuery
<script type="text/javascript">
$(document).ready(function() {
$('.open_popup_link').magnificPopup({
type:'inline',
midClick: true,
function() {
**Here some magic code that sets Var1 = X **
Var1 = $('#myVar').val();
});}
});
});
Not quite sure what you are using Var1 for, but that is how you would get the value from the input into a global Var1 variable.
Let me know if I didn't understand what you're trying to do correctly.