How to make jQuery UI autocomplete dropdown ul list item selectively disabled
The dropdown classes are ul.ui-autocomplete li.ui-menu-item by default. I want to make the unselectable li not selectable for better UX. i.e. If I enter keywords "coat" in the search bar, it shows Mens Suggestions, then Jacket, then Women Suggestions, then Sweater. When I use arrow keys to select them, it skips the Suggestions part. I have tried .attr('disabled', ture);, .prop('disabled', true); and user-select: none; none of them is working. It just adds disabled="disabled" to the li, and it is
Avoid finding readonly text inputs
$(this).closest('form').find("input[type=text], textarea").val(""); I would like to change the above to avoid finding any readonly inputs. The documentation for the :not doesn't meet my needs.
Whats wrong with the jquery?
<form> <input type="text" id="inputs" > <button id="mybutton">Write here</button> <div id="list"><ul> <li> </li></ul></div> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function(){ $('#mybutton').click(function(){ var mytext= $('#inputs').value(); $('#list').append('<li>'+ mytext + '</li>'); }); }) </script>
Manipulating Elements
.text() – Get or set the text contents; HTML will be stripped.In the definition above, what is meant by HMTL will be stripped? Thanks in advance for your help! Ingrid
How jQery Works--the Basics
I was following along with the How jQuery Works the Basics on the website and one of the starter examples is : $( document ).ready(function() { $( "a" ).click(function( event ) { alert( "Thanks for visiting!" ); }); }); I was playing around with the code and I removed the word event from the click function and everything still worked the same. What then is the purpose of event ?
append value to an element dynamically
I want to put values into an array dynamically and get the same from a click event and put some text into the element. All this happens on the fly. I am not sure why the following piece of code fails. Everything worked except this line : $(gval[0]).append(" Bro, whats up? "); Code : var gval = []; // Headers to initialize jquery $(document).click(appendThisHere); function appendThisHere(e){ gval.push("\"" + e.target.nodeName + "\""); $(gval[0]).append(" Bro, whats up? "); } Any help appreciated !
Tablesorter Themes
I am using the tablesorter theme ice on my table but the zebra row coloring and the sort column coloring aren't displaying. Any idea why or how I can fix it? Theme documentation here jQuery: 3.1.0 tablesorter: 2.27.6
css corner
I edited theme with 8px corner for dialog, tooltip etc. I don't want corner for form fields and prefer to keep them normal. So is there a trick to override corner setting for spinner that it looks without corner?
Jquery success
Dear All I am using following script to load a video from YouTube.com $('.samplevideolist').click(function(){ $('#samplevideodiv').slideDown(1000); // $('#foo').show(); var id=this.id; var arr=id.split('samplevideos'); var videoid=arr[1]; $('#videoid').val(videoid); $.getJSON("sampleyoutubevideojsonfill.php", {id: $('#videoid').val()}, function(data){ $('#samplevideonamediv').text(data['name']); $('#samplevideo').html(data['code']); }).done(alert('ttt')
capture iframe window as a image??
there any js libraries out there to capture iframe windows I render 3d model from 3d rendering platform in to my web page using iframe so i need to capture that 3d model from web page
Dynamic Table Tablesorter
I have a table that I am adding and removing rows. How can I update the sorter with the new rows? When I remove rows it adds them back, and when I add rows it won't always sort them correctly. Using Christian Bach's tablesorter plugin. Site: http://tablesorter.com/ Tablesorter version 2.0.5 jQuery version 3.10
Ajax problem ?
Hi guys. I am new here and apprentice jquery. I am using ajax to send data to a php file, so far so good. the problem is that the ajax does not get the response that comes from php? below follows the scripts: Jquery: $(document).ready(function() { // $('body').hide(); $('body').fadeIn('slow'); // $('.data-send').text('Enviar').click(function() { // var ws_safe_email = $('.ws_safe_email').val(); // $.ajax({ type: 'POST', url: 'datacheck.php', data: { ws_safe_email:
How to tell progressbar to progress how many percent for what?
How to tell progressbar to progress how many percent for what? For example I want to use it for a database installer. If I have 50 tables, so after each table creation I want to make progress the bar 2% so after 50 tables it will be 100% or complete. In example or demo I did not see how to do this?
call a php function to autofill a form field
I have a php function string_creator($length) to create a random string. When I want to autofill a form field with that php function via a link, I was using sajax script. It was something like: <?php sajax_init(); sajax_export("string_creator"); sajax_handle_client_request(); ?> <script type="text/javascript"> function string_creator_complete(key) { if (key == "") { alert("error"); } else { document.forms.formName.fieldName.value = key; } } </script>
jQuery nicescroll Breaking When Element Is Repositioned
I am working on a sidebar which has currently playing music at the top and a play queue below. The album artwork has a button to be able to resize the artwork to show more of the play queue. The play queue also has jQuery nicescroll; Calling jQuery nicescroll $('.playQ').niceScroll({ zindex: 1000000, cursorborder: "0px solid #ccc", cursorborderradius: "2px", cursorcolor: "#ddd", cursoropacitymin: 0.1 }); Album Cover Resize // Album Controls $(".cover .controls .scale").click(function() { if ($(this).parent().width()
I would like to fade my nav
Hi, Since 1 hour i would like to fade my navbar when i scroll down but it doesnt work this is my root code: <script type="text/javascript" charset="utf-8"> $(function() { $('.navbar').hide(); }); $(window).scroll(function(){ posScroll = $(document).scrollTop(); if(posScroll >=1080) $('.navbar').slideDown(450).fadeTo("slow", 0.5); else $('.navbar').slideUp(450); }); </script>
How to find the next element above an inner element with class=bbb?
Assume we have the following web page source code ... <p> .... <p ....> <span class="aaa"> <a class="bbb">....</a> ...sampletext </span> </p> </p> How can I address/refer only (!) to the next <p> element above an inner leement which is defined by class=bbb? If one can refer to a simple string like "sampletext" then one could write successfully: $("p:contains('sampletext')").eq(($("p:contains('sampletext')").length) - 1).css("display", "none"); But what if I do not have identifying string like "sampletext"
Convert jquery string to object
I have var a = 1; var b = $("#abc").val(); here i am getting b as "a" only, but i am not able to access the value.Please help me on this
Intel XDK App Designer believes that JQuery Mobile is no longer in develpment
I've just installed the latest version of Intel XDK for both Windows and Linux. In both the app designer claims that a number of mobile frameworks, including JQuery Mobile, are no longer being supported by their developers. Obviously this is not the case. I am new to mobile HTML app development. I am wondering if I should hold off using the app designer in Intel XDK until their or your next release. Does anyone know if using the JQuery Mobile with the app designer will create content that will
Teach book or cookbook for jQuery
Is there a teach manual or a cookbook for jQuery either online or printed or pdf? I don't mean reference manual but a teach or cook book.
Ajax, problems of transaction between two div
Good morning , I have a problem with this script that performs the dynamic transaction pages without making the visual effect of page load , typical od server side languages. The Script is : /* <!--<script type="text/javascript"> $("#panel_container_sx a").click(function (e) { e.preventDefault(); // $("#submenu_11 a").click(function() { var param = $(this).attr("id"); $.ajax({ type: "GET", url: param , success: function(response) { $("#panel_container_dx").html(response); } }); }) </script> */
Ajax GET and POST method
I am currently using ajax GET method to pass my value into the same page. I look at the console.log, the requestURL is able to pass the value like www.example.com/test?q=1. unfortunately,when it request by the server site, the get value is not assigned to the variable $_GET['q']; As a result, i couldn't manipulate the value after the request. Do you have any idea what've I missed ? or it is fundamentally not allow to do in the same page. $anyvar = $_GET['q']; function showData(str) { bool = false;
Pass value from child window to tokeninput in parents window
Hi, How do I pass value from a child window to tokeninput in parents window. Below is the example of my code: Parents window: my Jquery Tokeninput script <input type="text" id="tokenize" name="receiver" /> <script type="text/javascript"> $(document).ready(function() { $("#tokenize").tokenInput("root/system/application/views/ajax-user.php", { theme: "facebook", preventDuplicates: true, excludeCurrent: true, hintText: "Enter user name", noResultsText:
Problems in displaying a page.
Hello Folks, Few days ago I have downloaded, from https://github.com/blueimp/jQuery-File-Upload/tags page, your JQuery File Upload Demo you have published at https://blueimp.github.io/jQuery-File-Upload/. I am not able to appropriate run the source file because, at first it does not displays glyphicons, and then, after clicked to “Add File” button and selected an image it returns without displays any preview. It’s been for two days now that I am getting mad to understand why without any result, so
tooltip for help icons
I want to place a help icon next to each form field, and show tooltip as long as mouse is on the help icon (just on icon not clicking it.) I don't want to show tooltip by hover on form field like the demo. I have several help icons and by mouse hover on each of them, a separate message should be shown just for that help icon. reading documentation I am confused between this: $( ".selector" ).tooltip({ items: "img[alt]" }); and this one: $( function() { var tooltips = $( "[title]" ).tooltip({
Problems with a userscript library
So I have me a little personal library with functions common between my "Olympian" userscripts (since they're all named after Greek gods) which I include into each script with the requisite: // @require https://greasyfork.org/scripts/22593-mount-olympus/code/Mount%20Olympus.js?version=146437 Problem is that I get the error: Uncaught TypeError: $(...).draggable is not a function on line 219 when I require this script into another and I have no idea why. I've used the jQueryUI library in other
Currently i am doing a school project, i want to do a mouse over on canvas element which is the draw image motion to display the date and time in my sql database
<script> window.onload = function() { var outputx = <?php echo json_encode($outputx) ?>; var outputy = <?php echo json_encode($outputy) ?>; var outputid = <?php echo json_encode($outputid) ?>; var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); var backgdImg=document.getElementById("bg"); var motion=document.getElementById("mt"); var pat=ctx.createPattern(backgdImg,"repeat"); ctx.rect(0,0,1020,600); ctx.fillStyle=pat; ctx.fill(); var i = 0; var
Disable back button in All the browsers using Javascript
I'm trying to find a way to disable the browser back button. After some googling I found this page: Disable back button in browser According to this page the best method is using this code: history.pushState({ page: 1 }, "title 1", "#nbb"); window.onhashchange = function (event) { window.location.hash = "nbb"; }; But, there is no explanation for the code. What is "title 1"? nbb is just an ID? Can some one please explain the whole code a bit more? Thanks
Rotate image follow mouse jquery with smooth transition
I am trying to make an image rotate when you hover over certain items on the page. It uses the solution provided here (with edits for my purposes): http://stackoverflow.com/a/10235298. You can see an example of what I am trying to achieve here: https://jsfiddle.net/t100gq25/ HTML: <div class="container"> <a href="#" class="menu-1"> <img src="http://placehold.it/140x35&text=4" class="animation-trigger"> </a> <a href="#" class="menu-2"> <img src="http://placehold.it/140x35&text=1"
Dialog with no selector
Dear Everyone, I'm building a jQuery UI Dialog for the first time using the following line of code: $("#demo").text('Are you sure ?').dialog({width: 250}); But attaching the dialog to an html element is causing problems. All I want is a confirmation dialog box independent of the page html. Is this even possible with jQuery UI ? Thank you all in advance.
Jquery UI Tabs for Dynamically generated web page
Hi, I tried to use jquery UI tabs for a PHP site. Below are the HTML code: div class="content-wrapper" id="tabs"> <ul> <li><a href="/dashboard/school/7834e2a8-93c5-a75a-7e1c-c249afd54762#alreadySponsored">Already Sponsored</a></li> <li><a href="/dashboard/school/7834e2a8-93c5-a75a-7e1c-c249afd54762#alreadySponsored#newApplication">New Sponsor</a></li> </ul> <div id="alreadySponsored"> </div> <div id="newApplication"> </div> </div> But I got error saying
Show and hide div, css, ancher point
Hej, my first post here and really need your help. I have made this site http://tinemuller.dk/gis-afdelinger/ with info for each council and hope all 98 councils will use my service and then it will be a very long doc. I found this site https://www.zetland.dk/ and really like the way they use +/- to show a div. and would like to use the same on my site so when people click on a council they see the info for only this council. Would also like if it was possible to anchor to each councils info so it's
HI
Below snippet how to make alert message on the input field when its in empty and unfilled <script type='text/javascript'> $.validator.addMethod("pan", function(value, element) { return this.optional(element) || /^[A-Z]{5}\d{4}[A-Z]{1}$/.test(value); }, "Invalid Pan Number"); $("#myform").validate({ rules: { "pan": {pan: true}, }, }); </script>
Jquery search between two dates
I have problem with Jquery searching between two dates. If I search like this: 18/02/16 - 30/05/16 I can find files which is between them. My problem is that im searching it like filename because file date is in filename. (When file is created) My directory tree: function DirTree(title, ajaxcall, post_action){ $('#big_modal-2').html(' '); var output = '<p class="lead text-search-info">'+title+'</p>'; output += '<hr />'; output += '<p id="dir-links" class="lead"><?php echo
passing text from dropdown-menu to ajax with jQuery
Hello i want to send the text from selected dropdown-menu items to my service via ajax. How do I accomplish this using JQuery Below is what I have tried: But doesn't work. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
how to append values in dropdownlist box using another dropdownlist
I have 3 textboxes.I need to append values according to previous dropdownlist .I have retrieved val for 1st textbox from json file(autocomplete) I have some values in 2nd field , I need to append values to 3RD field according to 2nd field.. I have retrieved values. But need to append to dropdownlist. I need to get the length of retrieved values.(count the retrieved values) I am getting undefined. please check the updated link.. and screenshot. https://plnkr.co/edit/C6ODswCppxH6uZlOtjCB?p=preview
Show/Hide textfield base on choice on dropdown list
Hello, To Show/Hide textfield base on choice on dropdown list which function should I use? I have no seen this ability on demo site, please give direct link. Regards,
Do selectors make a copy, or do they point to the actual element?
I have the following code: var elementList = document.querySelectorAll(".dotImageCommentClass"); top = elementList[0].offset().top; A diagnostic alert tells me I have an image (or array of them) but I get an error that the 'offset' property is not supported! Why is that? Thanks.
Getting NULL in web api Post
Hi all, I'm starting to get a handle.... a little bit. My jSon should be passing a parameter to my Post Web Api but it's passing a null, or the web api is GETTING a null. Json: <script> var uri = 'http://localhost:58021/api/SedgwickEvent'; function Count() { var counter = $('#counter').val() ; $.post(uri, counter) .done(function (data) { alert('success: ' + data); }) .fail(function () { alert('error: ' + Error);
If I iterate through a selector, what order of elements do I get?
Suppose I dynamically add three images, one after the other, to my document. They all have the same class, so I can use a jQuery selector for the class to retrieve them all. The third image has a position on the page near the top. They are all within a DIV. I would like to retrieve them in order that the appear to the human eye. But a class selector would retrieve them in the order that they were added, so the image nearest the top of the page is retrieved last. I suppose I could sort the images
Next Page