jQuery

17K

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

jQuery 1.11.1 (may be able to use newer version)
And yes, for now we're using mysql
I am loading a form into a div, using jQuery's load() function. I'm loading that file inside a 3rd party tab (Solid Tabs). The form submits through AJAX to a PHP file. Some jQuery functions, including the AJAX routine, need to be accessed by both the main program and the loaded form, so I created a js file, which is called up by both, since the form would not otherwise be able to access the javascript in the main file.

I am having problems troubleshooting. The process is acting like it is not finding the DBFunctions.php file, as the server is not receiving a request. However, as I was unsure of where the imported file was seeing itself, I changed the url to the full path and it is still failing. Click code works okay and the form serializes okay. Then, nothing.

Main File
    <div>
        <div id="UtilButtons">
            <div>
                <a class="btn" id="AddAdmin" href="javascript:void(0)">Add Program Admin</a>
            </div>
        </div>
    </div>

Open in new window



pAddPA.php

    <div class="SaveButton" id="ProgPAReg" data-formname="AddPA">Register</div>

Open in new window

jQueryEdit.js
    $(document).ready(function()
    {
        $("#AddAdmin").click(function()
        {
            $("#UtilButtons").hide("slow");
            $("#ReturnButton").show();
            $("#AddPAFile").show();
            

Open in new window

0
For some reason, 2 important features of this landing page that I'm trying to wrap up aren't working on mobile:

https://www.movingpicture.com/camera-rentals/

1) My multi-step form is not displaying
2) My jQuery load() methods for the sections with the headings "Browse cameras. Then rent." and "Other equipment you might also need" are not working working.


I've been testing using Safari and Chrome using an iPhone X and both mobile browsers are having the same exavt problems.

I suspect that the problem is Javascript based, but I have no idea what's broken or incompatible.  How can I fix these 2 important features so that they both work on mobile?

Here is a link to my custom.js file:

https://www.movingpicture.com/camera-rentals/js/custom.js

Thanks,
- Yvan
0
Is there any way to assign the Search box on a JQuery/JSON/DataTable page the focus?  I want the page below to have the search box keep the focus so end users viewing their results can just step up and enter their bib number to view their results.  Thanks!

https://www.gopherstateevents.com/results/fitness_events/digital_results.asp?event_id=811&race_id=1404
0
I'm facing an issue where i add a new LI to a UL and i'm unable to click it
Based on what i've read its to do with delegates and event handlers

<ul id="SchemeList" class="list-group">

   <li id="71" class="list-group-item">
      <a href="#">namegoeshere</a>
   </li>
</ul>

Open in new window



Here is the click event for the LI
   $('#SchemeList li').on('click', function () {
                alert(this.innerText); 
//...

Open in new window



Here is how i add the LI

<button class="btn btn-success" id="saveNewScheme" type="button" style="">Save New Scheme</button>

Open in new window


  $('#saveNewScheme').on('click', function () {

   var newSchemeId = 11;
   $("#SchemeList").append('<li class="list-group-item" id="' + newSchemeId + '"><a href="#">' + $("#schemeName").val() + '</a></li>');

Open in new window


should this work? or am i doing anything wrong (aside from using numbers for Id's
0
I use fullcalendar plugin with mvc.
I knew my MVC API is working and return data. But I do not see the return data on the calendar.
What did i do wrong in Event Push in Jquery?


<script>
        function Can() {
            $('#calendar').fullCalendar({
                header:
                {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay'
                    },
                buttonText: {
                    today: 'today',
                    month: 'month',
                    week: 'week',
                    day: 'day'
                },
                views: {
                    basicWeek: {
                        type: 'basic',
                        duration: { months: 3 },
                        rows: 8
                    }
                },
                events: function (start, end, timezone, callback) {
                    $.ajax({
                        url: '/Park/bookinglist',
                        type: "Post",
                        dataType: "JSON",
                        success: function (result) {
                         var events = [];
                         $.each(result, function (i, data) {
                             //alert(data.ParkProductInventoryCustomNo);
                               events.push(
                               {
                                   title: "test",
                                 

Open in new window

0
JQuery Mobile 1.4.5 is randomly adding .ui-corner-top or .ui-corner-bottom literally all over the place, and for the life of me I can't figure out why.

Here's a screenshot of the generated code showing these classes added like crazy all over the place, with little rhyme or reason. This seems to have just started happening.

https://postimg.cc/QHPJJNz5

Note the highlighted lines. Each of these elements has corner classes added in addition to the one other (non-JQM-related) class. This is just plain weird.

I have some custom JS code in its own separate file, but neither of these corner classes are mentioned there, so it seems to somehow be coming from JQM itself. I'm not enough of a JS whiz to determine why these are being added, but it doesn't really make sense out of the box... none of the affected divs have any JQM-related classes added by me. Why would JQM add these?

I previously used JQM 1.2.1 and have never seen the like of this.

How can I stop this madness? I'd love to add a link for reference but I'm concerned about exposing my client's code (or more accurately my own ignorance to said client somehow – I like to think they think I know everything).

Thanks!
0
I'm trying to alternate the row colors for my table in my razor view but nothing seems to be working. I'll give examples of all that I've tried below:

tried using the row counter...
            <table class="contain myTable">
                <tr>
                    <td class="tableHead" colspan="4">Service Groups</td>
                </tr>
                <tr>
                    <td>
                        <table class="contain">
                            <tr class="hdrBorder">
                                <td>@Html.Label(SGMResources.GridGroupName, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupCategory, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupTypeName, new { @class = "colHeader" })</td>
                                <td>@Html.Label(SGMResources.GridGroupIsActive, new { @class = "colHeader" })</td>
                            </tr>
                            @foreach (var d in Model.GetAllGroups())
                            {
                                <tr class="@(Model.GetAllGroups().IndexOf(d) % 2 == 0 ? "" : "altRow" )">
                                    <td class="myGroupStyle"><input name="linkSelectedGroupID_@d.GroupID" type="submit" class="fakeLink" value="@d.Name" /></td>
                                    <td class="myGroupStyle">@d.Description</td>
                                    <td 

Open in new window

1
Access to XMLHttpRequest at 'http://someURL' from origin 'http://someURL' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.


This is a call to a REST API controller action method. I enabled CORS on the top of controller like below:
[EnableCors(origins: "*", headers: "*", methods: "*")]
 public class TestController : ApiController
    {
    }

Open in new window


Also in the web.config:

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Credentials" value="true" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE" />
		<add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>

Open in new window


Any ideas please thanks.
1
Hello,
I am setting

localStorage.setItem("userName",userStrName);

which is fine if it is a single tab. But as soon as new tab opens and i call

localStorage.getItem("userName");

it is null

Not sure why it is null in new tab.

Please suggest.
0
I am trying to create multiple Lightbox galleries on one page. There should for example be 3 images and each one holds a different set of images. if you click on image 1, the first set shows up in a Lightbox, second one, second set of images shows in Lightbox etc.

The documentation shows you how to do this with only one and is not dynamic. I am also using advanced custom fields gallery inside a repeater field in order to create multiple galleries. (Wordpress)

$('#dynamic').on('click', function() {
 
    $(this).lightGallery({
        dynamic: true,
        dynamicEl: [{
            "src": '../static/img/1.jpg',
            'thumb': '../static/img/thumb-1.jpg',
            'subHtml': '<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>'
        }, {
            'src': '../static/img/2.jpg',
            'thumb': '../static/img/thumb-2.jpg',
            'subHtml': "<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
        }, {
            'src': '../static/img/3.jpg',
            'thumb': '../static/img/thumb-3.jpg',
            'subHtml': "<h4>Coniston Calmness</h4><p>Beautiful morning</p>"
        }]
    })
 
});

Open in new window



I have tried to create a variable and then use .each to loop through but I can't use it inside the array.


var arrayFromPhp = <?php echo json_encode($gallery['url']); ?>

$('#selector1').on('click', function() {

    $(this).lightGallery({
        dynamic: true,
        dynamicEl: [{
            jQuery.each(arrayFromPhp, function(i, item) {
                "src": item,
                'thumb': item,
            })
        }]
    })

});

Open in new window


ACF gallery code:

         <?php if(have_rows( 'image_gallery' ) ): ?>
          <?php while(have_rows( 'image_gallery' ) ): the_row();
            $gallery_name = get_sub_field('gallery_name');
            $category_name = get_sub_field('category_name');
            $gallery = get_sub_field('image_gallery');
           ?>
         <div class="gallery" id="selector1" data-src="<?php echo $img['url']; ?>">
            <img src="<?php echo $gallery[0]['url']; ?>" alt="" class="gallery-photo">
            <div class="gallery-info">
               <a href="#" class="linkgallery"><?php echo $gallery_name; ?></a>
            </div>
            <div class="gallery-info gallery-category">
                <?php echo $category_name; ?>
            </div>
         </div>
        <?php endwhile; ?>
         <?php endif; ?>

Open in new window


This is just to at least get one gallery working for now.
0
Hi guys,

I have a setInterval event in a page that refreshes a DataTable and I would like it to also refresh the timedate in a datetimepicker widget but ONLY it the widget is not being shown. According to THIS PAGE I could listen to the "show" event.

How can I say, inside my setInterval event something like "IF THE DATETIMEPICKER IS NOT SHOWN, DO THIS".

Thanks in advance.
0
Hello,

There are 2 existing files i am working on. One is :

Test.js
Test.js.map

So if i need to update Test.js how to do it (As everything is referenced from a source map file).
So browser picks up source map file as the primary source. (Test.js.map)

How to update the source map file or is there any other option if i can detach this file permanently and so that code can be referenced just from Test.js file.

Never used .map file before.

Thanks.
0
Hello,
I am using Jquery Datatable like below. But on link click,not sure why the tab here is opening twice and also on left side of original page(rather then right)and also the original page is refreshing. Any suggestions please to fix this.

var table=$('#example').DataTable( {
destroy: true,

    columns: [
        { data: 'StudentId',title:'StudentId',render: function (data, type, row) {
         
                if(type === 'display'){
                   data = '<a   id= "testlink"  target="_blank"   href="#"  >' + data + '</a>';
               }
               return data;
            }
        }      
    ]
} );
===================================================================
$('#example tbody').on( 'click', 'tr', function () {

  
   $.ajax({
            
            url:"http://localhost/student/class/URLInfo?studentId="+ studentId,            
            error: function(data) {
               var test=""; 
            },
            success: function(data) {
              var test="";          
             // window.open(data);
             window.location.href=data;
             
            
              //window.location.href=data;
        
            }
            
        });     
} );

Open in new window

0
I have a page that has quite a few youtube videos on it. The page takes time to load and I believe it is because of the youtube videos. The videos are displayed using iframe.

Each video is added to the page by doing having code like:

<iframe allowfullscreen="" frameborder="0" height="270" scrolling="no" src="//www.youtube.com/embed/sVFA6q4EP9k?wmode=transparent" width="480">
.
.
.
</iframe>

Open in new window


Can I use lazy loading so that the videos are displayed after the page is loaded? If so, can you provide an example of how I would do this.
0
the tinymce has an issue to accept single quote. Anyone can help for a fix? I applied the following methods and still not working.


https://stackoverflow.com/questions/8496573/tinymce-net-error-when-posting-with-a-single-quote-in-the-text/19511124

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=i2dx7jcg93uc58ug31nfurljvah35j5hr2s646uyaqmumj27"></script>
<script>
    tinymce.init({



        selector: "textarea", //'#mytextarea',
        plugins: [
            'advlist autolink lists link image charmap print preview anchor textcolor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        branding: false,



        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        height: 450
    });
</script>

Open in new window

0
I have an asp.net web forms website with master page and few other pages.

In master page, i have <asp:ContentPlaceHolder ID=“Placeholder1” runat=“server”></asp:ContentPlaceHolder> , where the content of the child pages are loaded.

one of the page is default.aspx ,, as such

<asp:Content runat=“server” ID=“content1” ContentPlaceHolderID=“Placeholder1”></asp:Content>

I want to change default.aspx , such that I have a side menu column and a content column. Aslo I have a anchor tag. I wrote a javascript/jquery function as such on documen t ready

$("#togglemenu").on(click, function(){
    $("sidemenu").toggle("slow");
}

the toggle works, but in the main content section , i have a table and can increase the size of the rows displayed in the table, when I change the pagenumber or change the number of items displayed in the table, the page refreshes and it doesn't maintain what state the sidemenu was in . I.e even if the menu was hidden, when i change the page number, the page refreshes and side menu appears . I want it to be hidden , if the user had hidden the menu and then changed the page number.

how can i achieve this in asp.net web forms.


<asp:Content runat=“server” ID=“content1” ContentPlaceHolderID=“Placeholder1”>

<a >  <span id="togglemenu" > Hide menu </span></a>
<div id="sidemenu">
</div>

<div id="main content"> </div>

</asp:Content>
0
Anyone please suggest , how to achieve this.

I am using Jquery-Ajax with URL below :

 url: "http://localhost/student/class/attendance?dateFrom=636869952000000000&dateTo=636912287999990000&categoryId=1",


I want to pass these 3 parameter information (dateFrom,dateTo,categoryId) into  REST WEB API controller method as below :


        [Route("student/class/attendence")]
        [HttpGet]
        public HttpResponseMessage GetStudentInfo(string dateFrom, string dateTo,string categoryId)
        {


        }


Can anyone suggest option to achieve this please?

Thanks.
0
Can anyone please suggest how to covert  ticks to DateTime in JavaScript or Jquery. For example below is the format
i am getting ticks

636891926215555850

Thanks.
0
I have a few submit buttons on a asp.net core 2.1 page and users are clicking them a few times, thus submitting the form repeatedly.   I have tried jquery and javascript to disable the buttons on document.ready and onclick, but when I do that, the form data does not post.  It takes at least 5 seconds for the form to post which is why they are clicking away...
<input type="submit" class="btn btn-success" value="Process Batch Ticket" name="submit" asp-page-handler="SubmitIssue" id="Process"/>

Open in new window


When the button is clicked, it posts to a task:
public async Task OnPostSubmitIssue(string jobNumber, string warehouse, string status)
...

Open in new window


I have tried  having the task check a variable and only run when the variable is true, but when the user clicks the button again, it returns them to a blank model, while they usually get the same page with the submission results shown, so that is not working.

I have seen some posts about onclick vs. onclient click, but have not been able to figure out how to make those help.

I thought the jquery below would work, but it doesn't:
<script type="text/javascript">

            $(document).ready(function () {
                $('#Process').on('click',
                    function (event) {
                        $('.submit-button').attr('disabled', true);
                        $('#Process').submit();


                    });
                $('#Issue').on('click',
                    function (event) {
                        $('.submit-button').attr('disabled', true)
                        $('#Issue').submit();


                    });

            });

Open in new window



Does anyone know which way I should keep trying to pursue?  I feel like I am going in circles for something that I wish was just built in with a switch.  Doesn't everyone want disable after first click at some point?

Thanks for any help,
Bonnie
0
So I am modifying a copyright free script from online to work in my classroom. I am trying to get sound to play when I press the 'go' button but don't know exactly where the code should go. When you open up the "Double Click Me.html" file you will see the script to play the sound. I have the call to the playsound function in the  go() function. But for some reason no sound in playing. I've attached the file and all relevant code.

Look for some guidance where the call should go so I can play the sound file located in the 'sound' folder. Thanks!
0
I have the codes using js datatable.
When the pdf is exported, I want to add company logo on the header and align center.
How can I do that? only PDF export. The rest does not change.


 $('#data-table').DataTable({
                            "dom": 'Bfrtip',                             
                            "buttons": ['copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'],
                            "paging": true,
                            "ordering": true,
                            "info": true,
                            "bDeferRender": true,
                            "pageLength": 100,
                            "scrollY": 600,
                            "bSort": true,
                            "stateSave": true,
                            "fixedHeader": true,
                            "responsive": true, 
                            "bDestroy": true
                        });

Open in new window

1
i use the javascript code below. but I want to have comma and dollar sign like e.g. $3,079,095.75
do you know how to code it?

parseFloat(Math.round(data[index].totaldueamount * 100) / 100).toFixed(2)
0
Hi Team,

I am using the Datatable jquery plugin to sort the table which sorts well but when I compared the output of the same input with the c# code I found it is different. I have no idea why is it so and which sort is right. Enclosing runable code for c# with output, and the output of the DataTable js plugin sort.

looking forward to hearing from you.


using System;
using System.Collections.Generic;
					
public class Program
{
	public static void Main()
	{
		List<string> colors = new List<string>
        {
           
"VW Transporter (AMB Equipement)",
"VW Transporter - OBD (AMB EQUIPEMENT)",
"Vauxhall Insignia - Unit 390622",
"Vauxhall Insignia (TCSV11 Rev G – battery mounted)"

        };
        // Call Array.Sort method.
        List<String> displayNamesSorted = new List<string>(colors);
                        displayNamesSorted.Sort();
                        displayNamesSorted.Reverse();
                        
		
		foreach (string color in displayNamesSorted)
        {
            Console.WriteLine(color);
        }
	}
}

Output:
[i]VW Transporter (AMB Equipement)
VW Transporter - OBD (AMB EQUIPEMENT)
Vauxhall Insignia (TCSV11 Rev G – battery mounted)
Vauxhall Insignia - Unit 390622[/i]

[b][u]whereas when I sort using DataTable.js plugin of Jquery it comes out:[/u][/b]

[i]VW Transporter - OBD (AMB EQUIPEMENT)
VW Transporter (AMB Equipement)
Vauxhall Insignia - Unit 390622
Vauxhall Insignia (TCSV11 Rev G – battery mounted)[/i]

Open in new window

0
Hello ,

I am trying to use the jquery  DataTable  like below but it gives  error like ,so please suggest thanks.
Cannot read property 'length' of undefined


======================================================          
       
$('#example').DataTable( {
    ajax: {
        url: 'http://localhost/Student/user',
        dataSrc: "data"
     
    },
    columns: [
    { data: 'StudentId' },
    { data: 'CategoryName' },
    { data: 'LocationId' }
   
       
    ]
});

=====================================================

JSON Data

{
    "data": [
        {
            "StudentId": "James N",
            "CategoryName": "Class 2",
            "LocationId": 1
           
        }
    ]
}

=================================================

Error:

Uncaught TypeError: Cannot read property 'length' of undefined
 
 
 at datatables.js:4755
    at callback (datatables.js:3876)
   
at Object.success (datatables.js:3906)
    at j (jquery-2.1.3.min.js:2)
   
at Object.fireWith [as resolveWith] (jquery-2.1.3.min.js:2)
   
at x (jquery-2.1.3.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-2.1.3.min.js:4)

===================================================
0
Hello ,
 I TEST it with WEB API using POSTMAN it give DATA as empty : Please suggest.

API URL:
http://localhost/school/Student/getStudentList

Result
{
    "Message": "Data Received successfully",
    "Status": true,
    "Data": [ ]
}

Open in new window



Below is the code pattern i am trying :

Models
public class Student
{
    public int StudentId { get; set; }
    public string ClassName { get; set; }
    public int LocationId { get; set; }
}

public class ResponseModel
{
    public string Message { set; get; }
    public bool Status { set; get; }
    public object Data { set; get; }
}

Open in new window


Service Method
public ResponseModel LoadStudents (SqlCommand comm)
{
    ResponseModel _objResponseModel = new ResponseModel ();
    List<Student> students = new List<Student> ();
    Student rls = new Student ();
    comm.CommandText = "Select StudentId,ClassName,LocationId from Students";
    SqlDataReader dr = comm.ExecuteReader ();

    while (dr.Read ())
    {
        rls.StudentId = dr.GetInt32 (0);
        rls.ClassName = dr.GetString (1);
        rls.LocationId = dr.GetInt32 (2);

        students.Add (rls);
    }

    dr.Close ();

    _objResponseModel.Data = students;
    _objResponseModel.Status = true;
    _objResponseModel.Message = "Data Received successfully";

    return _objResponseModel;
}

Open in new window


Action
[Route ("school/Student/getStudentList")]
[HttpGet]
public HttpResponseMessage GetStudentList ()
{
    UserRectification rtg = new UserRectification ();
    ResponseModel _objResponseModel = new ResponseModel ();
    HttpResponseMessage msg;

    try
    {
        _objResponseModel = LoadStudents (comm);
        msg = Request.CreateResponse (HttpStatusCode.OK, _objResponseModel);
    }
    catch (InvalidOperationException ioe)
    {
        msg = Request.CreateResponse (HttpStatusCode.BadRequest, ioe.Message);
    }
    catch (Exception ex)
    {
        msg = Request.CreateResponse (HttpStatusCode.InternalServerError, ex.Message);
    }
    finally
    {

    }

    return msg;
}

Open in new window

0

jQuery

17K

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