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 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
I have been looking hi and low to auto populate user name and department in InfoPath browser form from several sources available
I tried User Profile Service but since Microsoft made it difficult in 2013 version and I am not an admin on the host I can't use this.
 I also tried User Information list. It worked perfectly in InfoPath preview but came up empty when I published the form.

So I tried to use JQuery and SP services. I captured all info in alarms correctly but cant figure out how actually place it in form controls. I use text boxes for all.
<script src="/sites/MySite/SiteCollectionDocuments/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script><script src="/sites/MySite/SiteCollectionDocuments/jQuery/jquery.SPServices-2014.01.min.js" type="text/javascript">
</script><script type="text/javascript">

$(function() {        
     var thisUsersValues = $().SPServices.SPGetCurrentUser({
      fieldNames: ["Title", "EMail", "Office", "WorkPhone"],
      debug: false
});
alert(thisUsersValues.EMail);


alert(thisUsersValues.Title);
alert(thisUsersValues.Office);

alert(thisUsersValues.WorkPhone);

$('textarea[title="WorkPhone"]').thisUsersValues.WorkPhone;
$('input[title="WorkPhone"]').thisUsersValues.WorkPhone;
});
</script>
0
I am replacing my URL parameters using the below code...

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

Open in new window


then I am trying to get the results using this code...

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

var tech = GetURLParameter('technology');

Open in new window


Example showed on this page: http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

The above is fine for fields that have just one value, but some of my field have more than one value. For example...

http://dummy.com/?technology=jquery&technology=php&blog=jquerybyexample

var tech = GetURLParameter('technology');

Only gets the first value. How would get all values that are associated to 'technology'?
0
I am trying to validate 3 forms within bootstrap modal

If I am validation 1 form everything is fine when I add the validation for second for I am getting an error message

jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at fa (jquery.min.js:2)
    at Function.fa.matches (jquery.min.js:2)
    at Function.n.filter (jquery.min.js:2)
    at z (jquery.min.js:2)
    at n.fn.init.is (jquery.min.js:2)
    at b._getMessageContainer (bootstrapValidator.min.js:11)
    at b._getMessageContainer (bootstrapValidator.min.js:11)
    at b._getMessageContainer (bootstrapValidator.min.js:11)
    at b._getMessageContainer (bootstrapValidator.min.js:11)


Open in new window


<div id="myModal" class="modal fade" role="dialog">
			<div class="modal-dialog" role="document">
			    <!-- Modal content-->
			    <div class="modal-content">
			    	<div class="modal-header">
			        	<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h2 class="modal-title">Account Login</h2>
			    	</div>
				<div id="div-forms">
					<form data-toggle="validator" role="form" id="login-form"  method="POST">
					<div class="modal-body">

			        	<h3>Welcome to I Drive Smart. Please log-in to access your account.</h3>
			        	<div class="alert alert-danger" role="alert" style="display: none;">
  							Your user name OR password does not match our record. Please re-enter user name and password.
						</div>

	

Open in new window

0
I am having problems setting up a jQuery autocomplete textbox in a GridView EditItemTemplate.  I have it working in a DetailsView control, but am struggling with the GridView.  I am guessing below is what is causing the issue, but I get no errors in Google Dev Console...

