Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x

jQuery

16K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

Hi, I have a page that's dynamically created. http://www.magickitchen.com/menu/thanksgiving.html

 I can't just change one of the URLs on the page, since they're created from a single block of code.

But I'd like one of those links, the one that says, "Build your own Package or Add to your Order" to redirect to another category page, /menu/thanksgiving-extras.html.  Can I redirect based on a phrase using jquery? Lik: if anchor text contains word Build, redirect to...

Thanks!
0
Create CentOS 7 Newton Packstack Running Keystone
Create CentOS 7 Newton Packstack Running Keystone

A bug was filed against RDO for the installation of Keystone v3. This guide is designed to walk you through the configuration for using Keystone v3 with Packstack. You will accomplish this using various repos and the Answers file.

Hello Experts,

This post is more or less to pick your brain about things/ideas I should implement into my current system. Basically, the only requirement for my system was turn my employer's paper-based car seat rental program into a paperless system.

Here are screenshots of my system:

Index.php
Index.php
Rental-form.php
Rental-form.php
Rent-success.pdf

(See attached PDF)

Return-form.php
return-form.php
Right now, the system does the following:
  1. Presents the user (coworker) with a choice to either rent or return a car seat;
  2. Provides an inventory of any available seats (from a MySQL database);
  3. Generates a PDF version of our current rental agreement using FPDF;
  4. Emails the generated PDF to the renter and another department in my office (not implemented yet); and
  5. Presents the user with an HTML table in order to return any rented car/booster seats.

Being that I am a hobbyist php programmer, I am kind of in the dark when it comes to certain things. My career has nothing to do with programming, either. I enjoy PHP and took this task upon myself for fun.
rent-success.pdf
0
Hi E's,
I try to do a simulator/emulator for test my pages in different devices.
The problem is when the resolution is higher then the screen that show the simulate, that broke the width of the screen.
For try resolve the problem I use this two codes:
<!DOCTYPE html>
  <html>
    <head>
<meta charset="UTF-8">
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="../../tutoriais/1435/materialize/css/materialize.min.css"/>
 
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
 
    <body>
        
        <div class="row">
            <div class="col s12">
                <iframe style="width:960px; height: 600px;" src="iframe.php" width="1920" height="1200"></iframe>
                </div>
            </div>
        
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="../../tutoriais/1435/materialize/js/materialize.min.js"></script>
    </body>
  </html>

Open in new window

<!DOCTYPE html>
  <html>
    <head>
<meta charset="UTF-8">
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="../../tutoriais/1435/materialize/css/materialize.min.css"/>
 
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
 
    <body>

<div class="row">
<div class="col s2 m10 l10 xl5">
<img src="ponte.jpg" class="responsive-img">
</div>
</div>

      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="../../tutoriais/1435/materialize/js/materialize.min.js"></script>
    </body>
  </html>

Open in new window

The first code is where I call the iframe, and the second is the iframe content.
I try to use CSS to reduce the size of the box, but not resolve the problem.

The question is, have any trick, for show high resolution screen in my simulator without broke the width?

The best regards, JC
0
I've got a form wizard with a form repeater and i need to validate a dropdown for each repeated form before accessing the next step. I've tried different solutions and managed to do the validation on the first form but it doesn't work for the repeated form. I hope someone can help me. Many thanks

You can see the html and javascript code in this fiddle https://jsfiddle.net/zwtj13wc/
0
i want to export HTML/CHART to PDF and excel
how can i do?.
0
I have the javascript where I am trying to do a simple show / hide of the div. but it does not work . please advice

http://jsfiddle.net/p51dytok/4/
0
Hi - I have the below line in my jsp and i am getting error saying
unterminated &lt;

 
var myString = "<img src='images/clear.gif' width='8' height='5'><mytags:dropdown  fieldID=" +"'"+ extDataID+ "'"+" category= " +  '<%=com.test.myString.GET_VALUE_TEST%>' + " selectedOption='' style='InputFields'/>";
			

Open in new window


so what is wrong in the above syntax is javascript not accepting <%= %>

I can pinpoint the error to this line because when i replace the above line with the below line no issues
var myString = "<img src='images/clear.gif' width='8' height='5'><input type='text' name=" +"'"+ test+ "'"+" maxlength = '40' size='64' value='' class = 'InputFields'>";

