jQuery Help

I am creating a Cordova app and I am using a single file. The application makes use of jQuery Mobile and I have created several sections inside the document using pages, like:

 <div data-role="page" id="addItems" style="background-color: white">

Open in new window

I created the following code in the JavaScript file:

function goToAddItems() {
  console.log('got to goToCards');
  $(':mobile-pagecontainer').pagecontainer('change', '#addItems');
}


/**
 * This is the main class
 */
var app = {

  //create initialize function:
  initialize: function () {
    document.addEventListener(
      "deviceready",
      this.onDeviceReady.bind(this),
      false
    );
  },

  // deviceready Event Handler
  onDeviceReady: function () {
    this.receivedEvent("deviceready");
  },

  // Update DOM on a Received Event
  receivedEvent: function (id) {
    
    $("#allWidgets").on("click", function (e) {
     this.goToAddItems();
      
    });

Open in new window

How do I programmatically

a) only display the home page when the app loads? and
b) how do change from one page to the other? I created the function goToAddItems() - but that doesn't seem to work.

Can anyone please guide me how this is done with the latest version of jQuery Mobile (1.4+)?

Thanks

Massimo

https://next.plnkr.co/edit/ru59CnaduxaqUyxbBvtI?p=preview&preview

12 Comments

CompTIA Network+

LVL 13

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Hello,

I have a Wordpress menu, it is a 3 level menu and the third level isn't working properly.

If you visit this link.
http://oalaca.nextmp.net/

Under the profession menu you will see What is Landscape Architecture, the next 3 menu items ( Why is Landscape Architecture Important?, and Studying Landscape Architecture only appear when What Does a Landscape Architect Do) are supposed to only appear when you hover over What is Landscape Architecture?, but they display as default...

Interesting thing, if I go and scroll over that item and and then scroll off, those 3 menu items close and everything works as it should.

So my question is
1. How do i make What Does a Landscape Architect Do?, Why is Landscape Architecture Important?, and Studying Landscape Architecture only appear when What Does a Landscape Architect Do is hovered over?

9 Comments

I'm developing a Cordova app and one of the function is, that it can display orders.
I would like to retrieve all the orders when the app starts and put them into a JavaScript array:

var allOrders = [];			
this.getAllOrders = function() {
				var url = "http://137.108.92.9/openstack/api/orders?OUCU=" + oucu + "&password=" + password;
				/* Get the data */

				$.get(url, function (data) {
					var obj = $.parseJSON(data); // 
					if (obj.status == "success") {
						// was able to get the data successfully 
						// loop through all orders
								$.each(obj.data, function(i, item) {
                  console.log(item);
									app.allOrders.push(item);
                });
          };
				})
      }

Open in new window

The JavaScript array is populated with JSON objects.

How do I read JSON objects out of the array? For example, I would like to find out in which position the Order ID 71415 is.

      //Searches for an order ID
      this.searchOrderID = function(OrderID) {
        ???
      }

Open in new window

I would appreciate it if someone could give me an idea how to read json objects out of a JavaScript array. Searching for an order ID is one thing and then I would like to retrieve the picture URL for example .. I think once I know how to loop through the variable and then read the element ID, it should make it easier for me to implement the other functions.

Thanks for your help

Massimo
JSfiddle: https://jsfiddle.net/mscola75/ksqyem7g/2/

2 Comments

Looking for a jQuery based date calendar widget that can be tied to a text box on a form. I am using https://api.jqueryui.com/datepicker/

It either lacks the functionality to prevent user from typing in gibberish as a date or I don't know how to configure it properly. I tried this:

$(function() {
            $("#datepickertd").datepicker({
			constrainInput: true}););
        });

Open in new window

I thought constrain input required a format mm/dd/yy (or whatever you pick as the default format). Constructed as in the code, it disables the functionality totally.

Happy with a fix for this or suggestion for another one that has this feature.

Thanks

jQuery

3 Comments

