May I create my class which inherits from jQuery's
I want to inherit the base class of jQuery and create my own tag, such as var mytag=$('<mytag/>') to return my own tag element. Mytag does not necessarily correspond to a single tag. It can be replaced by a brand new tag group, similar to: $('<InputGroup/>') returns not <InputGroup></InputGroup> but <div class='input-group'> <label> </label> </div>. I have looked up the $. extend and $. fn. extend methods, but none of them can satisfy my expectations, so what are the good ways to implement them for
Validating form for company email address pattern
How can we validate an email field using jQuery so that it matches the pattern of our company's email address convention, which is four letters followed by either five numbers or four numbers and a letter? All that would be followed by the domain, which is seven letters followed by dot com. Examples: abcd12345@acmecor.com abcd1234z@acmecor.com
stopping video play for multiple popups
Hi everyone, I am really stuck with my piece of code. I have a page full of links to popups, and each popup has a youtube video inside. If you play the video, when you close the popup, the video doesn't stop playing automatically. I can stop the video playing with only one video, but the rest don't stop. I am also using a Wordpress ACF loop, so each video url is being generated dynamically in the loop, which I think is causing the issue. The test site I am working on is here: https://new.pyrographix.co.za/category/projects/live-video-production
Count checked checkboxes and 2 dropdown values in each function
I have the code below, and I’m trying to work out how to use count to see if the number of checked checkboxes is more than 1, if so show green tick, if not don’t show, but I cant work out how to count those values. As you see it below is where I’ve given up trying everything else, and left it at that point to show. $(document).on('hide.bs.collapse', ".collapse", function () {
var card = $(this).closest(".card");
ProcessTickFunctionality(card);
});
function ProcessTickFunctionality($card)
Show/Hide div on radio button checked
I am trying to Show/hide a div based on a radio button checked. if weekly radio button is checked, hide the div items for Monthly and if monthly Radio button is checked hide the Div items for weekly. My code is not working. Weekly Recur every weeks(s) on: Monday Tuesday Wednesday Monthly The first second third fourth last
New to JS/jQuery
I'm attempting to write what may be my first jQuery/javascript code (rather than copy/paste/tweaking) and have run into an issue I'm not quite how to resolve. I have a title input field (in this case in a Drupal site) that I want to auto-populate the content into based on the choices made on three other input elements... a radio input element, then two select elements. It's all working at this point, but the input values for the month options are numerical verse text, and I need to feed the name
How to simulate the play even without clicking through the code below
Hi, how to simulate the play even without clicking through the code below: function registerKeyHandler() { document.addEventListener('keydown', function (e) { switch (e.keyCode) { case 13: // Enter player.toggleFullscreen(); break; case 10252: // MediaPlayPause case 415: // MediaPlay case 19: player.playPause(); break; case 413: // MediaStop player.stop(); break; case 48: //Key 0 log(); break; case 49: //Key 1 setUhd(); break; case 50: //Key 2 player.getTracks(); break; case 51: //Key 3 player.getProperties();
Hide elements that are not siblings to the clicked element.
I am trying to hide element that are not siblings to a clicked element but it doens't seem to work. The toggle aspect works perfectly. However, if click on another row, they all still open even those that not siblings to the licked element. Any ideas on how this can be achieved. My code looks like below. $("td i.material-icons").click(function () { // alert("It should be hidden"); $(this).siblings("ul.messageNav").toggleClass("showMessageNav"); $("ul.messageNav").not($(this).siblings("ul.messageNav")).hide();
Custom Sort for Datatable
i wan to make custom sort - descending by first column <table class="table table-striped table-bordered data display nowrap" style="width:100%" id="data"> <thead> <tr> <th>ID</th> <th>Date</th> <th>Customer</th> <th>Total</th> <th>Notes</th> <th>Created By</th> <th>Action</th> </tr> </thead> <tbody> <?php foreach($so as $s) { ?> <tr> <td><?php echo $s->Doid ?></td> <td><?php echo date_format(new DateTime($s->Tgl),"d M Y") ?></td> <td><?php echo $s->name ?></td> <td class="text-right"><?php echo number_format($s->total)
Add Text on Image
How do I add text on an image using the .html() ? Please see code below: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <h2>JQuery Lab</h2> <div id="Tile1"> <div><p /></div> <div class="dummy"> <a> <img width="300" height="60"> </a> </div> </div> <script type"text/javascript"> $(document).ready(function(){ $("#Tile1 .dummy img").attr({'alt':'this is a test', "src":"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"});
Having Issues Replacing Image
I'm trying to replace an image. what am I missing? I don't really need to replace it. I can just inject it inside the div ccl-test-from tag as well. <div id="adArea"> <div class=".ccl-test-front"> <img src="/image/abc.jpg" alt="Smiley face" width="80" height="60"> </div> </div> $("#adArea .ccl-test-front img").attr({"alt":"This is a test!","src":"/image/xyz.jpg"});
Ajax GET Prompting for Credentials
Hello: I'm making the following Ajax call using credentials I've read from a JSON file. The credentials passed here are correct (I've verified using a debugger); however, I'm still prompted to enter them despite them being passed in the ajax call. What am I doing wrong? // Load data into jsGrid function loadGrid() { $.ajax({ type: 'GET', url: 'https://apps.xxxxxx.xx.xxx/kudosapi/report?member=1', xhrFields: { withCredentials: true }, headers: { 'Authorization': 'Basic ' + btoa(window.creds.kudosapi.user
Binding of tablesorter in easytabs not working for several tables.
I would like to have one tableSorter per tab in the content. Binding is only possible for one tab. In the other tabs, the table is hidden when using tablesorter. Here the tables without tableSorter in Fiddle. and here my try with tableSorter: fiddle (with tableSorter) What is wrong in the script and to do that tableSorter working for every tab. I do not get any error message or hint in the console.
How can I keep an accordion collapse or open inside a nav-tab after page refresh using Bootstrap 4 and Jquery?
I'm trying to mix Bootstrap 4 Nav-tab and Accordion. My nav-tab is working properly after page refresh it stays on the active tab and I want to do the same with the accordion. I want the keep the active accordion open or collapse when the page was refresh. <ul class = "nav nav-tabs"> <li class = "nav-item"><a href = "#monitor" data-toggle = "tab" class = "nav-link active">Book Monitoring</a></li> <li class = "nav-item"><a href = "#history" data-toggle = "tab"class = "nav-link">Book's History</a></li>
Using JQuery Validation along with Jquery Repeater
Hello, My name is Burhanuddin, I am trying to create a form that save Sales Invoices to the database. I am using JQuery Repeater Plugin to enable me to have dynamic number of rows for the number of products in every Sale Invoice. On the other hand, i am also successfully using Jquery Validation Plugin to enable me to check via Ajax if the invoice is already entered or not. My Task now is to setup an Ajax Check which checks if the product being sold is in stock or not, if not i should be able to display
return true or false for main function from sub function
Dear All I am, using following function to validate captcha calling checkcaptchafill.php to check whether entered value and session value No issue in getting the valuse / result of this ajax correctly..this part is running well the value of ajax call is stored in $('#captcharesultdiv') I want to check text stored in of this DIV after (after comparing or validating the CAPTCHA entered following ajax call does it well function formCheck(formobj){ $('#captcharesultdiv').text(''); var captcha= $("input[name=captcha]").val();;
Angular 7 - jQuery.Deferred exception: jquery__WEBPACK_IMPORTED_MODULE_5__.blockUI is not a function
Hi, BlockUI don't works with Angular 7? My component: import * as $ from 'jquery'; ngOnInit() { $(document).ready(function() { $.blockUI(); }); } My angular.json: "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/jquery-blockui/jquery.blockUI.js", "node_modules/bootstrap/dist/js/bootstrap.js", "node_modules/chart.js/dist/Chart.js" ] My dependences: "jquery": "^3.3.1", "jquery-blockui": "^2.7.0", Error message: jQuery.Deferred exception: jquery__WEBPACK_IMPORTED_MODULE_5__.blockUI
Looping with a couple of ajax calls
Hi, I've got an issue trying to get two ajax calls to loop and work together. the first ajax call gets the title from a group of items and the second ajax call gets an array of tests. so I want the web page to show the title and the first set of tests together then the second title and the second set of tests and so on. Title1 a-test1 b-test2 c-test3 Title2 d-test1 e-test2 f-test3 I just can't seen to get it right. Thanks Code below for (var i = 0; i < listReleasesid.length; i++) { console.log('list releases id ' + listReleasesid[i]);
Jquery to display only specific dates and hide the others
I want to know how to add jquery to this following pattern where 2015 needs to be displayed as none and adding 2020 should not let anything get affected. I tried to use n-th child and displayed none for all dates from 2015-1990 but then i realized if i add 2020 2016 would get affected 2019 2018 2017 2016 2015 <div class="article-list mb-3 archive-list"> <ul> <li><a href="#">2019</a></li> <li><a href="#">2018</a></li> <li><a href="#">2017</a></li> <li><a href="#">2016</a></li> <li><a
How to compare and highlight difference between two HTML tables using jQuery/JavaScript
Hi, I have a requirement to compare two HTML DIV differences. I am trying to figure out a way to see if i can compare the HTML table cells and highlight the difference in the second div, comparing with data from from first Div. I'm not sure if there is plug-in to achieve this. I have tried with a sample code on jsFiddle to compare First and Second Div content with Default Div content. But failed. Please assist. (It should highlight differences like shown here: http://jsfiddle.net/01pfcy2s/) but this
looping through each class gets thorugh validation
I am checking if each text field that has the class tyre_data check if the value is larger than 4 characters, if so, don't go to next stage and it does???!: here is my code: $('.tyre_data').each( function(){ // Tyre Tread if($(this).val().length >= 4) { console.log('in here'); $(this).closest(".check-option").find(".error-message").show(); $("html, body").animate({ scrollTop: $(".container").offset().top }, 500); return false; } });
Preventing blur event on fields when dialog close button clicked
Hi. I have a modal dialog with a field that has some processing (validation, normalization) that happens on the blur event. I want to skip this if the close button is clicked. How can I do this? Thanks.
trying to get the values out of this
I'm using an ajax call and this is what I get in return. I just cannot seem to put the right line in to get out the data I want. There are two objects in the "resultsForGroup" I want to get the id, name, state, incomplete tests and also the "resultsCountByOutcome", "passed" count and the failed count from both objects. Thanks to anyone that helps :) { "groupByField": "TestRun", "resultsForGroup": [{ "groupByValue": { "id": 1190124, "name": "Afresh Networks Tests", "isAutomated": false, "completedDate":
Doing something with jQuery after form successfully submitted
I have a form modal on a Bootstrap 4 page and want to display a success message in the modal after the form is successfully submitted, but my function is firing before validation is completed. Is it possible to plug in my post-validation jQuery in here somewhere? (function() { 'use strict'; window.addEventListener('load', function() { var forms = document.getElementsByClassName('needs-validation'); var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit',
XMLHttpRequest: Network Error 0x2ee2, Could not complete the operation due to error 00002ee2
We have a piece of code which uploads multiple files to the server, interestingly this code is working fine on Chrome & Mozilla, but it's failing in Internet Explorer, receiving the following error XMLHttpRequest: Network Error 0x2ee2, Could not complete the operation due to error 00002ee2 We tried solutions mentioned in SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3, Could not complete the operation due to error 00002ef3 but still getting a similar issue We changed timeout value for Internet Explorer
HOW I CAN PUT A LINK IN A TABS?
HI, I MODIFY THIS CODE, I WOULD LIKE TO MAKE A EVENT THAT CLICK THE BUTTON AND GO TO A LINK I SPECIFIED. THIS IS THE CODE: <div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content"> <ul role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header" center> ..... OTHER CODE ...... <li role="tab" tabindex="-1" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" aria-controls="tabs-7" aria-labelledby="ui-id-7" aria-selected="false" aria-expanded="false"><a
ajax success div with same name problem
I have a while loop writing rows from the database as separate forms on a page. Works fine. It writes a hidden div just before each closing form tag. They all have same div id. I call a success function that fills in this hidden div with a success messages. Problem is no matter what form I choose the output always gets written to the first form on the page. I have to somehow determine what form was clicked and then tell the success function to use that div name. Not sure how to go about that.
Choose 1 form to submit with multiple forms on page
I have a page with multiple forms on it. Each form as different id but same name and consist of only radio buttons. I want to perform a submit via ajax but U am having a hard time only choosing the correct form in my code. What do I need to only submit the form where the radio button is selected. I have it working fine with only one form on the page. <form id="1" name="myForm"> <input type="radio" name="contract" value="0" class="custom-switch-input" checked> <input type="radio" name="contract"
Autocomplete change background color of focused element on up/down arrow
Hi there, I have a requirement to highlight the focused element with custom background color from the suggestions when the user navigates through the suggestions using keyboard up/down arrow keys. Currently the background color of the focused element is changed when user focuses the element by mouse(when user hovers the element with mouse) using CSS with :hover. But the background color of the focused element is not changed when the user focuses the element using keyboard up/down arrows. I want to
auto complete is not working
please find below code here is the error CreateTopic:70 Uncaught TypeError: $(...).autocomplete is not a function at HTMLDocument.<anonymous> (CreateTopic:70) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.J (jquery.min.js:2) @{ ViewBag.Title = "CreateTopic"; } @*https://uigradients.com/#LightOrange*@ <html> <head> <title>MyCSS - No Master Layout</title> @*</script>*@ <script
File Drag and Drop
Has anyone come across a way of dragging and dropping files then uploading them when the form is sent. I have got it to work for one file but now I have found out that the client wants to do it for multiple files and remove any if there was a mistake before uploading them. Thanks
How To Select a Specific Option Based on a Condition
I have a table with many rows. Each row contains a select drop down with only 2 options, "Active" and "Deactivated". I wish to offer the user an alert message based on which option they select. The code I have can not distinguish one select from another select. And so returns "true" no matter which option I have selected. I have spent days hunting through SO and nothing works. Here is the HTML Snippet: <td class="category_select"><select class="edit_cat" name="category_value[]"><option value="active"
$.tmpl render html as string
Hi All, I have below snippet of code, expecting to have html page render anchor element whereas it shows as string value. what am I missing, please help me. var lineStartTemplate = $.template('<div class="line"> <span class="name">${name}</span></div>'); var wfDocName='<a href="#" onclick="javascript: viewWfDoc(\'' + clientReq.relatedContentID + '\'); return false">' + documentName + '</a>'; var tItem = {name : wfDocName}; var value1 = $.tmpl(lineStartTemplate, tItem); container.append(value1[0].innerHTML);
Pass html table in POST using jQuery
i want to get all data in table and post using ajax the problem is inside td there is an <input> before i put a condition result like this : -->{"table":[{"row0":[]},{"row1":[{"cell0":"01509"},{"cell1":"HVS BOLA DUNIA 70 GSM A4"},{"cell2":""},{"cell3":"RIM"},{"cell4":""},{"cell5":"320,000"},{"cell6":""}]}]} cell2 and 4 are empty <table id="so_data" class="table table-bordered table-hover"> <thead> <tr class="kop"> <th class="text-center" style="width:50px;">Code</th> <th class="text-center">Description</th>
how do I eport json to variables and access the values
Please see the JSON below. This is what I get in a ajax response. I am new to javascript and need some help. How do I set, for example the Fields(third line down) to it's own variable and then query the variable to show the subfield. for example fields.System.WorkItemType. As the System.WorkItemType has a dot in the middle of it does this make a different of how to get the value? "id": 45, "rev": 1, "fields": { "System.AreaPath": "H3P", "System.TeamProject": "H3P",
Javascript Audio Player Sync Progress Bar Background Color or Image to currentTime
I have a javascript audio player that is able to track the timing or stay in sync while the song is playing and when the user clicks on the progress bar, the slider handle will set the value of the "audio.currentTime". Here is the actual audio player that I'm currently testing. Please take a quick look: http://newsletters.aaronestebancoaching.com/test1/1.html But what I'm trying to do is create either a background color or background image that will also move along the progress bar to sync up with
how to save checkbox state wehn page is reload
Hi, I have a checkbox, I've defined two state for it, and when I reload page, this checkbox back to the default state (or unchecked). I got in trouble at the forum, but I did not get my answer. This is my code. :$(document).ready(function () { $('#mycheckbox').change(function () { var returnVal = ("Are " + "you sure?"); if (returnVal) { postToServer($(this).prop("checked")); } else { $(this).prop("checked", !$(this).is(":checked")); }
Event delegation for dynamic table with button
<input type=button> column is created in each row. Id attribute is assumed to be okay to use. Documentation has said that in a handler the selector ':button' will work for both <input type=button> and <button>. The table with INPUT tags having values of record number is created. But clicking on a choice does not respond using these dynamically created columns and it appears that event delegation is being thwarted somewhere. $(document).ready(function() { $('#studentlist').on('change','#selectstudents',function()
Refreshing a page implicitly without the user noticing
I was wondering if there is a jquery way to implicitly refresh a page without the page blinking, i know the common way is like this below. Regards <script> $(document).ready(function(){ $("#divid").click(function(){ location.reload(true); }); }); </script>
When user click on close tab, display error if form is not validate
Would you please give a solution for this: When user click on the close tab of the browser, display error if the form is not validated.
Next Page