Advertise Here

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

x

jQuery

16K

Solutions

28

Content

i
The collection of articles, videos, and posts on this topic.

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

in my aspx, page I have a div, which I use to write html data being generated dynamically on the server side.

How can i open this html data in the div, in a new window/tab on a buttonclick.
0
5 Comments
Technology Partners: We Want Your Opinion!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Take Survey Now!
Sharepoint version is : 2013 Enterprise server with SP1  15.0.4571.1502
Jquery versions tried : 1.5.2, 1.7.2, 1.10.2
 
jQuery deployed globally using THIS Method of deploying a delegate control.

Without the feature activated, sharepoint works perfectly as expected in every aspect.  Activate the feature, so that jQuery is loded on the page, and sharepoint does all kind of weird things like...
Go to feature management and you can no longer deactivate any feature.

f12 into browser debug mode and the reult of just activating the jQuery feature and then refreshing the page casues all of the following...

chrome console log of errors
Google has been of little help and I have given up banging my head for one day.  Anybody have any clues?

P.S.
This is also the exact same result if I just create a new master page and add a link to the jQuery via the  <!--SPM:<SharePoint:CustomJSUrl runat="server"/>-->  method.
0
0 Comments
I am trying to pass a date to my date field in my SharePoint list.  I have to make sure it's not null or undefined first.

Can somebody please tell me why the following below alerts to false?

var StatusDateOfLastModStatusChange='undefined';

alert(((checkForNull(StatusDateOfLastModStatusChange) === null || checkForNull(StatusDateOfLastModStatusChange) === 'undefined')));
alert(((checkForNull(StatusDateOfLastModStatusChange) === null || checkForNull(StatusDateOfLastModStatusChange) === 'undefined')) ? "N/A": parseDate(StatusDateOfLastModStatusChange));

alert((checkForNull(StatusDateOfLastModStatusChange) == 'undefined'))

Open in new window


Here it is in fiddle
0
2 Comments
I have a bizarre problem.  I have a MVC 5 razor view with both a datepicker and a clockpicker.  The text box with the clock picker works just fine when calling the jquery change event, but the text box with the datepicker won't!  