I would like to write a function that returns all orders and puts the OrderIDs in a JavaScript array.

The JSON looks like this:

{
    "status": "success",
    "data": [
        {
            "id": "69507",
            "client_id": "1",
            "date": "2019-05-18 11:02:20",
            "latitude": "0.00000000",
            "longitude": "0.00000000"
        },
        {
            "id": "69514",
            "client_id": "2",
            "date": "2019-05-18 11:15:20",
            "latitude": "0.00000000",
            "longitude": "0.00000000"
        },
        {
            "id": "69513",
            "client_id": "1",
            "date": "2019-05-18 11:15:16",
            "latitude": "0.00000000",
            "longitude": "0.00000000"
        },
        {
            "id": "69511",
            "client_id": "1",
            "date": "2019-05-18 11:13:23",
            "latitude": "0.00000000",
            "longitude": "0.00000000"
        },
        {
            "id": "69510",
            "client_id": "1",
            "date": "2019-05-18 11:12:01",
            "latitude": "0.00000000",
            "longitude": "0.00000000"
        },
        {
            "id": "71397",
            "client_id": "1",
            "date": "2019-05-20 22:33:36",
            "latitude": "41.00000000",
            "longitude": "0.00000000"
        }
    ]
}

Open in new window

As I'm using jQuery, I use the following method to loop through the array - and then get the "id":

var orderIDs = [];

function getAllOrderIDs() {
  var url = "http://137.108.92.9/openstack/api/orders?OUCU=" + oucu + "&password=" + password;
  /* Get the data */
  $.get(url, function (data) {
    var obj = $.parseJSON(data);
    if (obj.status == "success") {
      // was able to get the data successfully 
      // loop through all orders
      data = $.parseJSON(data);
        $.each(data, function(i, item) {
          //alert(item);
          orderIDs.push(data[item].id);
        });
    };
  })
}

Open in new window

I get the following error message:
index.js:49 Uncaught TypeError: Cannot read property 'id' of undefined

Line 49 is the line of code which I puts the orderID into the array.

Can someone please give me a clue what I'm doing wrong?

Thanks for your help

Massimo

9 Comments

I have a Asp.net MVC app which sends a float array data to the client

float[320,240]
See attached for the data, its around 1.4mb

I need to dramatically reduce this size, and be able to convert it to the current format in Javascript

Here is the request

 $.ajax({
  type: "POST",
  url: "@Url.Action("CameraChange", "Home")",
  async:true,
  data: "{'cameraId':'" + ID + "'}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (response) {
                 imageTemperatureDataArray = JSON.parse(response.TemperatureDataArray);
  },
   error: function (e) {
       alert("error: " + e.message + ' ');
  }
 });

Open in new window

Then I use it futher down in

  $("img#schemesImageSchemes").mousemove(function (e) {
       $('#dataSchemes').text(imageTemperatureDataArray[myX][myY]);
});

Open in new window

Is there a way to reduce this size of the attached
And how would i then convert it in JS ?
floattemparray.txt

11 Comments

Hi,

I wanted to show and hide div based on condition in jquery

Below code works and hide all div's having class "countryselection"

$(".countryselection").hide();

Open in new window

But if I am passing variable at runtime and show all div's like below:

$(selectedValue).show();

Open in new window

but it doesn't work.

Below is the code snippet. Class in variable "selectedValue" is already applied in the div.

Please advise.

var selectedValue = jQuery(this).val();
$(".countryselection").hide();

alert('vcountry: ' + selectedValue);
$(selectedValue).show();

Open in new window

Regards,

jQuery

4 Comments

I have tiles that I am loading in a repeater using VB.net.

For each tile, when they hover over the percentage I want to display a tag that is a button.

I want to use Jquery to do this, but I also want to make sure that it's displaying the 'View More' tag that is tied to the corresponding percentage label. Is this possible?

This is my code. I simplified the table so it wouldn't have all the fields. It just has the fields that are concerned with my question.

