jQuery

16K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

I don't know how this section of the grid works.

1. I have a jqGrid like this

  $('#grid').jqGrid({
                    url: '/US/en-US/Unit/FetchReportResults/1577',
                    styleUI: 'Bootstrap',
                    responsive: true,
                    hoverrows: true,
                    datatype: 'json',
                    colNames: names,
                    colModel: model,
                    rowNum: 10,
                    rowList: [10, 50, 100],
                    pager: '#pager',
                    viewrecords: true,
                    height: 350,
                    shrinkToFit: false,
                    width: 1100,
                    refresh: false,
                    search: false,
                    loadtext: 'Loading...',
                    emptyrecords: 'No Results',
	            sortname: '36',
	            sortorder: 'asc'
                            
	            ,grouping: true,
	             groupingView : { groupField : ['38'] }
    		});

Open in new window


2. It calls this Controller. You see sidx parameter

     
  [NoCache]
        public JsonResult FetchReportResults(int id, bool? _search, string nd, string page, string rows, string sidx, string sord,)
        {

Open in new window


3. How does that sidx parameter come out as this?

1.png
0
Introducing Cloud Class® training courses
LVL 12
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

I have a bootstrap modal appear, the user can enter UPC codes. The user will have a tablet and a scanner, so they want minimal mouse usage.

They can enter X number of UPC codes each having a quantity associated with it.

I have two roadblocks:

1. Once the user TABS from UPC field to QTY field, I want the SPACEBAR to trigger #2 below

2. Then the form will sort of "animate" slide to left, and another blank field will appear allowing them to continue entering products. All the while , adding to a javascript array

3. Finally when they click the ALL DONE button, simply console.log the array ( I will be able to take it from here ).

Can anyone get me up and going?

Thank you very much..

UPC Modal
0
I am making my Ajax Response. For this I take 3 variables in a while loop and save values of 3 database columns in them. As there are multiple records
in DB so I have concact the value like $value .= 'value from db'. After the loop I have put these three variables in an array and sent them by using json_encode.

Here is  the sample code
 
while($projects_row = mysqli_fetch_assoc($projects_result))
		{         
			$projects_name .= '<li id="project-id-5a01bffbcfbeb40a008b458a" data-id="5a01bffbcfbeb40a008b458a">
			<span class="li-txt" style="color:#ff0000;width: calc(100% - 90px);"><a id="myAnc" href="#">'.$projects_row['project_title'].'</a></span>
			<span class="thumb-container"><span class="thumb thumb-3" style=""></span> 
			<span class="thumb thumb-6" style=""></span> </span></li>';		

			$projects_detail .= $projects_row['project_detail'];			
			$projects_image .= $projects_row['project_image'];			
        }  

echo json_encode(array("message1" =>$projects_name, "message2" =>$projects_detail, "message3" =>$projects_image ));
		

Open in new window


In my Ajax Success function I am retrieving the values as:
  $.ajax({
                url:"myresponse.php",
                type: "POST",
                data:  {"country_id":country_id},
                dataType: "json",								
					success: function(data)
					{				
						console.log(data);
						//alert(data.message1);
						//alert(data.message2);
						jQuery("#project-list").html(data.message1);
						jQuery(".pr-cont-info").html(data.message2);												
					},
				
              });  

Open in new window


The issue is data.message1 and data.message2 contains data of all rows. I need to seperate the data of each row so that I can use any row data anywhere.
For example, in my case data.message1 contains data of 3 rows like 'USA Project 1 USA PROJECT 2 USA PROJECT'. I have print that data in a DIV and due <li> tags
one record is printed in one line. Now i want that if user click on USA Project1, then it only shows the details of Project1.  Currently it shows the details of all 3 rows.

So how to fix this issue?
0
I have a slider and when I click on a nav button, I want to put the class "active" on one element and "active2" on another one. I thought this would work, but it doesn't

<script type="text/javascript">
   $(document).ready(function(){
       $('input[name="slider"]').click(function(event){
           $('.top').removeClass('active');
           $('.bkg').removeClass('active2');
           $('.slider-wrapper').find('div').eq($(this).index()).find('.top').addClass('active');
           $('.slider-wrapper').find('div').eq($(this).index()).find('.bkg').addClass('active2');

       });
    });
</script>

Open in new window

0
I have numerous DIV's in my page which hold barcodes, for example:

<div id="wrapper">
<svg id="barcode1"></svg>
<svg id="barcode2"></svg>
<svg id="barcode3"></svg>
<svg id="barcode4"></svg>
</div>

Open in new window


I need to print each barcode on a new page (per client request - I don't know why)

My question is, when the user clicks the PRINT button ( a jquery button I made with a click handler) on page, how do I only print whats in my wrapper, and also how to make sure each one is on own page?

Thank you for looking.

Regards,

John
0
Please help me in this jquery script.

I have the HTML table with checkboxes in each row in the first column and the ID column as the second column . This table has pages , when i click on the second page and come back to the first page , all the checked checkboxes are unchecked.

I created the jquery code to get the ID's and save it in the hidden textbox .

Now am trying to get  those values from the hidden textbox and put it in the array to check the checkboxes. How can i do this ?

 $(document).ready(function () {

        var array = $('#txthidden').val().split(",");
        $.each(array, function (i) {
            //how to check the checkboxes based on the ID column value .
        });
});

Thanks for your help!.
0
Hello. The revert option is not working as expected,

My ember Code is:

Admin.Inspector.extend()
    .named("Admin.RoleInspect.Inspector")
    .reopen({
        name: "AdminUser",
        icon: 'admin',
        logical: function () {
            return Admin.Role.detectInstance(this.get('model'));
        }.property('model'),
        titleView: Core.view.Message.extend()
            .reopen({
                tagName: 'h2',
                key: 'admin/role-inspect/details/title'
            }),
        bodyView: Admin.RoleDetailsView.extend()
            .named("Admin.RoleInspect.InspectorView")
            .reopen({
                roleModelBinding: 'inspector.model',
                readOnly: function () {
                    return !this.get('roleModel.canModify');
                }.property('roleModel.canModify'),
                hasChangesChanged: function () {
                    if (!Admin.RoleInspect.Inspector.detectInstance(this.get('inspector'))) { return; }
                    this.get('inspector').set('hasChanges', this.get('hasChanges'));
                }.on('init').observes('hasChanges'),
                roleModelCopyChanged: function () {
                    this.set('inspector.roleModelCopy', this.get('roleModelCopy'));
                }.observes('roleModelCopy')
            }),
        actionsView: Inspect.EditableModelFooter,
        save: function () {
            var model = this.get('model'),
                copy = this.get('roleModelCopy'),
  

Open in new window

0
I am using a JS library to drag the controls on my PAGE to perform different functions. Checkout the demo by clicking on this link:
http://iamfashionphotographer.com/del/cb-m-1/final.html

Open in new window


1) When the page loads, see the right side and click on the icon.
2) Then you will see a snippet there. Just drag it on the page.
3) After that a button will be visible on PAge. Click on it and fill the form fields and fill the data with integer values and click on save.
4) The values are stored in DB.

What I want:
1) When you click on Table or button, you will notice that some additional buttons/controls  will appear. Click on the last icon which is a delete icon. You will notice that control will be deleted from the page. But values are still saved in Database.

