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 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
https://developers.google.com/calendar/quickstart/dotnet
I hope to get list of music concert event based on the zip codes
and I used above google api.

can you guide me how to filter just music event and zip?

I use c#
0
I would normally just echo out the search results using php when doing an Ajax search but this time I am trying to use a json response instead. For seem reason I am getting duplicate results like:

result 1
result 2
result 1
result 2

when it should just be

result 1
result 2

DB Query:

    public static function searchContacts($searchText)
    {
        $searchTerm = "%{$searchText}%";
        
        $db = static::getDB();
        $stmt = $db->prepare("SELECT `id`, `first_name` FROM `contacts` WHERE `first_name` LIKE ?");
        $stmt->execute([$searchTerm]);
        return $stmt->fetchAll(PDO::FETCH_CLASS, get_called_class());
    }

Open in new window


Controller:

    public function search()
    {
        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            
            $response = [];
            
            $searchText = trim($_POST['searchText']);
            
            $searchResults = Contact::searchContacts($searchText);
            $response['results'] = $searchResults;
            
            echo json_encode($response);
            
        }
    }

Open in new window


jQuery/Ajax

    $('#search').keyup(function () {
        var searchText = $('#search').val();
        if (searchText.length > 3) {
            $.ajax({
                    url: url + '/Contacts/search',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        searchText: searchText
                    }
                })

                .done(function (data) {

                    $.each(data.results, function (index, item) {
                        $('.search-results').append("<a href=' " + url + '/contacts/' + item.id + " '>" + item.first_name + "</a>" + "<br>").show();
                    });
                })

                .fail(function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus + ': ' + errorThrown);
                    console.warn(jqXHR.responseText);
                });
        } else {
            $('.search-results').hide();
        }
    });

Open in new window

0
Here's my code:

<div id="helper" style="display:none;"></div>
<input id="ord_reviewOrder_submit" type="button" class="btn_base btn_green_60" value="Submit" onclick="$('#ord_reviewOrderError').slideUp().html('');
       if($('#ord_deliveryMethod').val().length == 0 || $('#ord_deliveryCost').val().length == 0)
       var amount = $('#helper').val();
       $('#ord_reviewOrderError').append('A delivery method must be selected to process the order.<br/>');
       [b]$('#ord_reviewOrderError').append('$('#helper).val()');[/b]

Open in new window


What you're looking at is a part of a page that I'm being asked to troubleshoot.

The solution I'm trying to engineer will be looking for the value the API is going to be putting in the "helper" div.

Ultimately, I want to be able to evaluate that value, but for now I'm just trying to reproduce it and I can't get it to show up in the line that I have in bold.

There's no error, but there's no value either.

When I look at the source code, I can see this:

[code]<div id="helper">1000</div>

But I won't see "1000" in the "ord_reviewOrderError" div which is located toward the bottom of the page.

No error, but no value.

What am I missing?
0
I am hoping this is an easy solution that I am just overcomplicating.

1) I have JSON data stored in a hidden div
2) I want to parse that JSON data for a particular record and get a specific value (code) from the record.
3) I want to use a URL parameter called id to filter for that specific JSON record and get the code from the data.
4) below is the code I started putting together but I can't see to successfully figure out how the parse the JSON data for the record I need.
 
//URL Parametercode
$(document).ready(function() {
if (getParameterByName('id') != '') {
 
//use ID To get course code
var courseid = getParameterByName('id');
console.log(courseid);

var courseJSONDdata = $("#coursedata").text();
console.log('THIS IS A TEST' + $("#coursedata").text());

//filter by Paramter ID
function filter(courseJSONdata, courseid) {
           var result = [];
           if (courseid)
               result = courseJSONdata.filter(function (item) { return item.dataid == courseid });
           return result;
       }
       
console.log('RESULT TEST ' + result);

///Load the Data for the Course after Parameter
   LoadQuestions(coursecode, $("#answers").text());
   LoadData(coursecode, $("#coursedata").text());
   }
   }
);