<table id="TableTraining" class="display scrollTable cards" style="width: 100%; text-align: left !important; font-size: 14px;">
            <thead>
                <tr class="colorFontRTOBlue" style="font-size: 12px;">
                    <th class="">Percentage
                    </th>
                </tr>
            </thead>
            <tbody id="dataContainer" clientidmode="Static" runat="server">
                <asp:Repeater ID="repRepeater" runat="server">
                    <ItemTemplate>
                        <tr id="row" class="<%# Eval("divRowClass").ToString()%>" style="cursor: pointer;">
                            <td class="stylRow5Perc stylTileLabel stylTileActive stylActivePercent">
                                <asp:Label ID="lblActiveStatus" Text='<%# Eval("ActiveStatus").ToString()%>' runat="server"></asp:Label>
                                <asp:Label ID="lblPercentageTile" Text='<%# Eval("Percentage").ToString()%>'

Open in new window

…

11 Comments

I have a classic ASP page that pulls dates from the database. These dates are dates that my jquery calendar must disable.

I need a page that takes information from the database and puts it into an array which is then put into the javascript.

In order to disable specific dates, we need to create a custom function. Our function will compare all the dates with an array of disabled dates.

So if a date is in disabled dates array our function will simply return false. Here is the code snippet. The code is heavily commented and will help you in understanding.

Here is the Javascript for Jquery Datepicker

 <script>
 
 /** Days to be disabled as an array */
var disableddates = ["12-3-2019", "12-11-2019", "12-25-2019", "12-20-2019"];
 
function DisableSpecificDates(date) {
 
 var m = date.getMonth();
 var d = date.getDate();
 var y = date.getFullYear();
 
 // First convert the date in to the mm-dd-yyyy format 
 // Take note that we will increment the month count by 1 
 var currentdate = (m + 1) + '-' + d + '-' + y ;
 
  // We will now check if the date belongs to disableddates array 
 for (var i = 0; i < disableddates.length; i++) {
 
 // Now check if the current date is in disabled dates array. 
 if ($.inArray(currentdate, disableddates) != -1 ) {
 return [false];
 }
 }
 
}
 
 
 $(function() {
 $( "#datepicker" ).datepicker({
 beforeShowDay: DisableSpecificDates
 });
 });
 </script>

Open in new window

The inArray() method returns -1 if it cannot find a match.

SQL Database of Dates
tbl_calendardates