Open in new window


Thanks,
0
I have a script that has an on state and off state that are represented by images. What I would like to have is a 3rd image  state that is displayed when the user hovers, to show that the images are clickable, currently there is a div that changes content depending on the image that is selected.

Here is the current script

<script type="text/javascript">
            var preIndex = 0;
$("#divNavigate .imgNav").click(function() {
  var ix = $("#divNavigate .imgNav").index($(this));
  console.log(ix);
  $("#divContent .tab:eq('" + preIndex + "')").hide();
  $("#divContent .tab:eq('" + ix + "')").show();
  $("#divNavigate .imgNav:eq("+preIndex+")").attr("src","images/tab_"+preIndex+"_off.png");
$("#divNavigate .imgNav:eq("+ix+")").attr("src","images/tab_"+ix+"_on.png");
  preIndex = ix;
});

$("#divNavigate .imgNav:eq(0)").click();

        
        </script>

Open in new window

0
Hi - I have a table with default 10 rows and now i had a button to add 10 more rows, so when i click on that button new 10 rows must be appended to the table at the bottom.

The table has 4 columns
Label - simple label
integer - shows the count
dropdown - dropdown values to select
textbox

Now i wrote the javascript function for this as below but it has one problem
I am not able to assign unique id to each dropdown select - for example by default we have 10 rows so dropdown id fro those 10 rows are id1,id2,id3,.... id10
now when i click on add 10 rows button the new rows should have id's id11, id12, id13.... id20
so it depends on table length

function addDataRows(divname) {
   var tabObj = document.getElementById("detailTable");
var tableSize = tabObj.rows.length+1;
var strid = "id"+(tableSize+1);
   var newDiv=document.createElement('div');
   var html = '<select id = "<%=strid %>" ' + 
		'<option value="volvo">Volvo</option>' +
		'<option value="saab">Saab</option>' +
		'<option value="opel">Opel</option>' + 
		'<option value="audi">Audi</option>' + 
		'</select>';
   newDiv.innerHTML= html;
   document.getElementById(divname).appendChild(newDiv);
}
function addLRows(divname) {
   var newDiv=document.createElement('div');
   var html = '<input type="text" name="firstname" value="Mickey" maxlength="40" size="64" ><br />';
   newDiv.innerHTML= html;
   document.getElementById(divname).appendChild(newDiv);
}
function add10rows(Container1, Container2){
	

Open in new window

0
Hello experts.
I have a working jquery selectmenu with custom rendering showing for each option a flag and a country code.
The problem i have is to show the icon in my selected option too.
My code:
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
    change: function(event, ui) {},
    _renderItem: function(ul, item) {
        var li = $("<li>"),
            wrapper = $("<div>", {
                text: item.label
            });
        if (item.disabled) {
            li.addClass("ui-state-disabled");
        }
        $("<span>", {
            style: item.element.attr("data-style"),
            "class": "ui-selectmenu-flags-main ui-icon " + item.element.attr("data-class")
        }).appendTo(wrapper);
        return li.append(wrapper).appendTo(ul);
    }
});
$("select#country").iconselectmenu({
    style: 'dropdown',
    width: 160,
    change: function(event, ui) {}
}).iconselectmenu("menuWidget").addClass("ui-menu-icons customicons");
<select id="country" class="" name="country">
 <option data-class="flag_default" value="">select</option>
 <option data-class="flag_de" value="49" selected="selected">+49</option>
 <option data-class="flag_gb" value="44">+44</option>
</select>

Open in new window

In my example i m using a main background image.
The examples i found in the net are  using data-style atrribute with backround-images.(f.e.Here)
Any help to solve my problem?
0
The top UI technologies you need to be aware of
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

I want to call/executel the script below when I click the Li tag. What am I missing?
HTML

<li class="tabs" id="liNewIssue">New Issue</>


<script>
         $(document).ready(function () {
        $("#liNewIssue").click(function () {
            //$("div").empty();
            $('#txtIssuedID').val('');        
            $('#txtSummary').val('');
            $('#txtDetailsIssue').val('');
            $('#txtadvice').val('');
            $('#txtaction').val('');
            $('#txtAnalysis').val('');
            $('#txtResolution').val('');
 
        });
    });