Here is my form:
<div class="form-group">
            @Html.LabelFor(model => model.PatrolDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="input-group date " id="datePicker1">
                    @Html.EditorFor(model => model.PatrolDate, new { htmlAttributes = new { @class = "form-control" } })
                    <span class="input-group-addon">
                        <span class="fa fa-calendar"></span>
                    </span>
                </div>
            </div>
        </div>

<div class="form-group">
            @Html.LabelFor(model => model.TimeEnd, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="input-group clockpicker">
                    @Html.EditorFor(model => model.TimeEnd, new { htmlAttributes = new { @class = "form-control" } })
                    <span class="input-group-addon">
                        <span class="fa fa-clock-o"></span>
                    </span>
                </div>
            </div>
        </div>

Open in new window


and here is the javascript:
$("#PatrolDate").change(function () {
        alert("date changed");
});

$("#TimeEnd").change(function () {
        alert("time changed");
});

Open in new window


I am totally perplexed!  I am using jquery 3.1.1
0
6 Comments
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
3 Comments
Dear All,

I am looking into building a SharePoint form on Sharepoint 2013 which I will be able to split across different pages (e.g. like one would have done with jQuery if he was building it as a web page) and form validation on submission (again, along the same lines that jQuery plugins offer this functionality in the case of web applications).

Could someone please provide any pointers to resources that could be of use (old programmer, but new to SharePoint)?

Regards,
George
0
1 Comment
Hi EE, I have a function that I'm trying to trigger only if a window width is more than 768px wide.
The resize function I've wrapped it in kinda works but not quite.

The resize function only works if my windows starts smaller than 768px then increases but not the other way around.
Can anyone see what I am doing wrong? 
var didScroll;
var lastScrollTop = 0;
var delta = 10;	
var navbarHeight = $('header').outerHeight();

	
function myFunction() {
 if($(window).width() > 768){ 
	 // the function that should only work if the window width is smaller than 768px
$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}
		 }
		
		};
	

//initialize
myFunction();

//call when the page resizes.

Open in new window

…
0
4 Comments
I want to do following:

1. Load Original.xml
2. convert to string look like result.xml
3. for loop and list
      Response.write attribute("id") + "  " + attribute("value")
   next

how can I do that in c#?


Original.xml 
<?xml version="1.0" encoding="utf-8" ?>
<Surety QuoteID="123" CreatedDateTime="01/10/2017">
  <Line>
    <Commercial>
      <Bond Name="Notary" Form="Notary.pdf">
        <State name="CA">
          <Step name="Principal" StepNo="Step 1">
            <input type="text" class="" id="principalPhoneNo" placeholder="Custom field" value="310" />
             <input type="text" class="" id="principalPhoneNo2" placeholder="Custom field" value="210" />
            <input type="text" class="" id="principalPhoneNo3" placeholder="Custom field" value="110" />
          </Step>
          <Step name="P2" StepNo="Step 1">
            <input type="text" class="" id="principalPhoneNo4" placeholder="Custom field" value="310" />
             <input type="text" class="" id="principalPhoneNo5" placeholder="Custom field" value="210" />
            <input type="text" class="" id="principalPhoneNo6" placeholder="Custom field" value="110" />
          </Step>
        </State>
      </Bond>
    </Commercial>
  </Line>
</Surety>

Open in new window


Result.xml 
<?xml version="1.0" encoding="utf-8" ?>
<Surety QuoteID="123" CreatedDateTime="01/10/2017">  
            <input type="text" class="" id="principalPhoneNo" placeholder="Custom field" value="310" />
            <input type="text" class="" id="principalPhoneNo2" placeholder="Custom field" value="210" />
            <input type="text" class="" id="principalPhoneNo3" placeholder="Custom field" value="110" />       
             <input type="text" class="" id="principalPhoneNo4" placeholder="Custom field" value="310" />
             <input type="text" class="" id="principalPhoneNo5" placeholder="Custom field" value="210" />
            <input type="text" class="" id="principalPhoneNo6" placeholder="Custom field" value="110" />  
</Surety>

Open in new window
0
6 Comments
I have a blockui popup layer where there is a form. I want to clear the text "Enter your email address" when the user clicks the input field. But when the popup layer opens, the text is gone. How to fix that issue?  Thanks a lot!  My code is as follows:

<input name="emailAddress"  type="text" value="Enter your email address" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email address';}" />

The above code works perfectly fine if it's on a web page, but it doesn't work if it's a blockui layer.

Really appreciate your help.
0
2 Comments
Hi
In code bellow clicking the button should move the random row to the top of the table
However it only works  if the random number is <= 10 or the paging is set to false any ideas how to fix it  

https://jsfiddle.net/493gpg5a/
<!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> 
    	<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
      $('#example').DataTable({
            scrollY : '200px', 
            scrollCollapse: true,
            paging: true,  // set to false works
            searching: false,
            info: false
      });
       $('button').on('click', function (){
       $('tr').removeClass("highlight");        
        var ID = randomIntFromInterval(1,20);
         alert("Highlight row " + ID);
//         $("#row_" + ID).toggleClass("highlight");
      $("#row_" + ID).prependTo('#example').toggleClass('highlight');

     });
});

function

Open in new window

