Go Premium for a chance to win a PS4. Enter to Win

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

I use https://datatables.net/ on my MVC project. The front end is pure HTML5.
When the page is load, I can see all information show on <tbody id="bondListing"> and have no issue.
However, when I try to sort on the column, and make paging in the drop down from e.g. 10 to 100.
All of the data inside of <tbody id="bondListing"> are disappeared.

Do you know how to fix it?

<div class="table-responsive">
                       
                        <table  class="table" id="table1" name="table1">
                            <thead>
                                <tr>
                                    <th>State</th>
                                    <th>Name</th>
                                    <th>Code</th>
                                 </tr>
                            </thead>
                            <tbody id="bondListing">

                            </tbody>
                        </table>
                    </div>
<script>
    window.onload = function () {
        fnGetBondNameList();
    };
function fnGetBondNameList() {
             $.ajax({
                url: "http://localhost:5489/BondList.xml",
                success: function (xml) {
                  parseSelectXML(xml,"bondListing","Bond","CA");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Status: " + xhr.status);
                    alert("Error: " + thrownError);
                }
            });
}
function 

Open in new window

0
Concerto Cloud for Software Providers & ISVs
LVL 5
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

I have 2 pages of data, how I uncheck the checkbox in the second page from first page i have same class for all the checkboxes
0
i am simple xml that expose on the website e.g. www.mywebsite.com/products.xml

and i allow multiple users to have write permission to update the xml.  With multiple users who expected to write the xml files almost in the same time. Do you see any errors will be occurred like two accesses can't be written in the same time?

Thanks,

We use xml / jquery
0
Hello

I would like to have attached web page layout as attached, can anyone please help me on this ? How I can start with this, this has to be done using HTML5, Jquery and Bootstrap, can any one just give me idea how to start on this?
0
Hello I am developing Lotus Domino web application.
Basically, this would be online purchase system, where in there would be left side menu and center menu and checkout box.

Now what I need is My Domino Agent would be bring the menu from view like Furniture, Marbles in json format.
I would like to parse this json using Jquery and need to display menu in left side navigator using HTML.


Can anyone please help me this? I am using Lotus Notes 9.0.1
0
I have a paging system on my app that allows the user to click a link, an ajax call is made to get data, and that data is displayed. I'd like to make it so that the user can only click the link once, then somehow "disable" the link, execute my ajax call, then re-enable the link. I thought I could use bind() / unbind(), but am having trouble getting it to work. This is what I have:

    $('#btnNext').click(function (e) {
        if (currentPage == totalPages)
            e.preventDefault()
        else {
            $('#btnNext').unbind();
            move('next');
            $('#btnNext').bind("click", handler('next'));
        }
    });

    var handler = function ( direction ) {
        $('#dvResults').hide();
        move( direction );
        $('#dvResults').fadeIn(600);
    }

function move( direction ) {
....
}

Open in new window


