Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x

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 have a dynamically created table that can have radiobutton list and / or checkbox list

In the following code the .rblsurvey works perfectly and populates hdnsurveyvalues

However
the .chks does not populate hdnsurveyvaluesChk properly I have verified the names etc

Following is the code and the screen print

    <asp:HiddenField ID="hdnsurveyvalues" runat="server" />	
     <asp:HiddenField ID="hdnsurveyvaluesChk" runat="server" />	
 <script>
            function SaveValidation() {
                var surveydata="";		
                $('.rblsurvey').each(function () {		
                    debugger;		
                    var checked_radio = $("[id*="+$(this).context.id+"] input:checked");		
                    var value = checked_radio.val();		
                    var question = $(this).context.className.replace("rblsurvey rblMultiList_","");		
                    surveydata=surveydata+question+","+value+"|";		
                    //alert(surveydata);		
                    $("#ctl00_ContentPlaceHolder1_hdnsurveyvalues").val(surveydata);		
                });

                $(".chks").each(function (index) {
                    debugger;	
                    var questionid = $(this).attr("class").replace("chks chkquestions_", "");
                    var answerid = "";

                    $(this).find(":checked").each(function (index) {
                        answerid = answerid + $(this).val() + ",";
                    });
                    //  

Open in new window

0
Concerto's Cloud Advisory Services
LVL 5
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

I have the mvc razor view and a simple javascript codes and I hope i can integrate them together to run a simple query.
All i hope is to drop a VALUE from javascript to RAZOR view and run a simple for loop and shown the result.

Can you coach me it is possible to do like below? (the comment codes "//" is what i hope to be added).
Or you know any work around, please show and I will be very appreciate your helps

<script>
        window.onload = function() {
            Quote(); 
        };
        function Quote()
        {
            var state = localStorage.getItem('state'); 
        }</script>
<div class="row"> 
                    @foreach(var i in Model)
                    {      
	           //if (@i.state = state (from the top javascript)
                   //{
                    <div class="col-md-4">
                        <div class="box_feat">
                            <figure><img src="~/img/about_2.svg" alt=""></figure>
                            <h3>@i.planName (PPO)</h3>
                            <p>
                            MSRA:&nbsp;$@i.benefitAmount <br />
                            $@i.premiumAmount Per Month <br />
                            @i.carrier <br /><br />
			    @i.state<br />
                            <input  type="submit" value="View Benefit" class="btn_1">
                            <input  type="submit" value="Enroll Now" class="btn_2" /><br />
                            </p>
                        </div>
      

Open in new window

0
Hey all I have the following code and JSFiddle that I am trying to figure out why its doing the following:

Try this pattern:
•+And
•+And
•+Or (notice it does not place Or)
•+Or (notice it does not place Or)
•+Or (finally does place Or)

Try this pattern:
•+And
•+Or (notice it does not place Or)
•+Or (notice it does place Or)
•+Or (notice it does place Or)
•+Or (notice it does place Or)
•+And (notice it does not place And)
•+And (notice it does not place And)
•+And (notice it does not place And)
•+And (finally does place And)

var numAND = 0;
var numOR = 0;
var andOrBoxTopNum = 5;

/***********************************************
    ___     _   __ ____     ____  ______ _   __
   /   |   / | / // __ \   / __ )/_  __// | / /
  / /| |  /  |/ // / / /  / __  | / /  /  |/ / 
 / ___ | / /|  // /_/ /  / /_/ / / /  / /|  /  
/_/  |_|/_/ |_//_____/  /_____/ /_/  /_/ |_/   
***********************************************/
$(document).ready(function() {
  $("#ANDbtn").click(function() {
    var html = '<div id="ANDArea_' + numAND + '"> \
                        <label \
                            class="control-label" \
                            data-base="AMTdata" \
                            data-definedas="text" \
                            data-required="True" \
                            for="sqlANDbtn' + numAND + '" \
                            style="width: 0px; max-width: 

Open in new window

0
I am writing some javascript tests and I would like to do the below using jQuery, $('.parent .child'); can someone assist?

"has at least 1 entry after loadFeed function is called"

it(".feed container has at least 1 entry", function(done) { 
       var numEntries = document.querySelector(".feed").getElementsByClassName("entry").length;   //use jquery parent/child here
       expect(numEntries).toBeGreaterThan(0); 
       done(); 
     }); 

Open in new window

0
Hello,

I have an input field which i can add an blur event using :

$( "#H_ogo_OperationTyp1" ).on( "blur", function() {
  alert("hejosdfjlskjflsj") ;
});

Open in new window


But if want to add it to 6 fields, and these fields have a class called "opTYP".

what would the syntax be to add it to all fields of class "opTYPE"?

Thanks!
0
Example simplified/contrived for this question. Recently, I came across following code sample.
There is a Js helper file defined as function() JsHelper and there are bunch of other methods created and defined
as JsHelper.prototype.... .

In the view code under document ready function, a new helper is created --> helper = new JsHelper();

My understanding is JsHelper object is created (even though , it is a function but can be used as a object).
and when once created it will execute all the code within the JsFile, is this right?

and also, in the JsHelper function, a variable me is assigned to this? how does it work?

-----------razor view code ------------------
<script>
       $(document).ready(function () {
            helper = new JsHelper();
        });
</script>


----------JsFile ---------------------
function JsHelper(){
    var me = this;
   
     meElements = $("#form").find("input");
     
      me.dosomething ();
}

JsHelper.prototype.dosomething = function (){
     var me = this;
       $("#div").each( function () {
             //do sth with the elements
        });
}
0
Hi I would like to toggle on or off just a piece of Front end code inside a component (Existing/New)

The desired flow as follows,

* dev completes work which is only to be made available on the live site on a certain date
* dev creates a toggle for the feature, and pushes the change live with the feature toggled off
* once the desired date has arrived, a person (someone with sufficient access) can make a simple content change to turn the toggle on, and publishes the change
* the feature is now available on the live site

Any help with Ideas on how to make this possible or code?

Thanks
0
I have in table column named user_date, and I have jquery on frontend to get user status ADULT or YOUNG. When user pick the date, script automaticaly write ADULT or YOUNG, depending on his picked date and current date, = >18 or <18. Now I would, to get number of young users which for one month will be ADULT, and get that number like some alert.
0
I am using SharePoint 2013.  

I am using Handlebars to display my SharePoint list into a table, which works.  But when I try to turn it into a dataTable, it does not transform into a dataTable.  I was able to do it in jsFiddle and it works.  Can you see what I am doing wrong?  

siteAdmin.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Handlebar Js Template Starts Here --> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>   
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://understandsp.com/spdev/SiteAssets/siteAdmins.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.css" />
<script id="siteadmin-template" type="text/x-handlebars-template">
 
<table border=1 width="100%" id="example" class="display"> 
<thead>
	<tr>
		<th>Picture</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email</th>
		<th>Phone</th>
	</tr>

Open in new window

0
I have a row object that I need to use the row.find method
and essentially go through every control and add an attribute on the control...or maybe even change the ID....

I am thinking attribute would be easier.


I guesss I would need to to through each tr/td in this table and find the id..then make the change.

This row object only has one tr....and only 6 td....each td only has one control  
label,  selectlist,selectlist, decimal input, button, button
0
What does it mean to be "Always On"?
LVL 5
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Please help with my JQuery click logic.
currently I can only hide the mobile menu when I click the menu button. I want it to hide when we click on any menu item or anywhere outside the menu as well. What I cannot figure out is how to hide the main menu in mobile mode but not desktop mode and not breaking the sub-menu function.
Code below is in 3 parts first JQuery, then CSS then HTML

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery);
body {
  margin: 0;
}

nav {
  float: right;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li a {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #262626;
  color: #ffffff;
  text-decoration: none;
}

nav ul li

Open in new window

0
Hi I am trying to run this following code to read the JSON values.

I am getting 200 ok message but it only error code is executed.

what is wrong with this code?

var _formURL = 'http://www.json-generator.com/api/json/get/bOAWgfEMuq?indent=2';

	//call for API
	$.ajax({
	  type: 'POST',
	  url: _formURL,
	  dataType: 'jsonp',
    data: {},
	  contentType:'application/json; charset=utf-8',
	  success: function(data) {
	    validateResponsedata (data);
	  },
	  error: function(data) {
	    validateResponsedata (data);
	  }          
	});

	var validateResponsedata = function (data) {
	 alert(data.responseText);
	};

Open in new window


Any help appreciated.

I want to read the items inside the JSON.

Thanks
0
I've been trying to get this ng-idle example working and got help yesterday from Leakim and Leonidas here  The answer helped but I have an issue now....


You can see it here http://147.75.0.124:88/

1. I first put the ng-idle on the front page as an example and that works. You see that it pops up.
    I did it by changing module.js and I have config with  run
          I also change loginController and added the popup code to index.cshtml

That worked but I want it inside the site itself so I did this  Please login with this admin@admin.test /Password321$

2. Changed "mainController.js" and added
 
 angular
        .module('lawApp', ['ngIdle', 'ui.bootstrap'])
        .controller('mainCntrl', mainController)
    .config(function(IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }).run(['Idle', function (Idle) {
            Idle.watch();
        }]);
  

Open in new window


3. Added the ng-idle code to mainController.js

4. Added the popup code to the razor code

The idle popup displays but look at console and now the other controllers are broken. "feedController" is not defined anymore. Click on "Forms" and FormController is not defined anymore either.

Things I tried:

I added 'ngIdle' to feedController but didn't work
Changed the order of the controllers I call but then mainController throws an error

I know adding .module('lawApp', ['ngIdle', 'ui.bootstrap'])  to mainController is making the other controllers not get initialized. I've read about it on a link Julian Hanson sent me once. I fixed them a while back and now running into it again because I added ng-idle.

Please don't suggest rewriting this in Angular 2
0
I have an html view...which has a template....
Note the use of display none.  
This template is used to inject a row into my datatable.

The problem with this is ....later on I have javascript that needs to find this control on the page...and it cannot because
Both template and the row added are rendered in html...

I need some way of appending an ID value to the controls when the row is added to the datatable...

Please help.


Here is template on my view:

<table id="new-row-template" style="display:none">
        <tbody>
            <tr>
                <td>
                    <label></label> 
                </td> 
                <td>
                   @Html.DropDownList("ddlRole", new SelectList(ViewBag.DDLRoles, "Value", "Text"), "")
                </td>
                <td>
                    @Html.DropDownList("selectdesignate", new List<SelectListItem>
                    {
                        new SelectListItem{ Text="", Value = ""  },
                        new SelectListItem{ Text="Primary", Value = "Primary" },
                        new SelectListItem{ Text="Secondary", Value = "Secondary" },
                     })                 
                </td>
                <td> 
                   @Html.TextBox("txtAllocation", new { @class = "form-control", @type = "number" })         
                </td>
                <td>
                    <button type="button" id="btnInsertContactEntity" class="btn btn-primary btn-xs 

Open in new window

0
Hi Experts,

Can anyone tell me why the following executs twice in a row for every click.  For example, the alert('Please choose the desired time slot to book.');

I get 2 consecutive alerts when the slot is actually empty (when I place a breakpoint it will execute twice); and when slot is not empty, the entire function will run as expected, and then the alert will come up once.

I placed e.preventDefault(), but it is not a fix

The function is

    $('#btnApptBook').on('click', function(e){
       
       e.preventDefault();
       var slot = $('#slots').val(); 
       var proceed = validateClient();
       
       //Check Google-Specific Requirements
       if (proceed){
           
            if ((slot === '') || (slot == null)){
                alert('Please choose the desired time slot to book.');
                proceed = false;
                return false;
            }            
        }
        
        if (proceed){
            
            var gmail_id = $('#gmail_id').val();
            var client_id = $('#id').val();
            var duration = $('#duration').val();
                    
            var slot_id = $('#slots').val();
            var fn = $('#first_name').val();
            var ln = $('#last_name').val();
            
           var google_path = PATH_TO_ROOT + 'utilities/google_calendar/index.php?ajax_call=';
           
           if (gmail_id === ''){
               google_path += 'book-appt';
           } else {
              

Open in new window

0
I have a view...that build a few controls...and has two buttons..with JS events..that need to pass the values from the view in the  javascript function calls..

Please help.


Here is the section of the view where the controls are defined mostly.  My insert call for example here need to pass the contactid..which will be on a hiddenfield passed into the page from another page when this page is rendered.
The other values the user will select.  One is a dropdownlist populated from my controller/model.
The other is a dropdown with static values.
ANd finally the last column is just a decimal value input on screen.
There is also a client value passed fro mthe user selection of an autocomplete dropdown...not seen in this view.  Those values all need to go in my insert ...which is just an ajax call back to a controller method from javascript.

 <table id="new-row-template" style="display:none">
        <tbody>
            <tr>
                <td>
                    <label></label> 
                </td> 
                <td>
                   @Html.DropDownList("DropDownListID", new SelectList(ViewBag.DDLRoles, "Value", "Text"), "--- Please Choose an Item! ---")
                </td>
                <td>
                    <select id="selectdesignate" name="selectdesignate" class="form-control">
                        <option value="1"></option>
                        <option value="2">Primary</option>
                        <option 

Open in new window

0
Hi Experts:

I have a index.html file. I have an autocomplete function written in jQuery script. It appears an old design now. I want to port this design and implementation to a new design executed in angularJS.

The properties of my design is as soon as you click in Flying From and Flying to Box it will reset itself. As you type characters it will show matched destination.

For the new solution I want few popular destination as default choice on top. Or as soon as you click in the input box it should give you those options in the dropdown list of options.

Then the matched options as characters are printed. Code with few examples would be great help. In AngularJS apparently it can be very simply done. These input boxes can never be empty.

Look forward to your responses.

Best Regards

Sunnybrad

Open in new window

index.html
0
Hi,

I have the following <div> on my page URL: http://www.headstudios.com.au/book/wpwa_question/why-do-the-assignemtns-have-an-underscore/

<div class="my-rating" comment_id="59" curr_star=3>

This is done for every comment and I have jQuery that activates a 5 star rating system which can be found here:
https://github.com/nashio/star-rating-svg/blob/master/demo/index.html (it's basically where you can select a rating with jQuery from 5 stars)

Anyway the following jQuery code activates the stars:
<script type="text/javascript">
  window.onload = function() { 
  jQuery( document ).ready(function() {
    jQuery(".my-rating").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: jQuery(this).attr('curr_star'),
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' +  + currentRating);
      
      jQuery.post( "http://www.headstudios.com.au/book/wp-content/plugins/wpwa-questions/update-star.php", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of 

Open in new window

..

You will see I have the following code:
  initialRating: jQuery(this).attr('curr_star'),

Open in new window


However this does not work because no initial stars are shown - when there should be 3 initial stars shown (since the 'curr_star' attribute is 3. Does anyone know what I am doing wrong? I would like to have the number in the 'curr_star' attribute be passed to the 'initialRating'.

Any ideas?
0
Time to get some help because this the 3rd day that I'm trying to figure out what I'm missing

1. I'm following this example ng-idle example
I found other examples as well and this is another Another example

2. You can see it here. I have the "start demo" button on the front page
http://147.75.0.124:88/

3. In module.js, I have this. I step thru it and I see 'Idle' is defined

(function() {
    'use strict';

    angular.module('lawApp', ['ui.bootstrap', 'ngIdle'])
    .config(["IdleProvider", "KeepaliveProvider", function (IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }])
        .run(['Idle', function (Idle) {
        Idle.watch();
    }]); //['ui.bootstrap']  I moved this to login page and it works fine. Having it here and not having it in the login page also works

  
})();

Open in new window

4. I put the rest of the code from the demo in logincontroller.js

 function loginController($scope, loginService, $uibModal,Idle,Keepalive)
   {
       .....

            //*** idle

       $scope.started = false;

       function closeModals() {
           if ($scope.warning) {
               $scope.warning.close();
               $scope.warning = null;
           }

           if ($scope.timedout) {
               $scope.timedout.close();
               

Open in new window

0
[Webinar] Database Backup and Recovery
LVL 11
[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Head out to http://brucegust.com/eResume/

In the upper right hand corner, there's a little downarrow button that you can click on that reveals some content. When you click it, the arrow changes to "up." I want to change it back to "down" when the user clicks on it again to minimize the expanded content.

How?

You can see where I started in my code with this:

$('#instructions').click(function(event){
		event.preventDefault();
		//$("#the_button").attr("src", "images/minimize_button.png");
		var src = $('#the_button').attr('src');
		if(src="images/expand_button.png")
		{
			$("#the_button").attr("src", "images/minimize_button.png");
		}
		else
		{
			$("#the_button").attr("src", "images/expand_button.png");
		}
		$('#instruction_row').slideToggle(300);
	});

Open in new window


I think I'm close, but I got stuck.

Thanks!
0
Hi Experts

Could you point what is preventing this code to correctly fire a javascript function when a 2nd input box is added ?

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script src="../lib/php_crud_api_transform.js"></script>
<script id="PostListTemplate" type="text/mustache">
<ul>
	{{#pessoas}}
		<li>
			<span class="id">{{id}}</span>, <span class="clb_nome">{{clb_nome}}</span> , <span class="email">{{email}}</span> 
			<a href="javascript:void(0)" class="edit">editar</a>
			<a href="javascript:void(0)" class="delete">deletar</a>
		</li>
	{{/pessoas}}
	<li>
		<form>
            <input name="clb_nome"/>

             <!-- Problematic if I add this input box -->
            <input name="email"/>

		</form>
	</li>
</ul>
</script>
<script>
function PostList(element, template) {
	var self = this;
	var url = '../api.php/pessoas';

	self.edit = function() {
		
        // Edition
        
        var li = $(this).parent('li');
		var id = li.find('span.id').text();
		
        var clb_nome = li.find('span.clb_nome').text();
		clb_nome = prompt('Value',clb_nome);

        var email = li.find('span.email').text();
		email = prompt('Value',email);

		if (clb_nome!==null) {
			$.ajax({url:url+'/'+id, type: 'PUT', data: {clb_nome:clb_nome, email:email} , success:self.update});
		}
	};

	self.delete = function() {
		var li 

Open in new window

0
I have a web form on this page that's using jQuery based form field validation:

https://www.evergladesholidaypark.com/ehp-landingpage-markup/

Here's a link to the JS file that contains the validation script(s):

https://www.evergladesholidaypark.com/ehp-landingpage-markup/js/jquery.main.js

On the form .. I have the following DIV which is currently hidden by default:

<div class="error-message">            
You have either left one or more of the required fields in the form blank, or filled them out incorrectly.  Please apply the necessary corrections before re-submitting then form.            
</div>

Open in new window


Right now .. if you just click on the submit button without filling in any of the fields, .. the .error-message DIV is displayed for about 3 seconds, and then fades out.  I'm doing that using this code snippet which starts at about line number 305 in the JS file:

if (success != true) {          
  $(".error-message").show().delay(3000).fadeOut( "slow");          
}

Open in new window


The problem, however, is that I've placed this code inside the "checkSuccess" handler --- which is also being fired whenever an "onChange" event is triggered by any of the form fields.  This is obviously resulting in undesired effect .. where the error message repeatedly gets displayed adn then fades out, ... making the page grow and then shrink repeatedly.

What I'd like to do is change the script so that the .error-message DIV is only displayed when the following …
0
I have a div tag that is heing opened in modal with a button click
<a onclick="ShowFilterPopUp()" role="button" id="add_staff">Filters</a>

Open in new window


I am running some code on a second button click (In the modal window)

It reloads a grid
That reload closes the window

When I add an export to File as part of the process
The file does export but the modal does not close.

I tried calling a second code from server side but the modal window still does not close.

        LoadWithdrawals()
        If chkACH.Checked = True Then
            ExportACH() - exports but modal window does not close
            ScriptManager.RegisterStartupScript(Me, [GetType](), "blah", "ShowFilterPopUpHide();", True)
        End If

Open in new window



        function ShowFilterPopUp() {
            $('#modalFilters').modal('show');
        }

        function ShowFilterPopUpHide() {
            $('#modalFilters').modal('hide');
        }

Open in new window

0
Hi,
I use Dropzone to upload the files to the site.
http://www.dropzonejs.com/#events

  
			<form id="upload" method="post" action="Docs.aspx" enctype="multipart/form-data">
			<div id="drop">
				Drag & Drop Here

				<a>Browse</a>
				<input type="file" name="upl" multiple />
			</div>

			<ul>
				<!-- The file uploads will be shown here -->
			</ul>

		</form>

Open in new window

this is the code behind

    protected void Page_Load(object sender, EventArgs e)
    {
        



        bool exists = System.IO.Directory.Exists(Server.MapPath("~/DocStorage/File-" + Session["sCMID"]));
        if (!exists)
            System.IO.Directory.CreateDirectory(Server.MapPath("~/DocStorage/File-" + Session["sCMID"]));

        DirectoryInfo flDis = new DirectoryInfo(Server.MapPath("~/DocStorage/File-" + Session["sCMID"]));

        foreach (string s in Request.Files)
        {
            HttpPostedFile file = Request.Files[s];
            int fileSizeInBytes = file.ContentLength;
            string fileName = file.FileName;
            string fileExtension = "";


            if (!string.IsNullOrEmpty(fileName))
                fileExtension = Path.GetExtension(fileName);
            string savedFileName = Guid.NewGuid().ToString() + fileExtension;
            //string savedFileName = fileName;

            string filename = Server.MapPath("~/DocStorage/File-" + Session["sCMID"] + "/" ) + savedFileName;
            

            file.SaveAs(filename);
            
        }

Open in new window

0
I'm curious about how I might emulate what's currently going on with the Zillow homepage, .. where clicking on the different tabs both changes the background image, and also changes the appearance and behavior of the search form.

https://www.zillow.com/

I'd like to try to implement something similar on a WordPress site, most likely using JQuery (though I'm not averse to using vanilla JavaScript). Does anyone here have any tips or some "quick start" code examples they could share with me?

By the way  .. it's not necessary that I change the page url when I click on the different tabs.  I'm just looking to modify the DOM.

Thanks,
- Yvan
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