…
0
21 Comments
Free Tool: ZipGrep
LVL 10
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Access It Now
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
6 Comments
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
6 Comments
<script>
$(document).ready(function(){            
var i= $(".sidebar-menu li").index();

var open = ["document_driver.html","upload_document.html","edit_document.html","","","","","","","",""];
$(".sidebar-menu li").click(function(){
            $(".treeview li").removeClass("active");
            $(".treeview li:nth-child("+i+")").addClass("active");
            
              $(".content").load(open[i);
                        
                  });
$(".sidebar-menu li").hover(function(){
var i= $(this).index();
//console.log(i);
});
                  
                  });//ready
                  
                  
        </script>

in this eg execute a load method once, so how can access the  current(this) related html pages
0
2 Comments
how to export jsp content, (which will have html div and pie charts) to pdf/excel/csv..
any solution?
0
4 Comments
I want to develop charts in my project using jsp.
please suggest any open source which should have options to export to different formates.
0
1 Comment
Hello,

This is a navigation menu from https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

<li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>

Open in new window


I find that sometimes, for the 'page1' link, when I press the down caret button, the menu doesn't drop down; instead the '#' sign gets added to the end of the URL in the address bar.

Any way around this? Why does it happen only sometimes? I found that by omitting the '#", or even the entire 'href="#"', the drop down menu always works.
<a class="dropdown-toggle" data-toggle="dropdown" href="">Page 1

Open in new window


Shall I go with the above route, deleting '#', or even the entire 'href="#"'?

Thank you for your help,

Neo
0
3 Comments
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
7 Comments
I use www.formvalidation.io for my form validation and I need to integrate http://www.plupload.com/

This is my formvalidation.io code...

$('#contact-form').formValidation({
		
		// live: 'enabled', // Default value
		trigger: 'input change keyup'
		
	}).on('success.form.fv', function(e) {
		
		//success message here
		
    });

Open in new window


I need the validation to check if the user has added files, but forgot to upload them. Any idea how I do this?
0
3 Comments 
<asp:DataGrid ID=dg1 AllowPaging=True PageSize=22 PagerStyle-Mode=NumericPages PagerStyle-Position=TopAndBottom AutoGenerateColumns=True Width="95%" HorizontalAlign="Center" CellPadding=0 CellSpacing=0 BorderWidth=0 Runat=server>
								<HeaderStyle CssClass=BasicListHeader ForeColor="white" />
								<ItemStyle CssClass=BasicListItem />
								<AlternatingItemStyle BackColor="#e4e4e4" />
								<Columns>
									<asp:EditCommandColumn EditText="Edit" UpdateText="Update" CancelText="Cancel" ItemStyle-Width="1%" />
									<asp:ButtonColumn ButtonType=LinkButton CommandName="Delete" Text="Del" ItemStyle-Width="1%" />
								</Columns>
							</asp:DataGrid>

Open in new window


The code behind creates the columns for the rows for multiple tables.  My issue is that I will have different number of columns per table and I do not know how to create a modal to reflect different number of columns.
TableEditor-Screen.docx
0
8 Comments
Important Lessons on Recovering from Petya
LVL 10
Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Watch Now
i want to export HTML/CHART to PDF and excel
how can i do?.
0
1 Comment
I had this question after viewing jQuery Accordion with long content force scroll to top when clicked.
I would try to implement above code answer, but clueless where and how to do it given code I am using currently.

Hello (new here), I am not a JS coder, so a little clueless. I would like content of my simple accordion, once an item is clicked, to have content scroll to top of browser screen. Showing the beginning of content always at top of screen.

Also, some of my content is a bit long, so I would like all content, once clicked, content to appear/scroll to top screen, irregardless of size or length of previous content that might still be open Vs New content when clicked, scrolling up and past top of browser screen following the closure of a longer bit of previous content closing. Hope that made sense.

I have found many great codes to implement this already online, but I cannot figure out what to place & where, as each person's code slightly differs from another in wording. Thanks in advance and apologies for any improper JS terminology used. Attaching webpage for reference.
https://eyescreamjewelry.com/pages/faq-1
Please note I also have sort of Header separating what looks like multiple accordions (if that matters).

Thanks again for your time.

Also attaching code for reference:

(function($) {

Open in new window

…
0
0 Comments
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
10 Comments
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
11 Comments
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
30 Comments
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
10 Comments

jQuery

16K

Solutions

28

Content

i
The collection of articles, videos, and posts on this topic.

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

Advertise Here
Advertise Here