for whatever reason, it pages twice (if i'm on page 1, it goes to 2, then 3), then i lose all functionality from the link.

Is this the best way to do this, or is there another way to do it?
0
I have a responsive handburger menu on this site: http://taliance.com
Its a wordpress site running Genesis Theme Framework with a child theme.

You need to scroll down 150px to see the menu, and set your dev console to look at it as a mobile.

It nearly works how we want it, but it doesn't slide back to the left when an item is clicked.
Normally this needn't be a problem. It was designed for linking to other pages. But this menu's links go to ids on the same page, using the PageScroll2id plugin. So, as you'll see, it remains in place.

Can you tell from the dev console what I need to do, either with js/jquery or with css to make it slide away when an item is clicked?

Thank you
0
I have xml file and I want to load the xml using JavaScript datatable

https://editor.datatables.net/examples/advanced/REST.html

Do you know how to do that?
0
I am used to using procedural php and jQuery/ajax. Here is a simple example of how I would usually use them together.

Let's say I have a page that just has an input field.

<input type="text" name="name" id="name">

Open in new window


Then to keep it simple, I have some jQuery at the bottom of the page:

// code here to trigger the ajax call on button click/form submit etc.
		var form = $( "#loginForm" ).serialize();	
			$.ajax({
				url: 'functions/some-file.php',
				type: 'POST',
				dataType: 'json',
				data: form,
				beforeSend: function() {
					$( "#login" ).hide();
					$( ".spinner" ).html("<img src='img/spinner.gif'>");
				},
			})
                     // .done and .fail go here

Open in new window


The some-file.php file would look something like:

<?php

if($_POST) {

	$response = array();
	$message = "";

if(empty($_POST['name'])) {
		
		$message .= "Name required";
	}

if($message) {
	
		$response['success'] = false;
		$response['message'] = $message;
	
	} else {

                // add data to database
                $response['success'] = true;
		$response['message'] = "Success";
		
	}
	
	echo json_encode($response);
}

Open in new window


This works fine. I have a basic MVC framework that I built from scratch using only php based on a course I did (no templating engines or anything, just plain php) and don't know how to do the above in MVC.

At this point I have the view and the controller. I am not onto the model yet. At this point I have a form with email and password fields and I am just trying to do the validation. Here I am just checking if the email field is empty or not to keep it simple.

In my controller I just have:

      
public function login() {
		
		if($_POST) {
			
			
			$data = [
				
				'email' => trim($_POST['email']),
				'email_err' => '' 
			];
			
			if(empty($_POST['email'])) {
				
				$data['email_err'] = 'Email required';
			}
			
			if(empty($data['email_err'])) {
				
				//call login model
				

			} else {
				
				$this->view('users/login', $data);
			}
			
		} else {
			
			$data = [
				
				'email' => '',
				'email_err' => ''
			];
			
			$this->view('users/login', $data);
		}
	}

Open in new window


And my view:

<form action="<?php echo URLROOT;?>/users/login" method="post">
	<input class="form-email" type="email" placeholder="Email Address" name="email" autocomplete="off">
	<input class="form-password" type="password" placeholder="Password" name="password">
	<input class="login-btn btn-filled" id="login" type="submit" value="Login">
	<div class="spinner"></div>
	<input type="hidden" name="form_token" id="form_token" value="<?php //echo make_form_token(); ?>">
	<input type="text" name="some-field" style="display:none;">
</form>
<div class="alert alert-danger">

Open in new window


So, the question is, how on earth do I make the ajax call using the controller and send the data to the model?
0
When I select the save button in tab 2 , the focus does not stay in tab 2 but instead it jumps back to tab 1.
Here's the code..
<div id="myTabs">
            <ul class="nav nav-tabs tabs" id="thistab" runat="server">

                <li class="tab-link current" data-tab="tab1" id="tab11" data-toggle="tab" title="Person" onclick="return setText('lblSelect',this.title);"><a href="#tab1">Person</a></li>

                <li class="tab-link" data-tab="tab-6" id="tab6" data-toggle="tab"><a href="#tab6" onclick="return setText('lblSelect',this.title);" runat="server" title="Employee">Information</a></li>
                <li class="tab-link" data-tab="tab-2" id="tab2" data-toggle="tab"><a href="#tab2" onclick="return setText('lblSelect',this.title);" title="Assignment">Assignment History</a></li>
                <li class="tab-link" data-tab="tab-3" id="tab3" data-toggle="tab"><a href="#tab3" onclick="return setText('lblSelect',this.title);" title="Issues">Issues</a>
                    <ul class="tabs show-on-hover" id="ulIssue">


                        <li class="tab-link" data-tab="tab-8" id="tabs-8"><a href="#tabs-8" title="New Issue" onclick="addlocation('RedIssue.aspx')">New Issue</a>

                        </li>


                    </ul>
                </li>
                <li class="tab-link" data-tab="tab-4" id="tab4" data-toggle="tab"><a href="#tab4" onclick="return setText('lblSelect',this.title);" title="PPC">PPC</a></li>
                <li 

Open in new window

0
What does it mean to be "Always On"?
LVL 5
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.

I've been at this for a while to no avail.

Seems like this should be easy...

Here's what I'm doing:

<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery Example</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>

<body>

Spouse <input type="checkbox" id="spouse_check">

<script>
$(document).ready(function() {

	var $checkbox=$('input[id="spouse_check"]');
	if($checkbox).prop('checked'))
	{
		alert("hello");
	}
	
});

