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

Hi EE.
Ref Fiddle here
I've been trolling the net for a while but can't find a solution that will allow me to make the owl items within my owl carousel circular without stipulating a pre set item width.
Essentially I need to make whatever the width of the item is also its height.
CSS or JS solutions very welcome..
N
0
I had this question after viewing Change id once clicked.

if the user has selected sizes and then wants to remove them, instead of having to deselect each item, I want them all to deselect if the user clicks on "remove sizes"

I tried this but it doesn't deselect everything and there is no error in console:

$(".size option:selected").prop("selected", false);

Open in new window


$("#add_size").on("click", function(e) {
    e.preventDefault();


    if ($("#size").is(":visible")) {
        $(".size option:selected").prop("selected", false);
        $("#size").fadeOut();
        $(this).html("Add Sizes");

    } else {
        $("#size").fadeIn();
        $(this).html("Remove size");
    }
});

Open in new window



<div class="form-group" id="size">
   <select multiple data-title="Select sizes" multiple name="size[]" class="selectpicker size" data-style="btn-block">
      <option value="xs">x-small</option>
      <option value="s">small</option>
      <option value="m">Medium</option>
      <option value="l">large</option>
      <option value="xl">x-larg</option>
      <option value="2xl">xx-large</option>
   </select>
</div>

Open in new window

0
I have a smart table (followed this example)  http://www.marcorpsa.com/ee/t2444.html

and added paging using this example https://www.js-tutorials.com/javascript-tutorial/angularjs-smart-table-example-demos/

Now, I have 20,000 rows and my paging is 150 pages. But, I bring back the entire 20,000 rows upfont...when the page loads, then page.  Page is very slow. I'm wondering if I shouldn't bring back the 20,000 rows all at once.

I'm using a stored proc and the stored proc itself takes about a couple of seconds. It's when I bind the data to the smart table that takes a few mins.
0
Hi experts I am using a jquery input field to capture date, then display that date on the next page. This much IS working. The second page auto-increments the date, which is where I am having an issue. When I pass the value of 8/7/17 to the variable, the increment works fine, but passing any  other date the date converts back to 1970.. Any solution? Below is the code I am using  to call the date into the auto increment and then echo into text areas.

$today = getdate(strtotime($_POST['PREVDATE']));

$thisday = $today['mday'];
$thismonth = $today['mon'];
$thisyear = $today['year'];
$thisdayofweek = $today['wday'];
$thismonthdesc = $today['month'];
$thisyear = $today['year'];

switch($thismonthdesc) {
case "January": $lastdayofmonth = 31; break;
case "February": $lastdayofmonth = 28; break;
case "March": $lastdayofmonth = 31; break;
case "April": $lastdayofmonth = 30; break;
case "May": $lastdayofmonth = 31; break;
case "June": $lastdayofmonth = 30; break;
case "July": $lastdayofmonth = 31; break;
case "August": $lastdayofmonth = 31; break;
case "September": $lastdayofmonth = 30; break;
case "October": $lastdayofmonth = 31; break;
case "November": $lastdayofmonth = 30; break;
case "December": $lastdayofmonth = 31; break;                
}

echo "<table>";
echo "<tr>";
$numday=$thisday;
$endofweek = $thisdayofweek;
$dayid = $thisday;
$thisdate = new DateTime(date('d/m/Y',strtotime($_POST['PREVDATE'])));
                                                                    

Open in new window

0
i want to change the text field color when validation fail. i understand this can be achieve using query but i want the validation errors to be post by php because i want to validate a lot of things going to my database. for example, i want to check whether email address already exits in the database and trow an error, while at the same time using the power of jquery and css to style the text field when the error occur.

thanks in advance for your help.
0
Dear Experts,

How can I insert html file ( navigation menu ) into my html page?

I tried this example but it didn't work...

https://www.w3schools.com/howto/howto_html_include.asp

Open in new window

0
Hi We recently installed dynamics crm 2016 on premise and now want to have address field in lead entity has address, city, state, and zip auto complete feature. Let me know if you can show us how to do it.
0
Hello all,
Im playing around with creating sortable drag and drop lists in Jquery. However, when I try to nest the lists inside another draggable list, while it seems to work, the formatting for the parent list doesnt cover its entire contents.... any ideas why this is happening?

http://www.dnx.org/list.html
0
I have an application which allows users to drag & drop files to a zone which is working well.  The problem is I want the form data to be sent to a WEB API 2 controller and I can't work out how to do this.

.NET:
        public void Upload(HttpPostedFileBase file)
        {
//Just a point to debug
            var test = "test";
        }

Open in new window


