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

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,
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
I am developing my first application with Apache Cordova and I need some assistanstance with the Open Street Map object. I am sending a request to the Open Street Map to get Lat/Lng of a location. I chose Manchester UK and I received the following JSON back:

ManchesterUK.PNG
In order to do this, I set to share a taxi (it's a taxi sharing app) first and then I click on Update Map.
This is the code for UpdateMap:

snipping.PNG
     function updateMap(address){
        var onSuccess = function(position) {
          var div = document.getElementById("map_canvas");
          div.width = window.innerWidth - 20;
          div.height = window.innerHeight * 0.8 - 40;
          // change the zoomin level
          map.setZoom(15);
          if (address != undefined) {
            // TODO 2(a) FR2.2
            var endPoint = "https://nominatim.openstreetmap.org/search/" + address + "?format=json&countrycode=gb"
            $.get(endPoint,function(e) {[embed=file 1418190][embed=file 1418191][embed=file 1418192]
              var location = e;
              map.setCenter({
                lng: location.lng,
                lat: location.lat
              });
            })


          } else {
            map.setCenter({
              lng: position.coords.longitude,
              lat: position.coords.latitude
            });
          }
        };
        var onError = function(error) {
          alert(
            "code: " + error.code + "\n" + "message:

Open in new window

0
Hello!

I'm having a problem with this page: https://www.benknier.com/skills.html 

The page used to load and display properly, but within the last couple of weeks it has stopped working altogether. It seems to flash the content and then disappear. All of the other pages on the site work properly and I haven't been able to pinpoint the issue by looking at what's in the console. I've attached a copy of the source code to this post.skills.html

Any help you can give me in getting this working properly will be greatly appreciated!

Thank you in advance.
0
I'm a non-programmer (i.e., designer) using JQuery Mobile 1.2.1 (I know this is old, in the process of updating). When a visitor arrives at a particular static page via an outside link that includes a #hash at the end of the URL (i.e., "my-site.com/mypage.html#target", #target being a section inside a collapsible), I need a collapsible on that page to expand, then I need the page to scroll smoothly to the target of the hash.

At the moment, this is a very specific use case, where I know the exact section and the target I want to scroll to, but it would be nice if this code could be reusable for any external link coming to a page where I would like to scroll to any target that's inside any collapsible. At this point, I'd settle for anything that works, as this is a somewhat urgent request.

I'm able to accomplish this sort of thing when just navigating to targets within a page via click, but when arriving from outside the page/site via a hash link URL, the results are very random and somewhat unpredictable. The collapsible opens, and then either the page scrolls to the target then immediately resets to view to the top of the page, or the scroll lands off target by varying margins. Kinda maddening.

This is where I've arrived most recently before throwing up my hands and running here.

$(window).bind("load", function() {
    	var hashName = window.location.hash;
//because I know the specific hash, I put it in an if statement to keep it from possibly interfering 

Open in new window

0
I use js datatable and everything is working. Now I want to use ajax loading because my report will take some time to generate the report.
I tried to use processing in the js datatable but it is not working to me. Hope you can show me how it works.


 $('#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
<p>	bullet point bug test</p><ul><li>	</li><li>		1	</li><li>		2	</li><li>		3	</li><li>		4	</li><li>		5</li></ul>

Open in new window



so i have a string from CKEDTIOR ,

it keeps adding in blank bullet points,

is their a way to remove the <li> </li> if it has no value inside it ?

for example keep the li with 1 , 2 ,3 but remove the first one which is blank ?
0
I'm making a semi-simple chat client.

I'm using CryptoJS to encrypt a string, then JQuery to send that string to a web handler, and storing that in SQL

... then attempting to retrieve the string, and decrypt it.

It works...sometimes, not all the time.  I assumed it has something to do with string encoding and escaping URI.. or I'm doing something wrong in the encrypt() and decrypt() methods.  Now I seem to be going backward in success rate.

I can't figure out why it wouldn't just work all the time, or not at all.
When I use alert(encryptedmessage), and alert(messagetodecrypt) ....both strings appear to match perfectly, which adds to the mystery.

Any ideas??


<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

    <script type="text/javascript" src="/Scripts/jquery-min.1.9.0.js"></script>

    <script type="text/javascript" src="/Scripts/aes.js"></script>


    <script>
        var channelid = "nullchat";
        var key = "public";
        var keySize = 256;
        var ivSize = 128;
        var iterations = 100;

        
        window.onunload = SetInt();

        function SetInt() {
            window.setInterval(GetID, 2500);
        };

        function channelset(val) {
            channelid = val;
        };

        function keyset(val) {
            key = val;
        };

        function post(val) {

      

Open in new window

0
The following item is not working and not sure why.

1. I see the result set / value, but the first row shown 'No data available in table'
2. when I click on the <th></th> and try to sort, all data is disappeared.
3. when the table is loading (it may take 10 seconds just because of the large report),
where i can add the like ajax loading animated images? or how should I handle it?
4. The paging is not working. it shows every rows (10,000).
5. when I keep refresh the webpage, it keeps adding up the rows every 10,000

Thanks




 
 <table id="data-table" class="table table-bordered" width="100%">
                    <thead>
                        <tr>
                            <th>Row Count</th>
                            <th>id</th>
                        </tr>
                    </thead>
                </table>

 function test2() {
        $(document).ready(function () {
            $('#data-table').DataTable({
                "paging": true,
                "ordering": true,
                "info": false,
                "bProcessing": true,
                "bDeferRender": true,
                "pageLength": 50,
                "scrollY": 600,
                "bSort": true,
                "stateSave": true
            });
            var tr;
            var data = new Array();
            var x=0;
            $.ajax({
                url: "/Accounting/TestMe",
                type: "Post",
                data: JSON.stringify(data),
              

Open in new window

0
hi experts. can you show me super simple demo with mvc web api (without entity framework)  that using js datatable?
I have some troubles on the ajax part. The web api is showing data in the browser but I have some trouble to call web api in ajax jquery.
0
Joomla: "UI should be replacement of Joomla core, loaded at component or template level"  Can someone explain to me the best way to go about replacing the Joomla core jQuery UI with another UI?
0
I have simple mvc Ajax call using JavaScript. and after the call is successfully completed the job. how can I get the data from the server side without refresh?

the Ajax call is to update some records only.

another question is how to keep the vertical position after the call. for example, some of the webpage will have to scroll down to see information and I want to keep scroll down position.
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