Working with Selctors: setters and getters
Hello again, still working on the jQuery basics tutorial. So I'm at the setters and getters sections and the documentation states: Setters affect all elements in a selection ---ok got it..then it goes on to say: whereas getters return the requested value only for the first element in the selection -- in my html I added three <p> tags and when i used: $("p").html() all three <p> tags were returned. I was under the impression from the documentation that only the first one was supposed to be returned
Wrong link handler fires
Hi there, I have this code which adds a row that consist of a td which holds 2 links, a tag's, each have its own click event handler. Clicking the Add link fires both links click handlers while clicking the Cancel link fires the Cancel event handler only. Why does the Add link fires both handlers ??? Thanks, Shai
JavaScript and Custom Error Messages on an HTML5 Contact Form
I am trying to add custom error messages to my HTML5-based contact form, with JavaScript, and I encountered an issue in that, though I can get the custom messages to trigger on an invalid entry of a form field, they also trigger and prevent the form's submission when the input's validity conditions are satisfied; below you will see the javaScript and corresponding HTML markup, that relates to this issue; how can I fix this?: <label>Name <input required id="name" name="name" placeholder="Name" tabindex="1">
Jquery Autocomplete Plugin Linked list help.
Hi, I am using JQuery Autocomplete plugin with a linked list. When I select an item and hit enter, it takes me to that linked webpage. I would instead like to modify the behavior so it changes the src of an iframe which is on the same webpage. Any one have any idea on how to do this? I have a working linked list below and I've tried to change the src of a iframe called "myframe". The content of the ifame changes but it shows as "file or directory cannot be found". Can any one help? I'm sure its something
jQuery Ajax parsing the response data properly --
Hello members. I need help on a certain jQuery data parsing thing. I’m doing a regular jQ ajax call and executing some server side code in C# which is returning me data. The data which the server code is returning, is basically nothing but an object of a model class [which has some properties of its own] with the values assigned to the properties fetched from db. That’s all fine. Now in the block where I am receiving the response like success: function(data) { //things need to be done
What's supposed to be the correct syntax to call function that has jQuery ajax within?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> // ajax call for a server side script with State and County parameters function ckCounty(st,cunty) { $.ajax({
url: 'whateverScript.file?state='+st+'&county='+cunty,
success: function(rtn) {
if (rtn > 0)
{
return 'green';
}
}
});
} var Color
Different messages for dialogs with the same html
My code here https://jsfiddle.net/Twisty/mafnxaxq/ It uses the same dialog for both delete and logout. I want to have separate message for delete and logout. I want to use this html for dialog for all messages: <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span><span id="messageText"></span></p> with html above, what changes do I need in jsFiddle code above to output different message for logout and delete?
How to Associate / Synchronize Progressbar Uploading File Process
Hi All, I need to Sync progressbar with my uploading file process. For that matter I'm using jquery ui progressbar. I copied some code from jqury site and tried to sync with my uploading file when i execute code progressbar displays 'Completed' and file still uploading. My question is How to Sync progressbar with uploading file? js code $(document).ready(function () {
$('#btn').click(function (e) {
var files = $('#<%= imageUpload.ClientID %>')[0].files;
if (files.length > 0) {
var formData
several datePicker on a form
I have a form with several independent datePicker (not start/end datePicker fields), if I am correct I need to have a separate datePicker js code for each of them, I am wondering if a trick is possible to have one js code for all of those fields with separate date chosen?
Draggable position is not recognizing max-width
I am using Draggable and Droppable in my site. Everything works great until I expand my window past my max-width stated in my CSS. then I do this, the draggables no longer appear where the curser is. They appear to the right, in varying distances depending on how wide my window is. When I turn off the max-width property, the draggable stays where the cursor is. I'm including screen shots of this: The draggable is on the cursor when my window is smaller than my max-width: The draggable is to the right
dialog box looks weird
I have a confirmation dialog like this: $(function() { $("#opener").click(function() { $("#dialog").dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "Logout": function() { $(this).dialog( "logout.php" ); // ???? }, Cancel: function() { $(this).dialog( "close" ); } } }); }); }); <img src="cross.png"
How to Retrieve Combobox PromptText After Closeing jQuery Dialog Box
Hi all I'm using jQuery ui Dialog box and I've a combo box in the dialog box. Problem is when I select any value form combobox and close the combo box when I reopen the combobox it keeps selected value. I need to retrieve Prompt Text when the dialog box close or open. js scripit $('#divPopup').dialog({
autoOpen: false,
show: {
effect: 'blind',
duration: 800
},
hide: {
effect: 'explode',
duration: 800
},
Problem with .each() function
Hi all, I have a problem with .each function. FIDDLE I store strings in an array called "$list2" using .each function on an array("allElems"). The problem is when I read $list2 I see that the word "undefined" is concatenated to one of the strings in the array. I debugged it and I see that the last index is not supposed to be added, but it does. For example: Let's say there are nine (9) items in the array("allElems") . The index range of that should be 0-8, right? When looping through it with .each,
Dynamic Dialog Box on area Tags
Hello @ll, can her help me? My Problem was the Dialog Box on <area> Tags. Pastebin: Code Bialog Box does not open. Thanks for your Help. Marco
expandable category menu
Is it possible to make this category menu expandable? http://jqueryui.com/menu/#categories I mean wheh clicking on main category then sub-menu appear, clucking again sub-menu disapear, in fact clicking main catrgory expand sub-menu? Possible? How to do it?
Datepicker "Today" button not working?
Hello all, I'm having problems with the Datepicker "Today" button working (it doesn't seem to be working). The online demo at http://jqueryui.com/demos/datepicker/#buttonbar seems to be having the same problem as my local version as well. If you pull up the demo url above and click inside the text field (to trigger the datepicker), then click the "Today" button (and "Done") at the bottom of the calendar, you'll see the current date is not populated in the text field. Clicking other dates works fine.
getting value of a clicked element
If I have an img tag with id="blah" and value="x" I know can get the value with: $('#blah).val(); but if I have that several img tag created in a foreach() loop, how can I get its value as several selectors with the same id is not possible? probably I can use id="blah[]" or I can append an incrementing id like id="blah1", id="blah2", then how can I get the value as I will not know the id? or may be I should just use a .click() event to get the id of clicked element then get its value by id? if yes,
JQM events and navigation
I have sample site with three pages: home.html <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Home</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" /> <link rel="stylesheet" href="css/swipe.css"/> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript"> /* Here is where you would wire in the jqm mobileinit event such as: $( document ).on( "mobileinit" , function () { $.mobile.toolbar.prototype.options.addBackBtn
Width of progress bar incorrect
I created an animated progress bar but it doesn't work as hoped for. I want 20% of the bar to show up but 100% of the bar shows up instead. It does however show the percentage correctly. I link to jquery and modernizr. Here is my javascript $(document).ready(function() { if(!Modernizr.meter){ alert('Sorry your brower does not support HTML5 progress bar'); } else { var progressbar = $('#progressbar'), max = progressbar.attr('max'), time = (1000/max)*5, value = progressbar.val(); var loading
Dialog content to clipboard
Hello, the below page simply open a jqueryUI-dialog box printing same colored text. Ideally the "Copy to clipboard" button should make a copy available to user. Unfortunately leveraging on textarea element and document.execCommand('copy') it only copy the underlying code: ie: <span style='color:red;'>This is a red text</span><br><span style='color:green;'>This is a green text</span><br><span style='color:blue;'>This is a blue text</span><br>If instead I press CMD+A, CMD+C then paste with CMD+V I
Jquery Drag and Drop
HI, I Want to drop an item to all the cells of a table at a time not only the single cell, and make that item draggable and droppable in jquery.Please help on this.
Trying to print an image from Magnific popup using PrintArea
Hi, Is there anything to look out for when using PrintArea to print an image that is displayed from a Magnific Lightbox popup. My code is $(document).ready(function(){ $("#printButton").click(function(){ var mode = 'iframe'; //popup var close = mode == "popup"; var options = { mode : mode, popClose : close}; $("mfp-content").printArea( options ); }); }); When executing, print window appears but only header & footer information is appearing in the preview. Thanks
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
JQuery Multipage template links stop working
Hi We have a JQuery multipage template. If we start clicking links on the left one by one , all of a sudden you will see the screen without any click browser starts displaying the pages back in history at the end of it,no links can be clicked on the left hand side. We have not added any functionality yet. Pure JQuery webpage with styles. http://ec2-52-91-5-22.compute-1.amazonaws.com:8080/prodcastweb/V4/index_jaget.html#home Searched several forums but could not find an answer out for this issue.
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"
Next Page