I want that if user click on delete icon then its data from the table must be deleted from the database.

Need code help that on which event I will set the ajax call to delete data against that control.

Note: If user drag a control on page then following event is called:
	$('.ui-droppable').on('sortstop', function(e,i) {
	});

Open in new window


Looking for expert opinion

Thanks
0
How to get attendance per day of a student in jquery? I have combo box where there are 2 options "full day", "subject wise". On click of subject wise entire teacher data, date time is shown but if its full day then how to write in jquery to get student attendance for the entire day?
0
I need to pass params to the coldfusion cfc using Bootstrap table toolbar.

When I click the apply button I am serializing the form into array and now I need to split the variable. I have the code bu I get the  error message Uncaught SyntaxError: missing ) after argument list

$("#btnApply").click(function(){
		
			//alert($("#frm2").serialize());
			var vals  = $("#frm2").serializeArray();
			var str  = "";
			
			
			for (i=0; i<vals.length;i++){
   				str += '&' + $('#' + i.name) + '_title=' + $('#' + i.name').attr('title') + '&' + $('##' + i.name) + '_alt=' + $('##' + i.name').attr('alt');
			}
			 
			 alert(str);
			  
			$('#classes').bootstrapTable('refresh',{query: {str}});
			
			return false;
		})

Open in new window

0
Cloud Class® Course: MCSA MCSE Windows Server 2012
LVL 12
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Hi experts,

I have a asp.net mvc 5 application using C#, Razor, jquery.

This is a followup to this ticket:
https://www.experts-exchange.com/questions/29104238/hyperlink-in-ASP-NET-using-Razor.html?anchor=a42592893¬ificationFollowed=208651180#a42592893

in my view on my table my link is set like this it works fine:

<a id="ReportLink" target="_blank" href="http://google.com/employeeid=@item.EmployeeID">@Html.DisplayFor(modelItem => item.EmployeeID)</a>

Because on click i want user to got to
http://google.com/employeeid=1
http://google.com/employeeid=2
http://google.com/employeeid=3


<a id="ReportLink" target="_blank" href="http://google.com/employeeid=@item.EmployeeID">@Html.DisplayFor(modelItem => item.EmployeeID)</a>

Is there a way to set the href attribute to

Having a Javascript variable called firstpartofhref = "http://google.com/employeeid=" and then set it in the href before the @razor tag something like this?

 href=" firstpartofhref + @item.EmployeeID"

Or
can i just store this razor tag @item.EmployeeID in a javascript variable called secondpartofhref also?

and then set the href attribute something like this?

 href=" firstpartofhref + secondpartofhref"
0
I need to show a form in table format with frozen headers and columns.  I thought I could use the jquery multifreezer, but if the fields have default values in them, they are getting duplicated on submitting the form.  So instead of ending up with the form value of 'Day', I get the value 'Day, Day'.

I am guessing this has to do with the cloning that is going on in the javascript.  

Is there a way to not allow the values to duplicate?  I really don't understand.  Below is a link to the MultiFreezer and I have added the contents of the .js file which I believe is the culprit.  

https://www.jqueryscript.net/table/Freeze-Headers-Columns-In-Table-jQuery-MultiFreezer.html

(Added)
Below is a very simplified version of my form.  As soon as I comment out the line "<script src="multifreezer.js"></script>" it works fine.  I also added screenshots of the results of the form.Without multifreezerWith multifreezer
<!DOCTYPE html> 

<html>
<head>
<title>Schedule Jobs</title>

<script>
function SaveIt()
{
document.form1.action = "add_jobs-simple.cfm?save=y";
document.form1.submit();
} 
</script>

<style>
#freezer-example { width: 100%; max-height: 800px; overflow: hidden; margin: 1em auto; font-family:arial;  font-size:14px;}
#freezer-example .table th,#freezer-example .table td { white-space: nowrap; }
#freezer-example .table th { outline: 1px solid #606060; padding: 20px 2px 20px 2px; }
#freezer-example .table td { outline: 1px solid silver; padding: 20px 2px 

Open in new window

0
I am getting 401 error with the below ajax call. How do I fix this issue?

full error: ..................................................................................................................
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64327' is therefore not allowed access. The response had HTTP status code 401.
/...................................................................................................................................

var call = $.ajax({
           
            url: "https://name.com/web/lists('Call Management')/items?$select=Item_x0020_ID,State,Description&$filter=(Item_x0020_ID eq %27BBB000126%27)",
            type: "GET",
            dataType: "json",
            crossDomain: true,            
            headers: {
                Accept: "application/json;odata=verbose"
            },
            success: function (result) {
                alert("it worked");
               
            }
        });
0
Havings issues with the first part of a jquery script that is has some quotes and an href tag and its not appearing on the page as expected.

$('#faq_table tbody').append('<tr><td><a href="http://mywebsite.com/detail.jsp?u=' + jsonparse[i].wwid + 'target=0>' + jsonparse[i].name + '</a></td><td>' + jsonparse[i].cat + '</td><td>' + jsonparse[i].answer +'</td><td>' + jsonparse[i].keywords + '</td><td>' + jsonparse[i].responsibility + '</td></tr>');

Open in new window


The first part of the code where jsonparse[i].answer is referenced is getting cutoff and becoming part of the viewable link instead of the URL link itself.

Link ends up looking like this


wwid value>" target=0>name value

Instead of

name value (with link to the url above)

I know it has something to do with the quotes but can't figure it out.

Thanks for any help.

Adam
0
I am using jQuery UI & bootstrap Modals in my website. As both modals have different styling, so I want to change the styling of jQuery Ui Modals
according to the Bootstrap Modals. I have tried to change the styling in jQuery UI css but it not works. What is the best way to do this?

Any Working example?
0
How can I show a custom error page for a security error. For example, if a user enters forbidden text into an input box such as: <script>alert(123)</script>, the user is redirected to errorforbidden.aspx.  I have ValidateRequest="true".

Code is vb.net
0
two pop up calendar .... see https://rvshare.com/. Do you know where I can find the codes pop up 2 calendar?
0
Hi there. On my WordPress site, we are using BeaverBuilder and we have a plugin called PowerPack Addon installed and are using the Modal Popup module. We also are using Foobox Pro installed. On this page https://ccdenver.org/engage/ the video modal popup automatically pops up and starts to play the video in Firefox on a PC. However, on a Mac the popup modal opens but the video hangs. Any ideas on how to get that to autoplay like it does on a PC? Also, I have ?rel=0&autoplay=1 at the end of the YouTube string.

Any ideas experts?
0
I have an array of checkboxes coming from a collection.

See below:

<div class="form-group">
    Select days in a week :
    <td class="even" *ngFor="let item of dayList">
    <input value="{{item.check}}" type="checkbox" checked="item.check" formControlName = "selectedDays">  {{item}}
   </div>

Open in new window


formControlName I am set as selectedDays.

I need to generate JSON object for the selected checkbox values.

Currently, i am getting boolean value in selectedDays. But I am supposed to get an array of checked values in an array inside JSON object.

this.dayList = ['Sun', 'Mon', 'Tue','Wed',"Thu","Fri","Sat"];

JSON Object looks like below, please note the value of selectedDays, it is supposed to be "Sun, Mon" based on selection, but it is showing as true.


 
Object
    date
    :
    "2"
    day
    :
    "Mon"
    hour
    :
    "3"
    minute
    :
    "3"
    schedulerjobtype
    :
    "Daily"
    selectedDays
    :
    true
    useCase
    :
    "UC 2"
    zone
    :
    "Zone 3"

Open in new window


How can I implement this?
0
Free Tool: Port Scanner
LVL 12
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

How would i get all child elements of a root element by class name using a regex pattern?

something like this

var items = $("#root_element_id").children("div:regex(class,\_[a-z0-9]{4})");
0
I am wondering if anyone can shed some light on what programming language is showcased in the following video:

https://vimeo.com/36579366

The speaker is Bret Victor.  I've tried contacting him directly, but have never gotten a reply, so I thought, "Longshot, but maybe somebody on EE knows him or recognizes what language he is using."

Is this an actual language, or something homegrown / custom - just for the purposes of the demo.  The 2-way-tool "reactive document" nature of the presentation is astounding (to me).

Of particular interest is around time index 9:10 where he appears to interact with the generated image and change the underlying code.  At various other points in the video he changes the code and the picture changes instantly without a recompile (React-esque environment) but the visual tools he uses are unfamiliar to me.  It is not any sort of IDE or language I have seen.

Some of the interactivity looks a lot like Tangle.js:

http://worrydream.com/Tangle/

which seems to be a JavaScript library by the same guy, but I am not sure this library, while very cool, explains everything he is doing in the demo either.

Thank you!

Tom
0
I've been asked to submit a code sample using JQuery and Laravel. It's done and I'm getting ready to zip things up to hand to the administrator but I've got a question.

When I go to zip up the entire Laravel project, the "vendor" and the "node_modules" folders are enormous.

The exercise itself is pretty simple. I think I could get the point across with a couple of blades and the controller. Still, I want them to see the entire site, so here's my question:

Do those who work in Laravel typically expect those two directories? Is there a more streamlined approach to sharing the code to a Laravel site or do you have to box up the whole thing?

Basic question, I know, but it's worth asking if there's a more expeditious way to do things.
0
HI all,
Im facing problem while using clone in Jquery.
I need to clone the form with different ids so that i can use all the values based on those ids
inside the form there are multiple elements like <input>,radio button,attachment upload,text area
0
Screen grab - search screenHi All,

I am working on updating a web app that keeps track of a large number of phone number assignments (among other things), I am trying to update the UI so that it doesn't look like it was done in the 90's so I am using bootstrap and jQuery.

I need the end users to be able to search/filter the results from each column, see attached for a redacted likeness for the look/feel I am going with. I didn't want to use separate search buttons to submit the forms, instead I was thinking of having the user just enter the filter terms into the text box and it either updates live or (preferably) updates the view if they press enter.

At the moment I have the screen being generated and the unfiltered results from the database shown in the main view. I have no real idea how to go about using jquery to submit using multiple search fields (or even 1 search field for that matter). So I will need some help pointing me in the right direction and, if you can, some examples.
0
Hi Experts,
I need help adding a value to my KENDO UI Multiselect Control.  I dynamically load my control by providing a datasource.  I then use the optionLabel and value properties to add a value to my control but it's not working.
I have done this before with KENDOUI Drop Down List control, but I can't seem to get to work for the Multi Select control.

I have attached an image of my code and an image of how I use my control in my UI.

Image1.PNG
Image2.PNG
Please let me know what I need to do to make it work.



Thank you in advance,
mrotor
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