</script>
</body>
</html>

Open in new window


Doesn't work. what am I missing?
0
I have a standard HTML form with a jQuery onclick function which does several processes, depending on the submit. All functions are working fine, but the simplest section of this jQuery code just does a normal submit. However, this form data on this submit goes to a PDF creation file and needs to be URLencoded. I cannot figure out how to do this without listing every field in a very long form. I've searched the Web but not found an answer. Seems there should be a simple way to url encode this submit. Here is the current submit function:
<script>
    $(document).on('click', '.ClickCheck', function(e)
    {
        var Form = $('#TheForm');
        $(Form).attr('action', './PDFResultPage.php');
        $(Form).submit();
    });
</script>

Open in new window

0
I have csv file like below.  It has 50 states in USA. all counties.

I have a simple html text box, and i want to do the following:

1. I already have "State" e.g. CA. already stored in local storage in browser.
2. I want the auto complete list first filter by the selected state from local storage.
3. Then query and list the auto complete when cursor is on focus/on press down or something like that.

Is it possible to do t hat in jquery/ajax on MVC project? I have MVC project, but the front end is just HTML.

Thanks,

County Name,State Abbr,Geographic Name,State Full Name
Autauga,AL,Autauga County, Alabama
Baldwin,AL,Baldwin County, Alabama
Barbour,AL,Barbour County, Alabama
Bibb,AL,Bibb County, Alabama
Blount,AL,Blount County, Alabama
Bullock,AL,Bullock County, Alabama
Butler,AL,Butler County, Alabama
Calhoun,AL,Calhoun County, Alabama
Chambers,AL,Chambers County, Alabama

Open in new window

0
Hi,

I am using the following function to fade out one image and fade in another (replacement), however currently this fades out so to white before another image fade in, is it possible to fade ontop gradually so it does not fade out completely?

               
if (dataId != $('img#largeImg').attr('src').replace(/\?(.*)/, '')) {
                    $('img#largeImg').stop().animate({
                        opacity: '0'
                    }, function () {
                        $(this).attr('src', dataId + '?' + Math.floor(Math.random() * (10 * 100)));
                    }).load(function () {
                        $(this).stop().animate({
                            opacity: '1'
                        });
                    });
                }

Open in new window


Any help is appreciated.
0
Hi,
I am having default.aspx page. This page contains two iframes. Left iframe is having tree. clicking on parent or child nodes will open diferent pages in the right iframe. User can add or edit information using right iframe and it will reflect in the left iframe. making changes in the firames doesn't refresh the default.aspx.

Session Timeout 15 minutes.
Warning Popup appears at 13  minutes. clicking ok on dialog. user can continue to do the work till 2 more minutes and it will redirect to session timeout page.

Problem: Warning popup appears at 13 minutes. clicking ok on dialog. user is doing some activity and click submit on iframe2. This will reset the session timeout again back to 15 minutes. This part is not working.
If I refresh the default.aspx then session timeout is resetting, but refreshing the iframes not reset the session timeout. Please find my code and fix the issue. I am stuck in this issue.

[b]default.aspx[/b]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="default" MasterPageFile="~/Masterpage.Master"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"%>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 
    <div class="container">
      <iframe id="frameName1" src="index.aspx" frameborder="0" class="indexframe" ></iframe>       
      

Open in new window

