How to prevent a DOM show using jQuery
down vote favorite Is there any methods to prevent a DOM in jQM show until data is ready loaded? I have two pages, need to get data from JSON and i don't want to show them when data haven't ready loaded into them. And here is what i did but it not work. I have two page #palvelu and #varaus in index.html file. var varausJarru = $.Deferred(); var palveluJarru = $.Deferred(); $( document ).on("pagecreate", "#varaus", function () { getJson(); varausJarru; }); $( document
Closing a Modal Popup from a
I have this code: <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.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type="text/javascript"> function ShowPopup(message) { var _dialog; $(function () { var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0"
using new Features of jquery(2.2.1) in old version of jQuery (1.4.4)
One of my client is using drupal cms for his website . drupal uses jquery version of 1.4.4 . I have build a pulgin which is using jquery of version 2.2.1 .Whenver he install my plugin he got the error of Uncaught TypeError: $ is not a function(…) when i link jquey version 2.2.1 my plugin works.he dont want to upgrade the jquery version . is there any way he can use my plugin in jquery veerion of 1.4.4. He also dont want to include 2 jquery as it will increase the load time of his website. please
item selected in checkbox & show/hide
Hi I have the following code. this works only for one row. I want this should work for both rows & also if I select the top checkbox, then it should select all the checkboxes to show all items in the table. there are Qty & Option column, I want these item should not be visible until I select the checkbox. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-us"
code.jquery.com CDN is down!
I'm getting too many redirects when trying to pull code.jquery.com/jquery-1.12.4.min.js Been working for years, looks like it's been broken for about 15 minutes now. Pete
JQM fixed footer “floating” issue
In JQM I want to have a fixed footer but at the same time have a max width of the page (contents to the left). It works fine until I add data-position="fixed" (fixed footer). The footer now fills the whole window and not just 480px. Is this OK or is it a bug? Any ideas how to solve the problem? <div data-role="footer" data-theme="a" data-position="fixed"><h1> </h1> </div> JS: $(document).ready(function() { if ($(window).width() > 480) { $('#page1').css('width', '480px' ); }
Loop Finder
Hey everybody I need to write a script using jQuery, but am totally stuck on how it would be possible. If you checkout my example HTML code below, you will see that it is a series of DIV's. The DIV's are all linked, for example; * The DIV with ID 111 is connected to the DIV below, because that DIV has a "data-one" value of 111 * The DIV with ID 222 is connected to the DIV above, because that DIV has a "data-two" value of 222 Basically the DIV ID values are linked to another DIV by reference of either
jquery autocomplete update of multiple fields
Hi, I wonder if anyone can help... I have adapted the jquery autocomplete to update multiple fields on autocompletion of the source field which in this case the id of the input field is Company. As an example the additional input fields have an id of Telephone and Mobile. When i run the example the auto complete picks up the relevant data from the database table and subsequently populates the Company field wen a value is selected. However the values of Telephone and Mobile do not populate. I have
How tosecurely append items securely with Jquery
Hi; What's the right way of doing this without breaking the page and dealing with XSS? var str = $('#embed_text_input').val(); if (str.toLowerCase().indexOf("apple") >= 0) { var embed_button_title = "Apple"; var icon_value = "fa-apple"; var found = true; } var append_item = "<div id = \"full_embed_button_"+embed_button_id+"\" class=\"input-group\"><span class=\"input-group-addon\"><span class=\"fa "+icon_value+" \"></span></span><input class=\"form-control btn btn-default\"
Popup Generated Not Responding
Hello all, I am new to jquery. I am trying to bring a popup dynamically which contains an MCQ type question. The problem is when the game is being paused in the background along with it the popup is also paused and the selection of the options cannot be made, only the submit and continue button in the popup are working. please help!! index.html <div id="popup" class="modal-box"> <header> <!-- a href="#" class="js-modal-close close">×</a --> <h2>Which of
Jquery code for persist hiding table rows upon dropdown selection or checkbox checking
I have no clue how to write the code for that. I got the checkbox and selection persist down with help of this community, but i get the feel the code for persisting hiding table row will be very different. can you give me some hints?
Selectmenu have a bug when resizing window of browser
Hello guy, I need some help. When i resize window of browser, the selectmenu have bug like picture. Can you help me fix it? Thank you very much.
1px loading progress bar at bottom...Can be disabled?
When I change page using the following code. $.mobile.pageContainer.pagecontainer("change", 'products.html', { role: "page", reloadPage: true, allowSamePageTransition: true}); There is a little progress bar at bottom (I think it is 1px height). Is there any way to hide it/disable it? Thanks.
overscroll on iOS not working after changing pages....
iOS, I have added the <preference name="DisallowOverscroll" value="true" /> and <preference name="UIWebViewBounce" value="false" /> in the config file already. There is no over-scrolling problem on the first page. However, after I changed the page, then the page can be over-scrolling. example of my code $.mobile.pageContainer.pagecontainer("change", 'products.html', { role: "page", reloadPage: true, allowSamePageTransition: true}); Is there any way to fix this problem?
element.style { }
I am new to the CSS world .. I need to change this part in the elementsStyle but I do not know how to do it, I wanted to change the 64px by another value, not to have to scroll inside the div and that the size depends on the sections inside.
upgrade from 1.6 to 1.12 question
Is there a quick and easy guide that can list the changes from 1.6.x to 1.12.x? thanks
FormData problem
Hi, I'm trying to send uploaded files without form using Ajax. I've a problem with FormData. Here my example: HTML <input type="file" name="file" class="jfilestyle" data-theme="blue" data-input="true" data-buttonText="<i class='fa fa-upload' aria-hidden='true'></i>" >JQUERY: var myfile = $(':file').prop('files')[0]; var data = new FormData(); data.append('file',myfile); var mytest= "test"; $.ajax({ type:'POST', url:'test.php', data{ data:data, mytest:mytest
Trigger tap after window reload
I have a form that's inside of a lightbox and I am trying to cache any user input to sessionStorage before an orientation change / window.location.reload occurs & then retrieve the sessionStorage key/value pairs & put them back into the form inputs afterwards. - 1) Caching any input - done - 2) If the form is in a lightbox & in mobile browser, then I need to trigger a tap on the a link: a[data-rel^="lightcase"] after the window reload - 3) Write the key/values to inputs - mostly written, but need
jQuery FadeIn / FadeOut inside a loop
I'm using a simple jQuery function to create a small image slider: $( ".grid-item" ).mouseover(function() { $(this).find(".slide-image").each(function(index) { $(this).delay(800*index).fadeIn(0); }); }).mouseleave(function() { console.log("Mouse Out!"); }); If the function plays once, it stops. Is there a way to loop the function? Check out my CodePen!
select an item from a list box & enable same type in other list box
Hi at first I am really sorry to put this much code. I am new to javascript. I have multiple list boxes, what I want is, when I select one or more iteams from 1st list box, all the related items in other list box should be enabled. please help me. <!DOCTYPE html> <html> <head> <title>Quotation</title> <style type="text/css"> .auto-style1 { text-align: center; } .auto-style3 { font-size: x-large; } .auto-style4 { text-align: left; } .auto-style5 { font-size: x-small; } .auto-style6 { font-size:
Trying to add functionality to hide multiple tables with hidden tbody
This code works but I'm having trouble figuring out how I can get this to work when multiple tables have hidden tbody. Right now, if there is at least 1 table with 1 row visible, then tables with hidden rows won't get hidden because the function isn't being applied to each table...Sunday at 7:00 for example. Fiddle: https://jsfiddle.net/qxexvjnn/
How to dynamically create option with Checkbox in html Select control?
Hi All, Fruits (Column Name) Apple Orange Mango I have a HTML select control. I am reading some data from database. Here for example I am reading Fruits which is having 3 value so it should create 3 Options with checkbox in Select Control.below is just example I want the same. When I select the any checkbox then it should show alert message which one is selected.for example in below pic if I select second checkbox then alert will be Second Checkbox selected. Please I want to create same but DYNAMICALLY.
How to sort a <ul> by the value of an input in every LI
Hello, i use a drag&drop-Plugin to sort lists. Now i would like to add a function to enter a numeric value, for very long lists, to place for example item 100 on third place. So i put an input in every LI, and try to sort the LIs by there values- actual code at the bottom. My problem is: how can i sort not by the "value" of the LI, but by the value of the input INSIDE the LI? jQuery(document).ready(function () { jQuery(".single_item input.sort_input").change(function () { alert ("WTF");
superfish menu on mobile
hi guys, i'm new on Joomla. I have a problem with superfish menu, i have set it and it work on desktop but on mobile it don't appear. menu isn't visible.. i don't see any possible set for mobile version and i don't know how resolve this problem.. i know that probably the solution is easy but help me please thanks so much christian
Rerun Qunit test with alternate js code, ie for extended logs
Context : a parser/validator module requiring 40 atomic tests, which are run with minified code for efficiency, using grunt/uglify for minification. When one test fails, I need to use the QUnit/rerun function of that very atomic test, but with an alternate code, in order to get extensive parsing logs in the console (1000+ log lines for one of those tests). The best solution I found is to grab the 'filter' url query parameter added by Qunit on rerun to detect if we currently are in a rerun, like so
Get size fo sum of file uploaded with blueimp
HI sorry for english . Im searching the way to found the sum of filesize uploaded with blueimp . I try this : <script> var sizetotal=0; $('#fileupload').fileupload({ complete: function (e, data) { $.each(data.files, function (index, file) { sizetotal=sizetotal + file.size; }); } }); console.log(sizetotal+'|'); </script>But in console i have : jquery.js:358 Uncaught TypeError: Cannot read property 'length' of undefined(…) The row is this : each:
Slider "slide" event not triggering, but "stop" event does
I am new to jQuery and Javascript and I am trying to dynamically add some sliders which all should trigger the "slide" event. Parts of it are working: when i click the button, I get 5 sliders on my page. But I have the following problems: - I get "NaN" as a tooltip when i hover over the slider. - The slide event is not triggered, but the stop event is. Funny thing is if I insert a slider directly into HTML (not dynamically), it works (it successfully calls a function that is not included in the
If NOT in array
Is this the right way to do IS NOT in array: $.inArray(tbodyNumber, ids) == -1 Since IS in array is: $.inArray(id, ids) != -1 id should be in ids, but tbodyNumber should not.
Toggle Play/Stop Button
How do I make this into one button that toggles play/stop? $('.play').click(function() { $('#jquery-video').get(0).play(); }); $('.stop').click(function() { $('#jquery-video').get(0).pause(); }); $('.toggle').click(function() {
if ($(this).hasClass('stopped')) {
console.log("stopped");
$(this).removeClass("stopped");
$(this).addClass("playing");
}
else {
console.log("playing");
$(this).removeClass("playing");
$(this).addClass("stopped");
}
});
</script>
How to use jquery in nested collections?
Hi, I am developing a web based application in ASP.Net MVC using Entity Framework following the example cited at http://www.itorian.com/2013/04/nested-collection-models-in-mvc-to-add.html. In the application, I have a one-to-many relationship between Employee and it's wife, daughter, and son. So to enable the user to add multiple wives, daughters or sons, views for Wife, Daughter, and son are created under an EditorTemplates folder. Then, as and when required these views are loaded using @Html.EditorFor(x
Better way to replace a text pattern?
Assume on a web page there are text strings with the pattern "aaa bbb ccc" (without double quotes). I want to replace them by a blank or even with nothing (=empty string). Until now I used the following javascript commands to accomplish this: var content=document.body.innerHTML; newContent=content.replace(/aaa bbb ccc/g,' '); document.body.innerHTML=newContent; Is there a better way with jQuery to do this? Is there a way to restrict the replacement to only <ul>......</ul> elements resp. their inner
Needing help in making jquery newsticker responsive
Ohk here are my codes: http://codepen.io/anon/pen/aBErLR As you can see i already tried with : function checkPosition() { if (window.matchMedia('(min-width: 400px)').matches) { } else{ $(function () { $(".quotes") .each(function () { len = $(this) .text() .length; if (len > 15) { $(this) .text($(this) .text() .substr(0, 15) + '...')
Jquery version/responsive issue
Hi, Would the version of Jquery affect the way my site shows up on mobile devices? My programmer upgraded the Jquery to version 3.0 a while back, this has negatively affected the sliders on my site which we are working to fix right now. I also just recently noticed how messed up the site looks on my cell phone...if I get him to change it back to the original 1.10 (the sites frame work was created with this version) would that fix this issue? Thanks. My site: http://www.brightname.cn/
Form input values *sometimes* fail to be returned even though input names are posted correctly
I'm hitting a wall trying to debug something because I can't reproduce it and hoping that someone has encountered something similar and can point me in the right direction. Everything is in the context of a custom WordPress Plugin. I doubt that has anything to do with it, but just in case. I have a plain old text form that needs to be filled out that looks like this: <div class="extras" doc_id="57c3eec28a9c7"> <div class="row"> <div class="cell right"> <span class="extra_desc">Field
how to pass variable to $('xxx'').click(function () {
I'm trying to pass a variable to .click function I have defined a var navFlag="home" $('.nav').click(function (navFlag) { alert("nav under construction - navFlag .. "+navFlag); }); // nav navFlag is returned as [object Object] What is the proper way to do this? Thanks for any help, R
.load transform to .ajax
I can't understand .ajax!!! Can someone help me this(.load) transform to (.ajax) var max = 5; var clicked = 0; var add = 0; $('#art-load-posts').click(function() { clicked++; var nextLink = clicked + 1; var add = clicked; if (nextLink <= max) { $('.none').before('<div id="artcontainer" class="pbd-alp-placeholder-'+ add +' artcontainer"></div>'); $('.pbd-alp-placeholder-'+ add).load('page/'+ nextLink
How do I make a Sum button with ajax
I have watched the video a couple times. For some reason, I just cannot figure out how to make a sum button that adds 1+2 when the user clicks on the hyper link "sum". https://www.youtube.com/watch?v=7faB8kV43eg Here is my view for /Home/Index: @{ Layout = null; } <!-- --> <!DOCTYPE html> <html> <head> <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <script> $(document).ready(function () { $("button").click(function
how to post a formdata object into ajax post call ?
i have a formdata object how do i post it using ajax post ? I tried it this way: but when i run it in the browser , it will just start an infinite loop, not sure why var formData = { name: "ravi", age: "31" }; //Array $.ajax({ url: "./Index ", type: "POST", data: formData, success: function (data, textStatus, jqXHR) { $("#div3").html(data); //data - response from server
How to make an ajax call that reverses a string ?
How to make an ajax call that reverses a string ? it does not do the ajax call, but goes straight into the controller reversethestring... i am getting a null reference exception ...string array is empty */ $.ajax({ type: "GET", url: './ReverseTheString', data: { input: 'abc'}, dataType: "json", async: true, success: function (result) { $("#result2").html(result);
Return values of scrollTop()?
Related StackOverflow question. A user on the SO forums asked about the return values inside jQuery's scrollTop(value). Because the documentation does not specify what this would be I thought they made an error. However, upon investigation I found that the second returned item is the current scrollTop position. But I can't figure out what the first is. You can see in the code example here that when scrolling the first value is always zero, the second is the current scrollTop. 1. What is the first
Next Page