</script>
0
Hi Following advise from here I'm attempting to build my table using Datatables

In the code bellow I get "TypeError: f is undefined  datatables.min.js (line 60, col 471)" so I'm clearly doing something wrong

I can't just load the data as I need to do stuff, I've added comments, while the data is loading I'm creating a Openlayers marker point (Outside this question scope)

The button is used to simulate the ajax call the table will need to be refreshed

Could someone give me a hand first fixing the error second how to get at & manipulate the data, as commented

<!DOCTYPE html>
<html>
  <head>
    <title>Data Tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/fc-3.2.2/fh-3.1.2/rr-1.2.0/sc-1.4.2/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/fc-3.2.2/fh-3.1.2/rr-1.2.0/sc-1.4.2/datatables.min.js"></script>

<script type='text/javascript'>
	$(function() {
      // jQuery
       $('button').on('click', function (){
          var link = "MOCK_DATA.json";
//          $('#MainTable tbody').html(table);
          

Open in new window

0
I am newbie to jquery, but I would like to have a div or div content display based on a icon or image selected. I would have 6 icons or images and based on the icon/image selected the div or content would display that relates to that icon/image. If possible to have a left and right arrow to cycle to content that would be great as well.

Here are two examples that I found and I like to reference...Thanks

https://www.bluefountainmedia.com/website-design (Section Labeled Web Design Process)
https://www.digitalhill.com/?a=what-we-do (Section Labeled Need Real Web Solutions)
0
Hi in the mock up bellow What I'd like to do is each time the button is pressed move the highlighted row to the top of the table

As this is a actual table Is this possible? I've seen examples of moving other elements and  sorting tables by column but not like this

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Table</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
	

<script type='text/javascript'>
	$(function() {
      // jQuery
       $('button').on('click', function (){
       $('tr').removeClass("highlight");        
        var ID = randomIntFromInterval(1,20);
         alert("Highlight row " + ID);
         $("#row_" + ID).toggleClass("highlight");

     });
});

function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}
</script>   
    <style>
      #MainDiv{
        width: 75%;
      }
  table.bordered {
  margin: 1em;
  border-collapse: collapse;
  border: 1px solid grey;
 width: 100%;
}

table.bordered td {
    border: 1px solid grey;
    text-align: center;
    font-size: 0.9em;
}
table.bordered th {
    border: 1px solid grey;
   background-color: lightgrey;
    text-align: center;
    font-size: 0.9em;
}

.static_headers {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
.static_headers  thead tr {
	 

Open in new window

0
Hi experts,
I have a ASP.NET MVC web application.

On my view page called Index.cshtml I have a hidden field that looks like this

<input id="HiddenField1" name="HiddenField1" type="hidden" value="5">

The value in my hidden field is filled by the value I select from a Drop Down List on my page.

Right now on my view page i have the JavaScript key/pair shown below which are integer numbers. The javascript key/pairs gets the values from some Razor variables I have on my page.

This works fine right now.

@{
    int MyFruit1 = 1;
    int MyFruit2 = 2;
    int MyFruit3 = 3;
    int MyFruit4 = 4;

}

<script>
    var Fruits = {
        Fruit1: @MyFruit1,
        Fruit2: @MyFruit2,
        Fruit3: @MyFruit3,
        Fruit4: @MyFruit4
    };
</script>

I want to revise the javascript key/pair called Fruit4. Instead of getting its value from the Razor variable.
I want it to get the value from my hidden field.

So then my code might look like this, but this is not working. I'm using jquery on my page.

Anyone know the proper syntax

@{
    int MyFruit1 = 1;
    int MyFruit2 = 2;
    int MyFruit3 = 3;
    int MyFruit4 = 4;

}

<script>
    var Fruits = {
        Fruit1: @MyFruit1,
        Fruit2: @MyFruit2,
        Fruit3: @MyFruit3,
        Fruit4: $("#HiddenField1").val()
    };
</script>
0
I'm trying to track down where the database logic is coming from on a page I've been tasked with troubleshooting.

This particular app makes use of some Boilerplates and some other JQuery logic which I'm trying to get my brain around.

Here's what I understand about Boilerplates and IIFE: http://brucegust.com/adm/terms.php

Where I'm a little puzzled with this particular page is I'm trying to figure out what it does. However obvious that might be to the trained eye, I'm looking for something that references or even implies a SELECT somewhere and I don't see how that would happen with this page.

Here's the code:

/**
 * Created by nhill on 9/12/2016.
 */
;( function( $, window, document, undefined ) {

    "use strict";
    // Create the defaults once
    var pluginName = "widgetIncentives";
    var defaults = {
    };

    // The actual plugin constructor
    function Plugin ( element, options ) {
        var plugin = this;
        plugin.element = element;
        plugin.$element = $(element);
        plugin.settings = $.extend( {}, defaults, options );
        plugin._defaults = defaults;
        plugin._name = pluginName;
        plugin.init();
    }
    // Avoid Plugin.prototype conflicts
    $.extend( Plugin.prototype, {

        init: function(){
            var plugin = this;
            plugin.$element.find('a.popup-trigger').magnificPopup({'type': 'ajax'});
        }

    });


    // A really lightweight plugin wrapper around the constructor,
    

Open in new window

0
If user clicked on checkin date it has to show today's date and checkout date means  next day date it has to show
 later user can change according to his requirement.

please help me out get solution
0
I have this script in a asp.net webform

<script type="text/javascript">
           

           function OpenIFrame() {
               
                document.Output.submit()
           };

        $(".inline").colorbox({
            inline: true,
            opacity: 0.5, // overlay a bit less dark
            innerWidth: 640,
            innerHeight: 390
           
        });

       
    </script>

When asp:button is pressed it runs this code

    ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "OpenIFrame();", true);

Getting this error java script openiframe is undefined.

I am new to jquery so i know it is something simple
0
I need your help

How can I submit a form into a new popup window?

this is my form submission

$('form#PCADetailForm').submit(); 

   var w = 600;
   var h = 300;
   var left = (screen.width - w) / 2;
   var top = (screen.height - h) / 4; 
   var targetWin = window.open('EditDetailInfo.cfm?' , 'Group' , 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); 

Open in new window


Thanks,
Lulu
0
What does it mean to be "Always On"?
LVL 4
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Hi,
I am using the following code to determine the height of the contents an iframe. The issue is that it works on chrome.. But has random behaviour on safari :
document.addEventListener('DOMContentLoaded', function () {
    var body = document.body, html = document.documentElement;
    var height = Math.max(body.scrollHeight, body.offsetHeight,
                          html.clientHeight, html.scrollHeight, html.offsetHeight);
    window.parent.postMessage({
        name: 'resizeAttachmentView',
        iframeId: body.dataset.iframeId,
        height: height
    }, '*');
});

Open in new window


What could be the issue.. I see sometimes whitespace below the iframe. The same iframe one time the height is calculated on rendering as 40px and some other random time as 140 px.

What could be the reason for this. This is happening only on safari on chrome its working fine..
This iframe is basically rendered inside my web application and i set the height properly using the above code after it has rendered.

Thanks
0
I have a gallery with images. when you mouse over an image I display a div containing 2 icons
I chose to use slideDown to show the image and slideUp to hide the image. the problem is when you try to mouse over the div with the icons. the div is jumpy.

Here is the html
			<?php
				for($i=0; $i < MAX_IMG_UPLOAD; $i++){
			?>
				<div id="file_upload_<?php echo $i; ?>" class="upload_images">
					
					<!--<div id="main_pic_selected"><i class="fa fa-star" aria-hidden="true"></i></div>-->
										

					<div class="check_delete">
					
						<a class="make_default" data-cntr="<?php echo $i; ?>" title="Make default"><i id="star_<?php echo $i; ?>" class="default_star fa fa-star-o" aria-hidden="true"></i></a>
						<a class="delete_img" data-cntr="<?php echo $i; ?>" title="Delete photo"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
						
					</div>
				
					<img src="../img/the_meeting_dragdrop.jpg" width="198" height="139" class="default_img img_url">
					<input type="file" id="file_<?php echo $i; ?>" name="images[]" class="hidden fileToUpload" accept="image/*">
				
				</div>
										
			<?php		
				}
			?>

Open in new window


Here is the jquery
	$('.upload_images').mouseover(function() {
		var fileField = $(this).find("input").val();
		if(fileField != ""){
			$(this).find('.check_delete').stop(true, true).slideDown();
		}
		
	}).mouseout(function() {
		$(this).find('.check_delete').stop(true, true).slideUp();
	});	

Open in new window

0
Hi I'm building a html table from some imported JSON data

How do I fix the header row and scroll the data body similar to freeze panes  in excel

This is a mockup of what I'm trying to do The MOCK_DATA.json may not be enough to triger the overlow hence setting it 100px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Table</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	
<script type='text/javascript'>
	$(function() {
      // jQuery
       $('button').on('click', function (){
                    var link = "MOCK_DATA.json";
               $.ajax({
                url: link,
                   dataType: "json",
                   type: "GET",
//                   contentType: "application/json; charset=utf-8",
                   success: function (data) {
                   
                       console.dir(data);
                     var table = $('<table></table>').addClass('MyClass');
                  var RowCount=0;
                  var row;

                  $.each(data, function(i, val) {
                  row =$('<tr></tr>');
                   // console.log(i);  //this gives the object index/key
                   // console.log(val);  //this gives the object
                    $.each(val, function(i2, val2) {
                       if(RowCount===0){
                         var thead =$('<thead></thead>');
                          var th = $('<th></th>').text(i2);

Open in new window

0
I have a form with a few fields. text & select.. I am POSTing the form AJAX all this seems to be working except for the $_FILES.  In my PHP file I get the value of the file field when I do print_r($_POST); but not when I do print_r($_FILE)

Im expecting got get my textbox and selectbox values in the print_r($_POST);
and get my input type file to display when I print_r($_FILES);

Here is the code
	$("#ApplyChanges").click(function () {
		var fd = new FormData();
		var formErrors = 0;
		$('#girl_info :input[type=text], select, textarea').each(function () {
			if ($.trim(this.value).length >= 1) {
				$(this).css('border-color', '');
				if(this.id == 'language'){
				var languagesArray = [];	
				$("#language option:selected").each(function (i, selectedLanguage) {
					languagesArray[i] = $(selectedLanguage).val();
				});
					fd.append(this.id, JSON.stringify(languagesArray));
				}else{
					fd.append(this.id, this.value);
				}
			}else{
				formErrors++;
				$(this).css('border-color', 'red');				
			}
		});
		
		var counter = 0;
		$('#girl_info :input[type=file]').each(function () {
			if ($.trim(this.value).length >= 1) {
				counter ++;
				fd.append(this.id, this.value);
			}
		});
		
		formErrors = 0; 
		counter = 1;
		
		if(formErrors === 0 && counter >= 1){
			$.ajax({
				type: 'POST',
				enctype: 'multipart/form-data',
				url: '../ajax/form.php',
				data: fd,
				cache: false,
				contentType: false,
				processData: false,
				success: function 

Open in new window

0
Hi E's,
In some part of my code, I need to change the Modal option dismissible to false, and I try to do this with jQuery but without sucess.
I try use this code, but not work:
$('#modal1').modal('modal').options.dismissible = false;

Open in new window

The reference page o Materialize Modal is this one.
What I do wrong?

The best regards, JC
0
Hi,

I'm using jQuery 3.1

How can I have this function return a value back when the value does not get set until after the ajax call?  I do not want to use "async:false" in my ajax function as that seems to be bad practice.  My code is below, but it doesn't work obviously.  Somehow I need to get the checkEmailAvailability function to return a value, but due to the async nature, I can't get it quite right.  

I also hear using success callback is old school, so I'm open to doing this differently.

...calling code:

var isEmailAvailable = checkEmailAvailability();

function checkEmailAvailability() {

	var emailAddress = $('#email').val();
	
		$.ajax({
			url: 'remote.php?method=process',
			dataType: 'text',
			type: 'POST',
			data: {email: emailAddress},
			success: function( data, textStatus, jQxhr ){
				
                               // if the email is not available
				if(data === 'false'){  
				}
			}
		}); // close ajax
	
}

Open in new window

0

jQuery

16K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics