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

On this page:
http://groupplanner.gallitin.com/flight/create?depart=07%2F20%2F2017&return=08%2F05%2F2017&tripID=22&tripName=ABC#

I have the button "Add Flight" and it clones the input you see there, the issue is that the name of the fields are:

com0[]airline[]
com0[]flightNumber[]
com0[]departing[]
com0[]seatNumber[]

Open in new window


When cloning I need the com0 to increase to com1, if cloned again then com2 etc...
0
I am using ajax to output filtered list results on a page. Is it possible to go back to the previous filtered results? Please note I am not wanting to go back to the previous url using history.back()

What would be the best way to do this? Would I need to use URL parameters?
0
Before the Gridview at the bottom I need a button to add a new record but I can not figure out the html to make it work.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Admin.aspx.cs" Inherits="Test.Admin" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" lang="javascript">
        $(document).ready(function () {

            //Initialize the Account Termination Date datepicker
            $('#divDatePicker').datetimepicker({
                format: 'MM/DD/YYYY',
                useCurrent: false,
                minDate: new Date(),
                maxDate: new Date().setYear(new Date().getFullYear() + 1)
            });
           
            //Initialize the BootGrid
            $(function () {
                $('#<%= grdAdmin.ClientID %>').bootgrid({
                    caseSensitive: false,
                    formatters: {
                        "commands": function(column, row)
                        {
                            var buttonText;



                            buttonText = "<button type=\"button\" class=\"btn btn-xs btn-default command-add\" data-row-id=\"" + row.ID + "\"><span class=\"fa fa-camera\"></span></button>" +
                                "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.ID + "\"><span class=\"fa fa-pencil\"></span></button> " +
     …
0
See my original code which worked correctly as required...

$(document).ready(function() {
	
		// Start of checkbox change
		$('#ListResults').on('change','input[type="checkbox"]', function() {
			
				$('.loadingDiv').show();
				var page_num = $('.pagination .active a').attr('rel');
				
				if ($(".media-filter-brand input:checkbox:checked").length > 0) {
						var media_filter_brand_value = $(".media-filter-brand input:checkbox:checked").data("media-filter-value");
				}
			
				$.ajax({
				  url: 'media_script.php',
				  data: { 
					  page: page_num,
					  brand: media_filter_brand_value
					  filterchange: "true"
				  },
				  dataType: 'html',
				  type: 'POST',
				  success: function(data) {   

						$( "#ListResults" ).html( data );
					  	$('.loadingDiv').hide();
					  	
					  	
					  
					}

				 });
			
		});
		// End of checkbox change

});

Open in new window


You will notice an if statement. I want to reuse this if statement elsewhere so instead of duplicating code I tried putting it in a function like below...

function getmediafilter() {
	
				if ($(".media-filter-brand input:checkbox:checked").length > 0) {
						var media_filter_brand_value = $(".media-filter-brand input:checkbox:checked").data("media-filter-value");
				}
	
}

$(document).ready(function() {
	
		// Start of checkbox change
		$('#ListResults').on('change','input[type="checkbox"]', function() {
			
				$('.loadingDiv').show();
				var page_num = $('.pagination .active a').attr('rel');
				
				getmediafilter();
			
				$.ajax({
				  url: 'media_script.php',
				  data: { 
					  page: page_num,
					  brand: media_filter_brand_value
					  filterchange: "true"
				  },
				  dataType: 'html',
				  type: 'POST',
				  success: function(data) {   

						$( "#ListResults" ).html( data );
					  	$('.loadingDiv').hide();
					  	
					  	
					  
					}

				 });
			
		});
		// End of checkbox change

});

Open in new window


However in doing this the code no longer works. I am no longer getting a result for the variable "media_filter_brand_value". What am I doing wrong?
0
I am struggling to get a handle on this problem.

I have a textbox on Gridview control:

<asp:TextBox ID="txtboatRegNo" style="width:270px;margin-left:195px;" runat="server"></asp:TextBox>

Open in new window


and a textbox on Repeater control:

<asp:TextBox ID="txtARegNo" style="width:270px;margin-left:195px;" runat="server"></asp:TextBox>

Open in new window


The values for both textbox controls are the same.

The current process asks user to enter his registration number on Griview and the click next to go next page.

On next page, there is a different set of requirements that asks user to once again, enter the same registration number.

We see this as being extremely inefficient.

So, we decided that once a user enters his/her registration number on txtboatRegNo on Gridview, that value should auto fill the txtARegNo on Repeater control.

So far, the following query is not working in that it is not auto filling the value enter in Gridview on the Repeater control.

Does anyone know how to resolve this?

This is the script I have been working with:

  <script type="text/javascript">
         $(function () {
             $('[id*=txtboatRegNo]').change(function () {
                 $('[id*=txtARegNo]').val(this.value);
             });
         });
 </script>

Open in new window


Thanks in advance
0
I have a REST call using jQuery Ajax and it works fine on every browser except for IE11.  When I make this POST call,  I get back a 400 error and the data doesn't get written.

Any advise on this would be greatly appreciated.
0
I have the cloning, piece working fine, but just realized when I click "Add Flight" to clone and try to select the Departure Time only my original picker is working.  How can I fix this?

http://groupplanner.gallitin.com/flight/create?tripID=21&tripName=Iowa&depart=07%2F20%2F2017&return=07%2F27%2F2017
0
I have recently started learning about the FuelPHP framework and I have a question that I thought I would post here first, instead of the FuelPHP Forum.

I have been working on understanding how to use the framework as intended by the creators, and I think I'm doing a fair job of that, except possibly with regards to using external jQuery libraries.

I have a simple CRUD application that I built  as a proof of concept for using a third party jQuery DateTimePicker library.

This is the jQuery DateTimePicker library that I found and used.



FuelPHP DateTimePicker Sample - dtpsample
This is not including the public asset folder that contains the actual Javascript and CSS.

Model

fuel/app/classes/model/dtpsample.php

This includes data validation.  Each field is important.  It is important to not rely only on the Javascript front end.  I could improve the validation, but this is a start.

<?php
class Model_Dtpsample extends Model_Crud
{
	protected static $_table_name = 'dtpsample';
	
	public static function validate($factory)
	{
		$val = Validation::forge($factory);
		$val->add_field('name', 'Name', 'required|max_length[255]');
		$val->add_field('event_date', 'Event Date', 'required');
		

		return $val;
	}

}

Open in new window


View Template

fuel/app/views/template_dtpsample.php

I want to specifically point out this piece of code regarding my question. The main question I have is have it properly separated concerns?  I want to have the application display the Date and Time selected in the input box directly above the calendar/time select control as indicated by this screenshot.

dtpsample create new entry
Notice that I have used  Asset::css and Asset::js to load the require asset files.


Open in new window

0
Here's my code:

<script>
									
					$('#header_text').html('Click on the "Yes" button if the name listed below is you.<br>Otherwise, click "No."');		
					
					$('#verifyUseryes').on('mouseover click', function(event){
						if(event.type==="mouseover")
						{
							$('#header_text').html('After you click "Yes," please give the next page a moment to load.');
						}
						else if(event.type==="mouseleave")
						{
							$('#header_text').html('Click on the "Yes" button if the name listed below is you.<br>Otherwise, click "No."');
						}
						else if(event.type==="click")
						{
							window.location='$portalLink';
						}
					});
					$('#verifyUserno').click(function(){
						$('#header_text').html('Please enter your personal information and click on "submit!"');		
						$('.step_1').show();
						$('#window').html('');
					});
					</script>

Open in new window


Everything is working just like I want it to save one thing...

When the user mouse's away from the "ye" button, I want the text in my "#header_text" div to go back to "Click on the "Yes" button if the name listed below is you.<br>Otherwise, click "No."".

Right now, it doesn't and I don't know why.

How can I make the text in my #header_text div revert to "Click on the "yes" button when the user mouse's away from the button?

Thanks!
0
I'm trying to apply a minor customization to a WordPress admin screen, and would like to figure out how to populate the closest text input field with radio button value on click using Javascript / jQuery.  

The HTML that I currently have in place is as follows:

 <div class="rwmb-input">

  <input size="30" type="text" class="rwmb-text" id="fave_plan_title" name="floor_plans[0][fave_plan_title]">

  <div class="floor-plan-titles">

      <input class="plan-title" type="radio" name="plan-title" id="plan-title1" value="First Floor">First Floor 
      <input class="plan-title" type="radio" name="plan-title" id="plan-title2" value="Second Floor">Second Floor
      <input class="plan-title" type="radio" name="plan-title" id="plan-title3" value="">Custom

  </div>

</div>

Open in new window


To clarify .. I'd like to have it so that when you click on one of the 3 different radio buttons, I'd like for the text input field that's above them to be populated with that radio button's value (ie: either "First Floor", "Second Floor", or "" .... nothing / clear the field).

I'd normally do this by using the text input field's unique ID attribute selector .. but these text input fields are being generated dynamically, so I'd prefer to just traverse the DOM somehow and to just populate the text input field that's above the radio buttons.

Also .. note that I need to implement this using jQuery's noconflict mode (which uses "jQuery" prefixes instead of "$").

Would someone here be so kind as to provide me with a Javascript function that would allow me to accomplish this?

Thanks!
- Yvan
0
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: 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!

I want to check for the presence of a substring within a string using a PHP variable. Something like this:

<?php 

$something="A string that contains the word script";

?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery Text Exchange</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<script>

var testStr = <?php echo $something;?>

if ($(testStr:contains("check")).length > 0)
{
	 alert("String Found");
}
	

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

Open in new window


So, tell me if the word "check" shows up in the PHP variable $something. How can I do this?
0
in my partial view, I have used some jquery code for submitting my form.but I got this error.
The required anti-forgery form field"__RequestVerificationToken"
is not present. as you see I have added @Html.AntiForgeryToken() in my partial view and as well I have added [ValidateAntiForgeryToken] on my controller. but I got the error again.I have read all of the questions on the internet but they couldn't help me.

@model Dentistry.Areas.ViewModels.UserViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
    </button>
    <h4 class="modal-title custom_align" id="Heading">ویرایش کاربران</h4>

</div>

@if (Model != null && Model.UserId != string.Empty)
{
    <div class="modal-body" id="editModal">
        <form id="#myForm">
          @Html.AntiForgeryToken()
            <div class="form-group">
                @Html.HiddenFor(a => a.UserId)
            </div>
            <div class="form-group">
                <label>نام کاربری</label>
                @Html.TextBoxFor(a => a.UserName, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.UserName)
            </div>
            <div class="form-group">
                <label>نام</label>
                @Html.TextBoxFor(a => a.FirstName, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.FirstName)
          

Open in new window

0
//This is my code for single file upload, i just want to make for multiple file uploads ..I want to save file names and file path using ","(comma) seperator..what changes i want to make??









    public ActionResult Index(int id)
        {
            Session["FileMsg"] = "";
            Session["ChangeCRFStatusMsg"] = "";
                  string referer = Request.ServerVariables["HTTP_REFERER"];
            if (string.IsNullOrEmpty(referer))
            {
                return RedirectToAction("Index", "Login");
            }
            else if (Session["Usercode"] != null)
            {
                ViewData["crfid"] = id;
                return View();
            }
            else
            {
                TempData["Error"] = " Your session has expired. Please log in again";
                return RedirectToAction("Index", "Login");
            }
        }

        /// <summary>
        /// This method is used to upload a file for a particular CRF.
        /// </summary>
        /// <param name="FileUpload">File</param>
        /// <param name="id">CRF Id</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Index(HttpPostedFileBase FileUpload, HttpPostedFileBase addUpload, int id)
        {
            int crid = Convert.ToInt32(id);
            Session["FileMsg"] = "";
            Session["ChangeCRFStatusMsg"] = "";
            var validFileSize = 10 * 1024 * 1024;
            //string[] …
0
So I've got a function in PHP. If no records are found as a result of a SELECT statement, then right now, the syntax I'm working on has this:

echo "We were unable to match the info you provided.";

I want to instead, load some text via JQuery into a div. Right now, I've got this:

echo "<script>$('#header_text').html('We were unable to match the information you provided.\n Please try again.');</script>";

It's not working. I think I know why in that what I've got currently is something that's put in motion by an action of some kind. A click, a button - something. Without that "event," I don't have anything.

Let me know if that's accurate and, if you would, also tell me how I can use JQuery to load some new text into the <div> rather than simply echoing a message.

Thanks!
0
On this page: http://groupplanner.gallitin.com/flight/create?tripID=16&tripName=Cancun

I have a button to add flight and when clicked it clones the form as expected.  When I click any of the remove buttons it removes the entire form though.  How can I fix this?
0
Hey folks. Web design and css is not my day job, more of a side hobby. That said I've been working iteratively on my site for a while now, and have worked myself into a corner when trying to make the site mobile friendly.

Overall I've had pretty good luck taking a two-column dynamic layout I tracked down a few years back and adapting it to mobile. I achieved the dynamic sizing for web with some nested divs that by necessity have a greater width than the window and need to be hidden, though.

On mobile, this only works if I assign overflow-x:hidden; to html,body. If I follow proper procedure and assign it, or the website scrolling setting, to document.body instead (or any other combination therein), the smooth scrolling is broken. I like the smooth scrolling, so even though it cost me the function of tapping the time bar to move to the top of the page, I went with it. It worked, right?

I accepted this compromise until I started to go further and taking my sidebar menus and try to make them fixed position nav menus for mobile. Even that worked fine until I created a logobar that would pop in upon scrolling away from the top of the page. The same compromise that broke "tap to top" has broken any JQuery scrollTop functions I tried to include, on mobile, using a simple enough technique I found here.

Now I have the choice, make any change at all to this css and lose smooth scrolling and gain my logobar and tap to top: as seen in test page 1
0
Here's what the programmer prior to me has in place:

$out .= <<<OUT
                              <script>
                              var text=$('#header_text').text();
                              $('#header_text').text('Click on the "Yes" button if the name listed below is you. Otherwise, click "No."');            
                              
                              $('#verifyUseryes').click(function(){
                                    window.location='$portalLink';
                              });
                              $('#verifyUserno').click(function(){
                                    $('#header_text').text('Please enter your personal information and click on "submit!"');            
                                    $('#step_1').show();
                                    $('#window').html('');
                              });
                              </script>
OUT;

They used HEREDOC, which is fine, but the challenge I'm running into is that when I try to do this:

$('#header_text').text('Click on the "Yes" button if the name listed below is you.\nOtherwise, click "No."');

or this...

$('#header_text').text('Click on the "Yes" button if the name listed below is you. <br>Otherwise, click "No."');

I get the actual characters ("\n" or "<br>") rather than the actual line break.

I want to maintain the HEREDOC dynamic, at least for now. Any suggestions on how to get that line break happening?
0
Hi Experts

Could you point how to workaraound this jquery error Uncaught Typerrror: Object values is not a function, acordingly with this code?


This code perfectly runs under most of the browsers:
    $('#last_operation').click(function () {
     
        // This perfectly returns an object
       	$.get("operation/syncronize_date", function(response){
       	    
            var dia_ultima_operacao = Object.values(response)[2];
            var usuario_ultima_replicacao = Object.values(response)[3];
            
  
            $("#ultima_operacao").val(usuario_ultima_operacao + " / "+ dia_ultima_operacao);

    	});
 
    });

Open in new window


But in an server's browser it simply returns the jQuery error.

Could you sugest a workaround code?

Thanks in advance.
0
Using the documentation found here http://vinceg.github.io/twitter-bootstrap-wizard/ I have created a tabbed form wizard with Parsley validation.
JSFiddle here
I have the form validating perfectly when using the top tabs to move between tab-panes however I am having trouble with the "next" and "previous" buttons.
On initial click of the "Next" button on the first tab-pane the validation seems to work fine however this is where the trouble begins. The "next" button then renders itself "disabled" and does not work any more.
From what I can read the trouble begins on line 2 of my js. Line 3 (commented out) is my attempt at a fix but witht success.
Experts required.
N
0
Industry Leaders: We Want Your Opinion!
Industry Leaders: 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!

I already set up webhook for twilio invoice, and the webhook webpage is voiceReceiver.aspx
and I want to receive and download the .mps to my server's hard drive.

How can i do that?

Thanks
0
I use query to do basic validation and now want to add runat to each html input, and hope to work with asp button.

And I no longer can use validationgrup any more on html side. Do you have any work around solution?
I want to use asp.button for sure with html input runat

Thanks,

<input class="search-field" runat="server" id="customCode" type="text" value=""/>
<asp:LinkButton ValidationGroup="form" runat="server" ID="submitAddNew" OnClick="submitAddNew_Click" CssClass="button preview">
Preview <i class="fa fa-arrow-circle-right"></i>
</asp:LinkButton>

Open in new window

0
Hi all, I am still a jquery beginner.
I used the following code to make all checkbox 'selected'. I could see it happened.
But when I ran the program, I'd got the following problems:

(1) it showed '0' was actually selected.
     I need to see the 'checked' checkbox are really selected.
(2) In the current situation, if I 'unchecked' one of checkboxes (suppose the selectall checkbox is now checked), the 'selectall' checkbox is still 'checked'. It should suppose to be 'unchecked'. And definitely still counted '0' was selected.

Would you please help to correct the following code to what I expected result?

$('#selectAll').change(function(){
   var table =  $("#myTable").DataTable();
   var cells = table.cells( ).nodes();
   $( cells ).find(':checkbox').prop('checked', $(this).is(':checked'));         
});

check the selected table length:
alert('table length:'+table.rows('.selected').data().length);

Many thanks,
Sam.
0
I have a smart table with 2 columns. I want to have a mouseover with a popup for the second column to display more information. I found this link I'm following this example  http://plnkr.co/edit/3KiZdZsxwy6GDLoy6DhV?p=preview

I've spent at least 4 hours on this and still can't find a solution. I think it might be my injection of ui-bootstrap per this link
Possible explanation

You can see what I'm doing here:

1.  http://147.75.0.124:88   Log in with admin@admin.test and Password321$

2. Click on "Immigration" and click on the link under it

3. Look at Chrome's console and you see the error.

The error and what I've done

1. I get this error Unknown provider: $uibModalProvider <- $uibModal <- chapterCntrl

2. I made sure I have bootstrap.js and bootstrap-tpls.js
3. In module.js, I have this and I have a reference to it in the page  
angular.module('lawApp',   ['ui.bootstrap']);

Open in new window

4. I checked the bootstrap version.
5. In "chapterCntrl", I tried $uibModalInstance, $uibInstance and $uibModal.  I think $uibModal is correct but I still get the error
6. I changed "chapterCntrl" to below but I get an error with mainCntrl not being defined if  do below

(function () {
    'use strict';
    angular.module('lawApp','ui.bootstrap')

        .controller('chapterCntrl', chapterController);

Open in new window


What am I missing? I still think it's how I inject ui.bootstrap but don't know what else to try.
0
Greetings experts,
We have a very long form. So we decided to break up the contents into manageable sections by using the multi step form with progress bar approach used in the link below:

http://www.jqueryscript.net/form/Creating-A-Modern-Multi-Step-Form-with-jQuery-CSS3.html

Prior to using this link, we were able to navigate to Next /Preview/Previous pages using the MultiView control.

However, since implementing the approach on the link above, we are unable to see the Next link.

Any ideas where the mix up may have occurred?

Our primary interest is the progress bar. If we could use it along with the MultiView control alone, that would be great.

Any assistance is greatly appreciated.

Below is the code. I tried to show only relevant to code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Freeport.aspx.cs" Inherits="Freeport" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Aircraft Personal Property Tax Return</title>
  <link  type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
  <link href="styles/boxformats.css" rel="stylesheet" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
  <script src="js/jquery.easing.min.js" type="text/javascript"></script> 
  

Open in new window

0
I have a textbox that use for my calendar

$("#txtDueBackDate").datepicker({
            formatDate: data.formatDueBackDate,
        });

Open in new window


When user initiates the page the textbox filled up with a date like 7\12\2017.
Now when I click on the calendar I would like to highlight two dates
1. the date of today.
2. the date which show at the textbox.

Please, Help.

Thanks,
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