JS:
function UploadFiles() {
    var formData = new FormData();
    formData.append("file", viewModel.FilesToUpload()[0], 'test.jpg');
    
    $.post("/api/ApiDocument/Upload", formData)
                    .done(function (data) {
                        alert('done');
                    })
                    .fail(function (e) {
                        alert('fail');
                    });
}

Open in new window


Form:
upload.png
0
Hi,

I have following HTML. I would like to select the span element that has a class = metadata but only from the tr element with an id = Management_x0020_Approvals_x0020~Show and replace / format the text inside this span element with my own content. Please help.





<tr id="Trade_x0020_Compliance_x0020_Req~Show" unselectable="off">
    <td class="ms-formlabel" nowrap="true" valign="top" style="width: 408px; white-space: nowrap;">
        <h3 class="ms-standardheader" id="Trade_x0020_Compliance_x0020_Req">
            <nobr>c. Trade Compliance Required?</nobr>
        </h3>
    </td>
    <td class="ms-formbody" valign="top">
        <!-- FieldName="c. Trade Compliance Required?"
             FieldInternalName="Trade_x0020_Compliance_x0020_Req"
             FieldType="SPFieldChoice"
          -->
        <span dir="none"><select title="c. Trade Compliance Required?" class="ms-RadioText" id="Trade_x0020_Compliance_x0020_Req_819baa9d-0cf4-4d77-bf9c-dd91fec60395_$DropDownChoice"><option selected="selected" value="Yes">Yes</option><option value="No">No</option><option value="N/A">N/A</option></select><br></span>

        <span class="ms-metadata">[Contoso is required to notify the U.S. Bureau of Industry and Security (BIS) that Contoso has made available to the public an encryption source code which can be found at a specific web link. Accordingly the Software Release Manager must provide the specific web link (where the encryption source code will be made 

Open in new window

0
I have an 'add sizes' link and when I click on it, a list appears and the text changes to 'remove sizes'. At the same time, I want the id to change so that if I click on 'remove sizes', the list will disappear. I don't think the id is actually changing because when I click on "remove sizes" the console does not show the message as per my console.log() line.

$( "#add_size" ).on("click", function(e) {
		 e.preventDefault();
		 $( "#size" ).fadeIn();
		 $( "#add_size" ).html("Remove size");
		 $( "#add_size" ).prop("id", "remove_size");
			
	 });

	 $( "#remove_size" ).on("click", function(e) {
			e.preventDefault();
			console.log("fade out list of sizes");
	});

Open in new window

0
I have two links, one that says add colour and the other that says add size.

If I click on 'add colour' for example, then using jQuery, a hidden multi select menu appears and the user can choose colours. I then post these via ajax and perform server side validation. The issue I have is that if the user doesn't want to add any colours and they never click the 'add colour' link, the validation shouldn't fire as they don't have to select any colours. The validation should only occur if the colour multi select is visible.

<div class="form-group" id="colour">
	<select multiple data-title="Select colour" name="colour[]" class="selectpicker colour" data-style="btn-block">
		<option value="Red">Red</option>
		<option value="Green">Green</option>
		<option value="Blue">Blue</option>
		<option value="Orange">Orange</option>
		<option value="Black">Black</option>
		<option value="White">White</option>
	</select>
</div>

Open in new window



$.ajax({
			 url: 'functions/add-product.php',
			 type: 'POST',
			 dataType: 'json',
			 data: {product_name: product_name, price: price, description: description, form_token: form_token, colour: colour, size: size},
			 beforeSend: function() {
			 	$( "#add_product" ).prop("disabled", true).html("Submitting...");
		 	},
		 })

Open in new window


if(empty($_POST['colour'])) {
		
		$message .= "Select a colour <br />";
	}

Open in new window

0
Hi,

I'm having an problem with displaying the placeholder in my input textbox.
the problem is that I have to click on the textbox in order for me to see the text of the placeholder message.
instead what I want it to do is to show the placeholder text upon creating the textbox.

the problem is with this code:
placeholder="if Px = "
placeholder="32851,32568 "
it create the placeholder text but I have to click on the textbox to see it instead of have it show up when the text has been created.


this is what I have so far:

 <script language="javascript" type="text/javascript">

var counter = 0;
function AddConditionValue()
{
	
  var div = document.createElement('DIV');

  div.innerHTML = '<input placeholder="if Px = " style="width:310px;color:#555555;font-size:12px;" id="Conditiontxt' + counter + '" name = "Conditiontxt' + counter + 
    '" type="input" />' +

	'<input placeholder="32851,32568 " style="width:310px;color:#555555;font-size:12px;" id="Valuetxt' + counter + '" name = "Valuetxt' + counter + 
    '" type="input" />' +
	
    '<button style="width:105px;border: 0; background: transparent;cursor:pointer;" id="BtnConditionValue' + counter + '" type="button" ' + 
    'value="Remove" onclick = "RemoveTxt(this)" >' +
	
	'<img src="../images/DeleteTrashCan_Icon.jpg" alt="Previous" style="width:20px;" />' + 
	'</button>';

  document.getElementById("ConditionValueContainer").appendChild(div);

  counter++;
  
  $('#TextCount').val(counter);
  
} 

Open in new window

0
I am very new to JQuery. I need to remove a particular class from a div that has the class vc_active. However, these div tags have multiple classes. For instance:

<div class="vc_tta-panel vc_active"></div>

Open in new window


When a user clicks on a tab that has the class set to vc_active I want to remove that class. This is what I have so far (also this is in WordPress). I've also tried with shorthand notation using the $ as well as using just jQuery.

jQuery("div.vc_active").on("click", function(){
jQuery("vc_active").removeClass("vc_active")});

Open in new window

0
Fiddle ref here

The Fiddle ref shows the dynamic adding of tabs with auto numbering on the cloned panel titles and the panel input id's. Works great.
The numbering however goes out of whack in this scenario.
- Add new panels to the total of 4.
- Now remove number 2 panel.

Although the panel totals show correctly the number sequence is out of whack.
We need to update the cloned panels number sequence after a panel is removed.
Cheers,
N
0
Fiddle ref here

The above Fiddle shows dynamically created tabs created using a clone method.
When each new tab is created I have the Freight item number title auto increment so as to show Freight item 1, 2 , 3 etc in each new panel title.
Each panel also has its own unique id based on the above numbering system.
What I also need is add to each of the new panels input fields with the corresponding panels id.
For example in panel 3 the input field "entry_line" would become "entry_line_3", "declared_value" would become "declared_value_3" and so on.
Assistance appreciated.
N
0
This code only shows one value from the multi select. How can I get it to show all the selected values?

 var colour = $( ".colour option:selected" ).val();

Open in new window


I also want to be able to take the result and run a foreach loop in php as I will be submitting the values via ajax  and the data will be in json format.
0
on my form i have two buttons ( confirm and print buttons) i set the print button to hide and want to display it when the confirm button is click while at the same updating my table to say that this record have been confirm. now, what is happening when i click the confirm button, the table is updated but the print button show up for a second and then set back to hidden. i want the print button to show up permanently.  thanks for your help!!!
0
I'm using REST API to bring items back from my SharePoint list and then building a table with that link as I loop though each item. In the last column of the table, the item is a link that is supposed to pop open a modal window when clicked. The problem that I am having is that when the link is clicked, nothing happens.  

Here's the code:

var deptArray = ["Human Resources", "Accounting and Finance", "IT", "Marketing", "Purchasing Department"];
var state = ["stateBefore", "stateAfter", "Delta", "Mod"];

for(var x=0; x<deptArray.length; x++) {
	var html = "<tr>";
		html +="<td>"+deptArray[x]+"</td>";
		for(var y=0; y<state.length; y++) {			
			if (state[y] === "stateBefore")
			{
      //alert(state[0]);
				html += "<td><input type='text' class='.nrm-text' id='"+deptArray[x]+state[0]+"'></td>";
			}else if (state[y] === "stateAfter") {
      //alert(state[1]);
				html += "<td><input type='text' class='.nrm-text' id='"+deptArray[x]+state[1]+"'></td>";			
			}else if (state[y] === "Delta") {
      //alert(state[2]);
				html += "<td><input type='text' id='"+deptArray[x]+state[2]+"'></td>";			
			}else if (state[y] === "Mod"){
      	html += "<td><a href='http://test.html'  onclick='javascript:openInDialog("+y+")'>Edit</a></td>";
      }			
		}
      html += "</tr>";
      //document.getElementById("#deptState").appendChild(html);
      $("#deptState").append(html); 
  }
  
  function openInDialog(id){
  alert("modal will open using id "+id);
  }
  var allTextBoxes =

Open in new window

0
I have a functions.js file with a function in it:

function list_cat() {

    $.ajax({

            url: 'functions/list-categories.php',
            type: 'POST',
            dataType: 'json'
        })
        .done(function(data) {
            $.each(data, function(item) {
                var cat_options = "<option value='" + data[item].id + "'>" + data[item].cat_name + "</option>";
                $("#n_category").append(cat_options);
            });
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ': ' + errorThrown);
            console.warn(jqXHR.responseText);
        });
}

Open in new window


I am trying to call it like this:

<script type="text/javascript">
	list_cat();
</script>

Open in new window


When I try to just call this function on another page I get the error:

 Uncaught ReferenceError: list_cat is not defined
0
I have two buttons on my page. One to open a dialog to add new contacts. The second button opens a different dialog to edit contacts.
I can open and close the "Add Contacts" dialog no problem but when I click on the "Edit Contact" button the edit dialogue content is no longer displayed under tabs correctly.

If I refresh the page, I can open and close the "Edit Contact" dialog repeated times not problem but when I open the "Add Contacts" dialog the tabs in the add contact dialog this time no longer display correctly.   - So the problem works either way.

The add dialog code is:

$("#addagencyref-window").dialog(
                        {
                        autoOpen: false,
                        maxWidth:850,
                        maxHeight: 700,
                        width: 850,
                        height: 700,
                        draggable: true,
                        modal: true,
                        buttons: {
                          "Save": function () 
                          { 
                          $.post("./add_agencyreferral_process.php", $("#addagencyrefForm").serialize(), function(response)
                            {
                            if(!response)
                            {
                            location.reload(true);
                            $(this).dialog("close");
                            }
                            $("p#errors6").html(response);            
                            

Open in new window

0
I'm using Bootstrap Select2 (GitHub Link)   When a user searches within the select and there are no results, a message is shown that says "No results found." I'm wanting to add a hyperlink after that text so that it reads "No results found, click here" ("here" will be a hyperlink). I found the function in the select2.js file but have no idea how to edit it so that I can add the hyperlink. Does anyone know how to do that?

Here's the code snippet which is found on line 4517 on the select2.js file
noResults: function () {
      return 'No results found';
    },

Open in new window

0
I sent some url parameters using the below code...

jQuery.param(myParams)
history.replaceState(null, null, "?" + myParams);

Open in new window


then I have retrieved the parameters. See array below...

array(3) { [0]=> string(16) "Back+Projections" [1]=> string(19) "Fire+Rated+Graphics" [2]=> string(22) "Curtains+%2B+Backdrops" }

Open in new window


How do I convert the "+" back into spaces within the array. There was also a "+" in the actual text that got encoded to "%2B". I want to return this to a "+". Can you please help?
0
Hi there!

I have created a "Live modal" as explained in the following link:

http://getbootstrap.com/javascript/#modals

I do not have only one button, though. There are many, everyone with exactly the structure below:
<button class="btn btn-deluge btn-sm" data-toggle="modal" data-target="#myModal" type="submit" name="hiddHorarioID" id="hiddHorario31"  value="315_<%= ThisDay(3)%>">Qua, 7h30min</button>

Open in new window


where the id and value properties have, of course, different values in each button.

Question: how should I change the "modal receptacle" (below), so that the text in bold comes correctly from the button chosen?

-----------------------
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
[b]        You have chosen the following "value button":   315_<%= ThisDay(3)%>[/b]
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

-----------------------

Of course what I need is not EXACTLY that, but if you tell me how to solve this, my problem is solved.

Explaining a bit better, I hope: I have many buttons, just one "modal receptacle". I need the "modal receptacle" to know from which of the buttons it was called, so that I can use the "value" property of THAT button to put messages inside the "modal receptacle" body...

Thanks!
fskilnik.
0
Screen-Shot-2017-07-28-at-11.12.58-A.pngI'm building a review form and I'm trying to display specific text next to the radio option, depending on what the user selects (see example above). I have the working star radio buttons in place but I'm unable to display the "title" of the label of what the user chooses. I've looked around and I do see examples where you can display the "input  value", but that's not what I need. I need to keep the input's value as is but want to display the title of the label. Can someone else me achieve this? Below is the code I'm using. The stars are from fontawesome and it's all CSS/HTML based.

<div class="stars">
	<input class="star star-5" id="star5_1" type="radio" name="rating_1" value="5" />
	<label class="star star-5" for="star5_1" title="Awesome - 5 stars"></label>
	
   <input class="star star-4" id="star4_1" type="radio" name="rating_1" value="4" />
	<label class="star star-4" for="star4_1" title="Pretty Good - 4 stars"></label>
	
   <input class="star star-3" id="star3_1" type="radio" name="rating_1" value="3" />
	<label class="star star-3" for="star3_1" title="Average - 3 stars"></label>
	
   <input class="star star-2" id="star2_1" type="radio" name="rating_1" value="2" />
	<label class="star star-2" for="star2_1" title="Decent - 2 stars"></label>
	
   <input class="star star-1" id="star1_1" type="radio" name="rating_1" value="1" />
	<label class="star star-1" for="star1_1" title="Poor - 1 star"></label>
</div>

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