0
I have 3 tabs. On tab # 2 I have two draggable items and one droppable. My two draggable items are "good" or "bad". On tab 3 I have a button and a textarea. Upon the click of the button it will determine if you feel good or bad. What I want to achieve is: when I am on tab #2 and I drag an item into the drop area, lets say I drag and drop the "good" item, I then tab over to tab # 3 and click the button which asks " how do you feel", since I dragged and dropped the "good", when I click the "how do you feel button" it will display "good" within the text area on tab #3. Likewise, if on tab 2 I drag and drop the BAD and then tab over to tab#3 and click the "how do you feel button" then it will display as "bad" inside the textarea. Please help!! Thank you.

HTML:

<div id="tabs-1">
        <h2>Sign Up</h2>
    <form id="myform">
    <br>
    <label for="first_name">First Name:</label><br>
    <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
    <br>

    <br>
    <label for="last_name">Last Name:</label><br>
    <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
    <br>

    <br>
    <label for="last_name">Start Date:</label><br>
    <input type="text" id="datepicker" name="datepicker" required> <span class="error" id="date_error"></span>
    <br>
    <br>
    <span class="error" id="all_error"></span>

         <p><input type="button" id="button" value="Creat

Open in new window

0
datatable table aligment is not coming correctly  in IE and MOzila  but working fine in Chrome i am sending two images  please check
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- ------------important-------------------- -->
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 

  <script type="text/javascript">
    $(document).ready(function() {
        resizeContent();
    $('#example').DataTable( {
        "spagingType": "list-box",
        "dom": '<"top"lfi<"clear">>rt<"bottom"><"clear">',
        "scrollX": true,
        "scrollY": true,
        "searching":false,
         "ordering": true,
         "fixedColumns": true
    });
     $( ".dataTables_info" ).insertBefore( $( ".dataTables_length" ) );
     

Open in new window

0
I'm using the fullcalendar and working great, but I want to give the user the option to goto two different url's when pressing the event on the calendar. Right now I have it going to the url listed, but I would like them to beable to choose a link for the description and maybe a link to go back where they created the event. I hope this makes sense. Again when viewing the calendar and you click on a event you might have a drop down that says Details and one that might say edit.

Thanks
0
Hi, Please let me know how to fix this issue.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="default" MasterPageFile="~/Masterpage.Master"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"%>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
  <iframe id="frameName1" src="index.aspx" frameborder="0" scrolling="auto" width="30%" height="1000px" align="left"></iframe>
     <iframe id="frameName2" src="home.htm" frameborder="0" scrolling="auto" width="70%" height="1000px" align="right"></iframe>
     
 
         <script src="scripts/jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript">
var sessionTimeout = "<%= Session.Timeout %>";
function DisplaySessionTimeout(timeout) {
    var seconds = timeout / 1000;
    document.getElementsByName("seconds").innerHTML = seconds;
    setInterval(function () {
        seconds--;
        document.getElementById("seconds").innerHTML = seconds;
    }, 1000);
    setTimeout(function () {
        //Show Popup before 20 seconds of timeout.
        $("#ExpireConfirm_Submit").dialog({
            height: 200,
            width: 400,
            resizable: false,               
            modal: true,               
            title: "Session Expire Confirmation",                             
            open: 

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 5
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Here's my code..
    <script>
        $(document).ready(function () {
            $("#btnSaveEmployeeData").click(function (event, ui) {
                window.location.href = ui.tab;
            });
        });

   
    </script>

Open in new window


Why I'm getting "object expected" error when btnSaveEmployeeData is the button id?
0
I was researching how to stay in same tab after click  on my code behind button and I came across these 2 possible solutions but
implementing causes a javascript runtime error
'Object expected'

1)          $($respTabs.find('.resp-tab-item.' + options.tabidentify)[tabNum]).addClass('resp-tab-                     active').css({
                'background-color': options.activetab_bg,
                'border-color': options.active_border_color
            });

Open in new window


2)
        $(document).ready(function () {
            $("#HorizontalTab").bind('tabsselect', function (event, ui) {
                window.location.href = ui.tab;
            });
        });

Open in new window


These are jquery codes and maybe the jquery and javaScript experts can help read and implement these correctly what it does. Thanks
0
I have created for validation error using Jquery. The errors are working fine. But its not showing as a scroll up mode. I need to manually scroll up and seeing the error. I have tried .offset().top type. But its not working. I'm new to the Jquery. Can anyone please help me on this.

My Jquery file is:

var apiHost = "";
var apiResUrl = "/v1/resources";
var apiAddNewEmployee = "/addemployee";
var apiGetEmployees = "/getemployees";

var addEmpValidation = function() {
    var allowedNameLetters = /^[A-Z a-z]+$/;
    var fname = $("#fname").val();
    var lname = $("#lname").val();
    if (fname == undefined || fname == "" || !fname.match(allowedNameLetters)) {
        $(".newEmperrorMSG").text("Please Fill Valid Employee First Name !!!");
        $(".newEmperrorMSG").show();
    }        
    else if (lname == undefined || lname == "" || !lname.match(allowedNameLetters)) {
        $(".newEmperrorMSG").text("Please Fill Valid Employee Last Name !!!");
        $(".newEmperrorMSG").show();
    }
    else {
        addEmployee();
        $('#new-employee').modal('hide');
    }
};

var loadEmployee = function() {
$('#dashSubBtn').on('click', function(e) {
        e.preventDefault();
        addEmpValidation();
    });
    };

var addEmployee = function() {
    var data = $(newEmpForm).serializeArray();
    $(".successMSG").hide();
    $(".errorMSG").hide();
    $.ajax({
        url: apiHost + apiResUrl + apiAddNewEmployee,
        type: 'POST',
        data: 

Open in new window

0
Hello I am new to jquery. I want to traverse this table .
<div id="compare">
    <table>
        <thead></thead>
        <tbody>
            <tr class="stock4">
                <td>
                    <img src="abc.jpg" alt="">
                </td>
                <td class="price">
                    <div>
                        1000
                        <div class="variant">
                            <table>
                                <thead></thead>
                                <tbody>
                                    <tr class="stock4">
                                        <td class="price">2000</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Open in new window



I want a  price only 1000 not 2000 from variant div.How can I do it. I have tried many procedure but I didnt succeed.
0
Any one knows how to populate pdf fields using jquery? I have all of the data on browser and I want to populate values into pdf fields.
I know we can use c#, itextsharp but there is no point for me to use server side language if jquery can do the faster job for me...

Let me know if you know how....
0
Inside of jquery - id = 'listMe', how can i get Amount element fill up the <select id='listMe'>?

        <Amount  PrefillValue="No" Min="10000" Max="20000" Year="1"></Amount>
        <Amount  PrefillValue="No" Min="20000" Max="30000" Year="1"></Amount>

function parseSelectXMLBondAmountList(xml, selectid, bondState, bondName) {
    var html = "";
    $('#' + selectid).prop("disabled", false);
    $(xml).find('Bond').each(function (i, e) {
        {
            if (bondState == $(e).find('GeneralInformation').find('State').text() && bondName == $(e).find('GeneralInformation').find('Name').text())
            {
                var selectedBondName = $(e).find('GeneralInformation').find('Name').text();
                var coverageType = $(e).find('Coverage').attr('Type');

                var AmountMax = $(e).find('Amount').attr('Max');
                var AmountMin = $(e).find('Amount').attr('Min');
                html += selectedBondName + " " + coverageType + " " + AmountMax + " " + AmountMin;
                if (coverageType == "list") {
                    $('#bondAmountPlaceHolder').html("<select id='listMe' class='select2'></select>");
                }
                else {
                    $('#bondAmountPlaceHolder').append("<input type='text'  id='bondAmount2' name='bondAmount2' value='" + AmountMax + " />");
                }
            }
        }
    });
    //alert(html);
     
} 

<Surety>
  <SuretyLine>
    <Commercial>
	<Bond>
        <GeneralInformation

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