function getParameterByName(name) {
  var res = new RegExp(
      // Parameter names always start after a ? or &.
      '[\?&]' +

      // Make sure any [ or ] are escaped in the name.
      name.replace(/\[/g, '\\\[').replace(/\]/g, '\\\]') +

   

Open in new window

0
I am dealing with an SAAS application that generates html pages that use css

Only some of this css is open for "configuration" (i.e. that I can change)

I have a need to hide a delete button - but I  am NOT a css guru

I want to hide/disable ONLY THIS button:
<button xmlns:urlencoder="java:java.net.URLEncoder" 
xmlns:stringext="java:com.niku.union.xsl.StringExt" 
type="button" onclick="submitForm('page_XXXList','odf.deleteObjectInstancesConfirm','odf_sub_object_code=XXX','odf_is_sub_object=true','odf_cncrt_parent_id=5000002','odf_parent_id=5000002','parentObjectCode=ZZZ','ui.page.space=odf.ZZZList','partition_code=NIKU.ROOT');" 
style="  " 
class="ppm_button ">
<img src="ui/uitk/images/s.gif" class="caui-ndeCheckmark" alt="Delete" title="Delete" border="0" align="absmiddle">
&nbsp;Delete
</button>

Open in new window

NOTE this string ,'odf_sub_object_code=XXX'  makes this button unique i.e. the odf_sub_object_code value XXX is relevant (I think)

How might hiding this button be possible?

ps. the CSS is large, if you need snippets from it please let me know what bits are needed.
0
Can you reference a asp tag that is passed in variable.  I have a table  that contains rows which
contain asp id's example aspTagName = txtFirstName,  fielRequired = false

I want to look at the column fieldRequired and based on value of false
remove the attribute required from the asp page using the value of
the aspTagName(txtFirstName)

Please advise.

Thanks in advance
0
Hi, on https://magickitchen.com, there's a console error.

jquery.min.js:4 Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (jquery.min.js:4)
    at plugins.min.js:2
    at plugins.min.js:2

All I can find is that it could be a problem with the version of jquery (we are using https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js), or that there's some code using load, unload or error. I can't find any code doing that.

Can anyone tell me where I can fix this error? Thanks!
0
this is a follow on to the question at
https://www.experts-exchange.com/questions/29138630/JQuery-If-Test-Not-Working.html?headerLink=workspace_open_questions

Open in new window


I need the cookie to be deleted when they close the browser or submit the order.   This is the code I have to delete the cookie but it isn't going away for either reason.

jQuery('#cook').click(function(e) {
		e.preventDefault();
		document.cookie = "wantmembership=1; path=/";
document.cookie = 'wantmembership=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
          jQuery(this).css('background-color','green');
              jQuery(this).text("I Now Have A Membership!");
			});

Open in new window

0
Hi experts,

I have a question regard to sending data with PHP curl POST, GET vs jquery or javascript ajax request with post and get. Are there any differences in using one over the other as in securely passing data between client and server? I see most examples were dealing with ajax request by sending data over to the server with either GET or POST and obtain data in json instead of using curl to perform this task.  Thanks!
0
I have a jQuery DataTable with columns added for filtering. I'm trying to figure out how to get the select drop-downs to update to match the visible rows whenever the table is filtered on some other row.
The DataTable is setup like this:
<table id="TrainingSchedule" style="width:95%" >   
    <thead>   
        <tr class="filterrow">
            <th><select class="filterSelect" id="filter_Day_0"></select></th>               
            <th><input class='filterInput' id="filter_Date_1" /></th> 
            <th><input class='filterInput' id="filter_StartTime_2" /></th> 
            <th><input class='filterInput' id="filter_EndTime_3"  /></th>  
            <th><input class='filterInput' id="filter_Title_4" /></th> 
            <th><select  class="filterSelect" id="filter_Location_5"></select</th>
            <th><input class='filterInput' id="filter_Room_6" /></th> 
            <th><input class='filterInput' id="filter_Course_7"   /></th>  
            <th><input class='filterInput' id="filter_CourseNumber_8"  /></th>  
            <th><input class='filterInput' id="filter_SectionNumber_9"  type="text" /></th>  
            <th><select class="filterSelect" id="filter_Instructor_10"></select></th>
            <th><select class="filterSelect"  id="filter_Type_11"></select></th>
            <th><select class="filterSelect" id="filter_Ignore_12"></select></th>             
            <th><input class='filterInput' id="filter_DateAdded_13"  /></th>  
        </tr>      
    

Open in new window

0
Screen-Shot-2019-03-22-at-15.18.32.png
so the image is my message editor which i am using ckeditor to create templates,

this text is wrapped in paragraph tags ,

the text within the curly brackets refers to a property,

so when you insert this template on a users profile those id within the curly brackets displayed their info so in this image first name and last name,

is their s way i can read these id within the curly brackets ? im using php
0
I am getting
IE11 throwing “SCRIPT1014: invalid character”  for the below line of code

`<div class="comment">
                <div class="${originClass}">
                    <p>${comment}</p>
                    <date><b>${sender}</b> ${date} <fromDB><divstyle= "visibility: hidden; width: 0px;">${fromDB}</div></fromDB></date>
                              
                </div>
            </div>`

looks like the issue is with "`". it works ok on chrome and firefox but IE seems to be having some issues with it.
0
Good Evening Everyone

I am trying to do a registration MODAL to post using php and get back a confirmation result, I have it working in the normal submission method POST using php, which passes the variables and reloads the page to registration.php after submission.

This is the MODAL below :
           <!--Body-->
                    <div class="modal-body">
                        <form method="POST" action="/registration.php">
                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-user prefix" style="color: dodgerblue "></i>
                          <input class="form-control" id="fname" name="fname" type="text" placeholder="&nbsp First Name"><br>
                      </div>

                      <div class="md-form form-sm mb-5">
                        <i class="prefix"></i>
                          <input class="form-control" id="lname" name="lname" type="text"  placeholder="Last Name"><br>
                      </div>

                      <div class="md-form form-sm mb-4">
                        <i class="fas fa-address-book prefix"></i>
                          <input class="form-control" id="address" name="address" type="text"  placeholder="Address"><br>
                      </div>
                        <div class="container">
                        <div class="form-check-inline">
                            <label class="form-check-label">
                                <input type="radio" 

Open in new window

0
Hello,

I have a rating system which uses css and jquey. I have 5 stars, the stars are radio buttons and I used CSS to change them into stars,

I have been asked to modify if so that if someone clicks the 5 star, then the other 4 also change to selected star, or if you click the 3 star, then 2 and 1 also change.

I just want to css display to change, I don't want to change the stars to a selected value for when the form is submitted

I made an initial jquery attempt wth no luck, I am not even sure I am applying the right class
https://fasdinfotsaf.ca/en/fee-for-service/

FYI, the rating is based on 1 per IP, so if you submit it, you wont see stars anymore


My jquery attempt
jQuery('#star5').change(function() {

                  if( ($(this).is(':checked')))  {
						  $("#star4, #star3, #star2, #star1 ").addClass(".star:checked:before");
					}   else   {
						 $("#star4, #star3, #star2, #star1 ").addClass(".star");
					}
	
		 });

Open in new window


My HTML
<input type="radio" name="ratings" value="1" class="star" id="star1"> 
<input type="radio" name="ratings" value="2" class="star" id="star2">
 <input type="radio" name="ratings" value="3" class="star" id="star3">
<input type="radio" name="ratings" value="4" class="star" id="star4">
<input type="radio" name="ratings" value="5" class="star" id="star5">

Open in new window


My CSS
.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
	display:block;
   float:left;
   margin-right:15px;
}
.star:before {
   content: "\2606";
   position: absolute;
   visibility:visible;
   color:#1ac0da;
   
   
}
.star:checked:before {
   content: "\2605";
   position: absolute;
   color:#1ac0da;
}	

Open in new window

1
Dear Experts,
I'm new to Ajax and JQuery,
is it possible to post variables to another domain with below code?

How can I see the result of the below post code on my page? it posts on my site, through on my own domain.

    <script>
	
var xhr = new XMLHttpRequest();
xhr.open("POST", 'the URL', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array()); 
// xhr.send(document);


	</script>

Open in new window

0
Dear Experts,
I'm new to JQuery, I'd like to post some data to a page but I need to add header information.
How can I add this header to below code?

headers: ['Content-Type: application/json','Authorization: Autho xxxxxxx'],

thank you

	<script type="text/javascript">
        $(document).ready(function () {
			
		 $('#ajaxBtn').click(function(){
			 
   		
			$.post('theURLtoPOST',   // url
			    {"ProductId":"1","Id":"54"},

			   function(data, status, jqXHR) {// success callback
						$('p').append('status: ' + status + ', data: ' + data);
				});
			});
    });
    </script>

Open in new window

0
Hi E's,
In a part of my project, I have to check if certain images are loaded, different images, but all with the same class, like you can see in this example:
<!DOCTYPE html>
  <html>
    <head>
<meta charset="UTF-8">
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="materialize/materialize.css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body> 
    <div class="container">
    
    <div class="row center-align">
    <img src="imagem/bw/bw_0200.jpg" alt="visible image">
    </div>
    
    <img class="0" src="imagem/bw/bw_0183.jpg" style="display: none;">
    <img class="0" src="imagem/bw/bw_0272.jpg" style="display: none;">
    <img class="0" src="imagem/bw/bw_0211.jpg" style="display: none;">
    
    </div>
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="materialize/materialize.js"></script>     
    </body>
  </html>

Open in new window

To proceed to another stage of the project, I need to know when the images are fully loaded.
I already searched the Internet for a solution and I did not find it, so I've come to ask for help here.
In jQuery or JavaScript, how can I know if images with class "0" have been fully loaded?

The best regards,
JC
0
Dear experts,

i have an input type file to upload something,

 <input id="formAttach" name="formAttach" class="input-file" type="file">

Open in new window


Is it possible on selecting the file, duplicate it automatically in an other input type hidden with the full path/name of the file and his extension for value in the same form ?
0
Hello,

Here's the background - I have a site that has a few functional areas where the source code is compiled and I don't have access to it. Occasionally, those pages generate some nasty errors, which I would like to clean up. A further catch is that the errors are specific to this program and not IIS/.NET, so there aren't error codes that I can lock in on.

I have been successful at identifying and replacing text using JQuery when the errors pop up - they are less ugly as a result! However, I'd like to use the same methodology to just redirect the page entirely on load.

So, in a nutshell, the process would be:
1. Page starts to load
2. JQuery (or something else  - I'm open) detects the error text
3. Page redirects to a new URL that has more information and is friendly

I know it's not great, but it's better than what I'm working with now. Here's what I'm doing with JQuery now:

jQuery(".ErrorHeader").text($(".ErrorHeader").text().replace("ERROR ERROR ERROR ERROR ERROR BAD INFORMATION", "Sorry, this page can not be loaded. Please hit the back button on your browser or try again."));

Thanks!
0
Hi,

I am working on this page:
https://genealogiskforum.dk/Gf_Magasin_content/
It has four panes at the top of the page, and this question is only about pane three and four.

If you go into pane three you see this navigation section at the top of the page.
Sk-rmbillede-2019-03-12-07.42.42.pngIt is in danish, but the translation is like this: Forrige = Previous, Næste = Next, Side = Page (the box shows the actual page number), af xx sider = of xx pages.

When using the Next and Previous buttons the pagenumber in the box changes nicely in both pane three and pane four. The problem is that when entering a pagenumber in the box in pane three and hit Enter nothing happens, and when doing the same in pane four it goes to the page you have entered as expected.

I get no messages in the console, ant no other other errors - just nothing happens.

The code lines in question is for pane three these:
HTML:
<div class="flex-item"><input type="text" style="width: 45px; text-align:center; color: #f6f6f6; background-color:#808080; border: 1px solid #f6f6f6;margin-left:18px" id="my-page-input" value="1"></div>

Open in new window


Script:
var input5 = document.getElementById('my-page-input');

    input5.addEventListener('keypress', function(event) {
        if (event.which === 13) { // Return key
            viewer.goToPage(parseInt(input5.value, 10)-1);
        }
    });

    viewer.addHandler("page", function (data) {
        input5.value = ( data.page + 1 );
    });

Open in new window


And the codelines for pane four are these:
HTML:
<div class="flex-item"><input type="text" style="width: 45px; text-align:center; color: #f6f6f6; background-color:#808080; border: 1px solid #f6f6f6;margin-left:18px"; id="my-page-input2" value="1"></div>

Open in new window


Script:
var input2 = document.getElementById('my-page-input2');

    input2.addEventListener('keypress', function(event) {
        if (event.which === 13) { // Return key
            viewer.goToPage(parseInt(input2.value, 10)-1);
        }
    });

    viewer.addHandler("page", function (data) {
        input2.value = ( data.page + 1 );
    });

Open in new window


I just can't figure out where I am going wrong here, and I hope that someone can help me out with this.
0
Experts,
 We have added javascript scripts to aspx page for check current user sid is  in Active Directory group or not. we calling web service to to check it. That code is working nice on google chrome and Edge but not working in IE. Looks like JSON in unidentified error i believe.

 When open with development tool and debug then sometime it's working. Can you please help me to identify the root cause? Also how can i add some code which can throw the error popup?

<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript" ></script>

<script type="text/javascript">




var userid= _spPageContextInfo.userId;
if(userid != undefined)
{
  var sys_sid = _spPageContextInfo.systemUserKey;
    var input_sid = sys_sid.split('|');
    var Outputsid = input_sid[1] || '';
   // alert(Outputsid);
    var setData={
    migratedSecurityGroup: "Sharepoint_Migrated",
    samSID:Outputsid
};

     $.ajax({
        type: "POST",
        url: _spPageContextInfo.webAbsoluteUrl+"/_layouts/15/SG_Test_AppPage/SG_Test_AppPage.aspx/IsMemberOf",
       data: JSON.stringify(setData),
        async: false,
        contentType: 'application/json; charset=utf-8',
success: function(data) {
            //debugger;
            if(data.d.length>0){
            console.log(data.d)
         //   alert(data.d);
             if(data.d == 

Open in new window

1
Hello,

I am using a front end form
http://oalaca.nextmp.net/post-a-job-listing/

<?php acf_form(array(
‘post_id’      => ‘new_post’,
‘new_post’      => array(
‘post_type’      => ‘job_listings’,
‘post_status’      => ‘draft’
),
‘submit_value’      => ‘Post a new Job Listing’
)); ?>

It has 3 date pickers, these 3 all work in the dashboard Add Post form, but they are broken in my public add post form

I do not get any jquery errors in my console

In the Dashboard Add form, all the 3 fields date fields pop up with a calendar date picker
0
 $('#email-attachment-form').submit(function (e) {
        e.preventDefault();
    
         alert("test");
    });

Open in new window


Just testing if submit is triggering.

how the form is created

   $html .=                        '<form id="email-attachment-form" name="email-attachment-form" class="email-act-form-validation"';
            $html .=                              'style="padding:20px 10%;border-top:1px solid #ccc;"';
            $html .=                              'enctype="multipart/form-data" novalidate>';
            $html .=                           '<div class="input-group cf mb-1">';
            $html .=                               '<input type="text" class="form-control" name="attachment-title"';
            $html .=                                       'id="attachment-title" placeholder="Title" required="">';
            $html .=                               '<div class="invalid-feedback">';
            $html .=                                   'Please provide file title.';
            $html .=                               '</div>';
            $html .=                          '</div>';
            $html .=                           '<div class="input-group cf">';
            $html .=                                '<div class="custom-file mb-5">';
            $html .=                                   '<label class="custom-file-label" for="attachment-file">Choose file...</label>';
            $html .=                                 

Open in new window

0
I am attempting to update a D3 chart as well as data associated with that chart. Currently, when clicking an item in the dropdown, I get the updated chart (once, which is correct) and data/text to the right at least twice and the previous set of data/text are not going away. I have added empty arrays to try and stop this from happening but nothing is working yet. Here is a Codepen: https://codepen.io/dtepdc/pen/PLKGoq

How can I update the data associated with the dropdown number (only once) while removing the previous data at the same time? Thank you!

(You need to click on one of the dropdown items under "View by Incident" to see data. Loading the data as the page loads is in progress but this issue is more important right now)

Here is some of the code:

Data and code loading before the functions:
let dataset = [
    {
        "scene": "IR0006426320",
        "scene_start_time": "2018-02-05T15:03:30",
        "chips": [
            {
                "chip": "2018.02.05.150",
                "start_date": "2018-02-05T00:05:07",
                "end_date": "2018-02-05T01:26:23",
                "co_num":[""],
                "cause": false
            },
            {
                "chip": "2018.02.05.192",
                "start_date": "2018-02-05T15:48:08",
                "end_date": "2018-02-05T17:22:34",
                "co_num": [
                    "C03619354",
                    "C03618763",
                    "C03619064",
                    

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