$("#GridView1_Country")
                    .autocomplete({


<script type="text/javascript">
        $(document)
            .ready(function () {
                $("#GridView1_Country")
                    .autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                url: "../autocomplete.aspx/getCountries",
                                data: "{'prefixText':'" + $("#GridView1_Country").val() + "'}",
                                dataType: "json",
                                success: function (data) {
                                    response(data.d);
                                },
                                error: function (result) {
                                    alert("Error");
                                }
                            });
                        },
                        select: function (e, i) {
                            $("#GridView1_Country").val(i.item.val);
                        },
                        change: function (e, ui)

Open in new window

0
Hi,

I have this code to append td to my table and this is working fine

var $tr = $('<tr>').append(
															
	$('<td>').html(resultStateList.list_state_name),
	$('<td>').html(resultStateList.list_state_active),

).appendTo('#countries-list tbody');

Open in new window


What I need to do is to display different span in the active <td> depending if list_state_active is Y or N.

Something like this but I cannot make it work with the append code...

      
if ( resultStateList.list_state_active === 'Y'){
	   $('<td>').html('<span class="badge bg-green">' + '<?php echo ASLang::get('yes'); ?>' + '</span>' )
	} else if (resultStateList.list_state_active  === 'N') {
	  $('<td>').html('<span class="badge bg-red">' + '<?php echo ASLang::get('no'); ?>' + '</span>' )
	} else  {
	$('<td>').html(resultStateList.list_state_active),
       }

Open in new window


Thanks
0
What are some good websites to help keep me current with the latest and greatest for C#.NET Full Stack development?
0
I am starting a bit of a re-training session to get back into the work force after a few weeks out. The problem is my last job did a lot of legacy debugging on MVC and ASP.NET web pages, SQL Query db work SSRS updates.

Nothing too exciting and nothing too strength building for my next job.

I have done C#.NET Full Stack in various jobs before that but not made the jump to Angular, let alone Angular 2.

What are some good technologies today I should consider learning and what technologies are good to brush up on?

How about C#.Core? I do  not see too many EE mebers in that group...

What JS frameworks are the best to know?

I can devote lots of time to study, and would consider digging deep.

Thanks
0
Hello,
Im just trying to get to grips with using Modals and Bootstrap, can anyone look at :

http://dnx.org/eno/

And tell me why the button launches a modal, but the content is not replace with ajax content (from content.html )?


Thanks,
0
See my JQuery code below. Can you please advise the best way to reduce the amount of duplicate code. You will notice variables are duplicated, but when I move them out of the event functions the process no longer works. I have also adding them in a $.getScript(); function, but this causes a problem too. Any advice appreciated.

function loadtooltip() {
	$('[data-toggle="tooltip"]').tooltip();
}

function getmediafilter(elem) {
	
		if (elem.length > 0) {
			return elem.data("media-filter-value");
		}
	
}

$(document).ready(function() {
		
		$('#ListResults').html('<div class="FirstLoad"><img src="/materials/guide2/images/ajax-loader.gif" width="31" height="31" alt="Loading..."/></div>');
	
		var hash = window.location.hash;
	
		if (hash.substring(0, 6).toLowerCase() == "#page=" && hash.length > 6) {

			var page_hash_num = hash.substring(6);
	
		}
				
	    $.ajax({
          url: 'media_script.php',
		  data: { 
			  page: page_hash_num
		  },
          dataType: 'html',
          type: 'POST',
		  success: function(data) {   
				
        		$( "#ListResults" ).html( data );
			  	
			  	loadtooltip();
				$.getScript("js/media_filter_sorts.js");
				$('.selectpicker').selectpicker();
																	
    		}
			
		 });
	
	
		// Start of page number change
		$('#ListResults').on('click','.pagination a', function(event) {
				event.preventDefault();
			
				var page_num = $(this).attr('rel');
				var items_per_page = $( "#ListResults #items-per-page" ).val();
			
				

Open in new window

0
Greetings again,

I have this RadioButtonList control with a Yes or option in Repeater control.

                 Purchased:<asp:radiobuttonlist ID="rblType" runat="server" RepeatDirection="Horizontal" TextAlign="Right" style="display:inline;">
                 <asp:ListItem Text="New" />
                 <asp:ListItem Text="Used" />
                </asp:RadioButtonList>

Open in new window


All I am trying to do is to ensure that user chooses either Yes or No before continuing.

I have done a lot RadioButtonList validations but have not found anything that works with Repeater control.

Any ideas experts?
0
Hi all,

Hoping you can help me.  I would like to show a toolset on hover when hovering over any element with a certain class.
Do i need to embed the code every time, in each element, or can I just show it on hover. So perhaps have the toolset as a javascript snippet.

For e.g. the toolset could be:
<div>
  <ul>
    <li><a href="#">DRAG</a></li>
    <li><a href="#">DELETE</a></li>
  </ul>
</div

Open in new window

Of course it would be formatted with CSS.

And it would appear on top of any <div> element with the class 'tools'
<div class="tools">
  content
</div>

Open in new window


On hover of this div, the toolset would appear on top. There would be a range of div's with the same class on the page.
So the tools would allow editing of that div - in this above instance I could drag it around or delete the div area with jQuery.

Thanks
Paul
0
Hi all,
I have a small bit of jquery code that when clicked adds a text field, how can I have the field thats been added removed when a user clicks on the X?

You can see what I have so far at:

http://www.dnx.org/tope/1.html
0
I have a working Jquery modal dialog which includes a form to collect a contacts address. At the top of the form is a drop down list which returns pre-defined addresses and a 'Use Address' button (id="signal).  The user can choose a pre-defined address if they wish and click the 'Use Address' button which takes the address values and pre-populates the form, thereby, saving the user from having to type in the address manually.

The html for modal form is
<div id="addcontact-window" title="Add Agency Contact">
    <div align="center">
    <p id="errors6"></p>
    </div>
    <form id="addcontactForm" name="addcontactForm" action="" method="post">
    <div id="addcontactFormBody"></div> 
    </form>
    </div>

Open in new window


The jquery code which declares/defines the dialog is:

$("#addcontact-window").dialog(
                        {
                        autoOpen: false,
                        maxWidth:850,
                        maxHeight: 700,
                        width: 850,
                        height: 700,
                        draggable: true,
                        modal: true,
                        buttons: {
                          "Save": function () 
                          { 
                          $.post("./add_agencycontact_process.php", $("#addcontactForm").serialize(), function(response)
                            {
                            if(!response)
                            {
                            

Open in new window

0
I have a few dynamically created checkbox lists. I am using the below code to move the selected checkboxes to the top of the list.

function movefilters(elem) {
	/* Start of move checked items to the top */
	$(".media-search-list input:checkbox:checked").parent().each(function(){
		$(this).prependTo($(this).parent());
		$(this).animate({ scrollTop: 0 }, "fast");
	});
	/* End of move checked items to the top */
}

Open in new window


I would also like to sort the selected checkboxes alphabetically. Can you please advise how I would adapt the above code to do this?

Below is some of my html code for reference.

<ul class="media-search-list">
  <li data-search-term="architectural design">
    <input data-media-filter-value="Architectural design" id="architectural_design" type="checkbox">
    <label for="architectural_design"> <span class="label-title">Architectural design</span> <span class="label-title-quality">(25)</span> </label>
  </li>
  <li data-search-term="backlits">
    <input data-media-filter-value="Backlits" id="backlits" type="checkbox">
    <label for="backlits"> <span class="label-title">Backlits</span> <span class="label-title-quality">(15)</span> </label>
  </li>
  <li data-search-term="wall decor">
    <input data-media-filter-value="Wall decor" id="wall_decor" type="checkbox">
    <label for="wall_decor"> <span class="label-title">Wall decor</span> <span class="label-title-quality">(23)</span> </label>
  </li>
</ul>

Open in new window

0
On this page:
http://groupplanner.gallitin.com/flight/create?depart=07%2F20%2F2017&return=08%2F05%2F2017&tripID=22&tripName=ABC#

I have the button "Add Flight" and it clones the input you see there, the issue is that the name of the fields are:

com0[]airline[]
com0[]flightNumber[]
com0[]departing[]
com0[]seatNumber[]

Open in new window


When cloning I need the com0 to increase to com1, if cloned again then com2 etc...
0
I am using ajax to output filtered list results on a page. Is it possible to go back to the previous filtered results? Please note I am not wanting to go back to the previous url using history.back()

What would be the best way to do this? Would I need to use URL parameters?
0
Before the Gridview at the bottom I need a button to add a new record but I can not figure out the html to make it work.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Admin.aspx.cs" Inherits="Test.Admin" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" lang="javascript">
        $(document).ready(function () {

            //Initialize the Account Termination Date datepicker
            $('#divDatePicker').datetimepicker({
                format: 'MM/DD/YYYY',
                useCurrent: false,
                minDate: new Date(),
                maxDate: new Date().setYear(new Date().getFullYear() + 1)
            });
           
            //Initialize the BootGrid
            $(function () {
                $('#<%= grdAdmin.ClientID %>').bootgrid({
                    caseSensitive: false,
                    formatters: {
                        "commands": function(column, row)
                        {
                            var buttonText;



                            buttonText = "<button type=\"button\" class=\"btn btn-xs btn-default command-add\" data-row-id=\"" + row.ID + "\"><span class=\"fa fa-camera\"></span></button>" +
                                "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.ID + "\"><span class=\"fa fa-pencil\"></span></button> " +
     …
0
See my original code which worked correctly as required...

$(document).ready(function() {
	
		// Start of checkbox change
		$('#ListResults').on('change','input[type="checkbox"]', function() {
			
				$('.loadingDiv').show();
				var page_num = $('.pagination .active a').attr('rel');
				
				if ($(".media-filter-brand input:checkbox:checked").length > 0) {
						var media_filter_brand_value = $(".media-filter-brand input:checkbox:checked").data("media-filter-value");
				}
			
				$.ajax({
				  url: 'media_script.php',
				  data: { 
					  page: page_num,
					  brand: media_filter_brand_value
					  filterchange: "true"
				  },
				  dataType: 'html',
				  type: 'POST',
				  success: function(data) {   

						$( "#ListResults" ).html( data );
					  	$('.loadingDiv').hide();
					  	
					  	
					  
					}

				 });
			
		});
		// End of checkbox change

});

Open in new window


You will notice an if statement. I want to reuse this if statement elsewhere so instead of duplicating code I tried putting it in a function like below...

function getmediafilter() {
	
				if ($(".media-filter-brand input:checkbox:checked").length > 0) {
						var media_filter_brand_value = $(".media-filter-brand input:checkbox:checked").data("media-filter-value");
				}
	
}

$(document).ready(function() {
	
		// Start of checkbox change
		$('#ListResults').on('change','input[type="checkbox"]', function() {
			
				$('.loadingDiv').show();
				var page_num = $('.pagination .active a').attr('rel');
				
				getmediafilter();
			
				$.ajax({
				  url: 'media_script.php',
				  data: { 
					  page: page_num,
					  brand: media_filter_brand_value
					  filterchange: "true"
				  },
				  dataType: 'html',
				  type: 'POST',
				  success: function(data) {   

						$( "#ListResults" ).html( data );
					  	$('.loadingDiv').hide();
					  	
					  	
					  
					}

				 });
			
		});
		// End of checkbox change

});

Open in new window


However in doing this the code no longer works. I am no longer getting a result for the variable "media_filter_brand_value". What am I doing wrong?
0
I have a REST call using jQuery Ajax and it works fine on every browser except for IE11.  When I make this POST call,  I get back a 400 error and the data doesn't get written.

Any advise on this would be greatly appreciated.
0
I have the cloning, piece working fine, but just realized when I click "Add Flight" to clone and try to select the Departure Time only my original picker is working.  How can I fix this?

http://groupplanner.gallitin.com/flight/create?tripID=21&tripName=Iowa&depart=07%2F20%2F2017&return=07%2F27%2F2017
0
I have recently started learning about the FuelPHP framework and I have a question that I thought I would post here first, instead of the FuelPHP Forum.

I have been working on understanding how to use the framework as intended by the creators, and I think I'm doing a fair job of that, except possibly with regards to using external jQuery libraries.

I have a simple CRUD application that I built  as a proof of concept for using a third party jQuery DateTimePicker library.

This is the jQuery DateTimePicker library that I found and used.



FuelPHP DateTimePicker Sample - dtpsample
This is not including the public asset folder that contains the actual Javascript and CSS.

Model

fuel/app/classes/model/dtpsample.php

This includes data validation.  Each field is important.  It is important to not rely only on the Javascript front end.  I could improve the validation, but this is a start.

<?php
class Model_Dtpsample extends Model_Crud
{
	protected static $_table_name = 'dtpsample';
	
	public static function validate($factory)
	{
		$val = Validation::forge($factory);
		$val->add_field('name', 'Name', 'required|max_length[255]');
		$val->add_field('event_date', 'Event Date', 'required');
		

		return $val;
	}

}

Open in new window


View Template

fuel/app/views/template_dtpsample.php

I want to specifically point out this piece of code regarding my question. The main question I have is have it properly separated concerns?  I want to have the application display the Date and Time selected in the input box directly above the calendar/time select control as indicated by this screenshot.

dtpsample create new entry
Notice that I have used  Asset::css and Asset::js to load the require asset files.


Open in new window

0
Here's my code:

<script>
									
					$('#header_text').html('Click on the "Yes" button if the name listed below is you.<br>Otherwise, click "No."');		
					
					$('#verifyUseryes').on('mouseover click', function(event){
						if(event.type==="mouseover")
						{
							$('#header_text').html('After you click "Yes," please give the next page a moment to load.');
						}
						else if(event.type==="mouseleave")
						{
							$('#header_text').html('Click on the "Yes" button if the name listed below is you.<br>Otherwise, click "No."');
						}
						else if(event.type==="click")
						{
							window.location='$portalLink';
						}
					});
					$('#verifyUserno').click(function(){
						$('#header_text').html('Please enter your personal information and click on "submit!"');		
						$('.step_1').show();
						$('#window').html('');
					});
					</script>

Open in new window


Everything is working just like I want it to save one thing...

When the user mouse's away from the "ye" button, I want the text in my "#header_text" div to go back to "Click on the "Yes" button if the name listed below is you.<br>Otherwise, click "No."".

Right now, it doesn't and I don't know why.

How can I make the text in my #header_text div revert to "Click on the "yes" button when the user mouse's away from the button?

Thanks!
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