/****** Object:  Table [dbo].[tbl_calendardates]    Script Date: 5/15/2019 11:30:35 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[tbl_calendardates](
	[autoid] [int] IDENTITY(1,1) NOT NULL,
	[daterequired] [datetime] NULL
) ON [PRIMARY]
GO

Open in new window

Thank you in advance

1 Comment

Hi there,

I have an issue with my woocommerce mini cart.

The issue I have is that there are a few items that seem to be stuck in the cart no matter if you are logged in or not. If you try and remove them, a few seconds later they appear again.

I thought It might have been outdated plugins and template files, so I have backed up my site and updated everything along with all the template files, still the same issue.

My website is www.ingeniousgifts.co.uk and you can access the slide out mini cart from the top right of the screen.

I have attached a screen record so you can see what happens.

I would really appreciate if someone could help me find out why this is happening and how to fix it?
Home---Ingenious-Gifts.webm

11 Comments

CompTIA Security+

LVL 13

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Anybody here who can give me a hint to execute custom Javascript inside a CodeceptJS script?
I need to close a layered window and I currently cannot do it with codeceptJS default calls, so I want to close it with jQuery.
I use

	I.executeScript(function() {
		$('#Sidemenu').hide();
	});

Open in new window

Inside my test, but I only get the error message that $ is not defined.

2 Comments

Hello,
Can someone please suggest how to convert date like below to ticks
May 09 2019 23:59:59 to ticks in jquery or javascript?

Correct ticks conversion value should be :

636930431999990000

As per this link:
https://tickstodatetime.azurewebsites.net/

Thanks.

5 Comments

  function getContacts(listId, cOnly) {

            if (typeof contactTable !== 'undefined')
                contactTable.destroy();
            contactTable = $('#contactstable').DataTable({
                "serverSide": true,
                "stateSave": true,
                "ordering": false,
                "searching": true,
                "oSearch": {"bSmart": false},
                "searchDelay": 1500,
                "ajax": {
                    "url": "get-contacts.php",
                    "type": "POST",
                    "data": {
                        listId: listId,
                        co: cOnly
                    }
                },
                "rowCallback": function (row, data) {
                },
                "initComplete": function (data) {
         
                },
                "columns": [
                    {"data": "contact"},
                    {"data": "email"},
                    {"data": "company"},
                    {"data": "date"},
                    {"data": "actions"}
                ],
                'columnDefs'        : [      
                { 
                    'searchable'    : false, 
                    'targets'       : [2,3,4] 
                }
            ],
                "order": [[0, 'desc']]
            });


     
        }

Open in new window

so this function creates my dataTable,

all works table it up, i only perform search functions on contact and email,

how ever it is failing to give me exact results , for example first record is Tim Smith , i can clearly see Tim Smith, i type Tim Smith into the search input provided by data-tables, and he isnt shown in the result ?

https://datatables.net/

4 Comments

I am using Jquery Datatable.
If anyone can please suggest ,why i am getting blue underline only in Internet Explorer Edge browser for some random dates only like below image: Please suggest thanks.

Please see below image:

Automatic blue underline only in Internet Explorer Edge browser

1 Comment

I have an old site here built in JQuery Mobile 1.2.1. It was working fine cross-browser until fairly recently.

As with all other sites in this client's family, this site is required to include a global navigation bar from the main organization, placed by including a js dependency at the end of the document head. This has been a requirement for some time and worked fine.

The site in question makes use of a hidden main nav that is revealed when a user clicks the menu button, at which point the page slides 175px to the right to reveal the main navigation on the left. Again, no problems there until recently.

I noticed only today that in Safari, when the global nav is called and the main navigation is revealed, gesture scrolling down the page (i.e., two finger trackpad or one finger on the Mac Pro wireless mouse) no longer works reliably. I say "reliably" because if you keep futzing long enough, you'll get some movement. If you scroll to the top of the page and past, it rubber bands back and you may be able to scroll down for a second or two. Strangely, x-scrolling is no problem (though this should probably be disabled, as side scrolling isn't useful here). It's all super buggy-looking and very strange.

Inspecting the code, I was able to find nothing with overflow-y:hidden (which was my immediate suspicion). I suppose that makes sense since I am able to scroll sometimes.

I noticed scrolling behavior returns to normal if I remove the required global …

2 Comments

So I have a movielist and I have a column name thumnail_path which is udefined I have no idea why that is for example here is a movie i have from my movie list array

{
"idmovielist": 1,
"name": "MovieName",
"thumnail_path": "hhh",
"description": "ewewwe",
"year_released": "23",
"language_released": "eni"
},
below I have an attachemnet of my code and screen shot of my page

<html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
    <link href="mystyle.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="mycrud.js"></script>
    </head>
    <body>
    <title>My Movies</title>
    <header>
        <h1>Movies</h1>
    </header>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

Open in new window

…

HTML
jQuery

1 Comment

LVL 1

Question by

RationalRabbit

2019-05-06Solved

jQuery Load() and AJAX

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

…

7 Comments

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

8 Comments

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

5 Comments

OWASP Proactive Controls

LVL 13

Learn the most important control and control categories that every architect and developer should include in their projects.

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

3 Comments

LVL 1

Question by

ITsolutionWizard

2019-04-30Solved

Full Calendar MVC

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

…

3 Comments

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!

18 Comments

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

…

5 Comments

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.

10 Comments

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.

8 Comments

jQuery

Related Topics

jQuery

Related Topics