Need fix on stopping page reloading after file uploading

I’m trying to upload files to the server without page refresh. The uploading works but the page reloads after the uploading is done which is not what I wanted. I’m redirecting to an iframe (“myFrame”) to stop the page reloading but it appears this doesn’t work correctly. What did I do wrong?

HTML

<form id="upload" target="myFrame" action="sql/main-pix-upload.php" method="post" enctype="multipart/form-data">
  <input id="main-pix" class="hidden" name="main_pix" type="file" onchange="uploadPix()" accept="image/*"/>
  <label class="gi gi-camera mb-0 text-white" for="main-pix" type="button" title="Change Picture"></label>
</form>

SCRIPT

function uploadPix(){
  var form = document.getElementById('upload');
  form.onsubmit = function(e){
    e.preventDefault()
    var formData = new FormData(this);
    $.ajax({
      url: 'sql/main-pix-upload.php',
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false
    })
  });
};

PHP

$account = $_SESSION['account'];
$order = $_SESSION['order'];
$id = $_SESSION['id'];

$pathPix = ('../accounts/'.$account.'/'.$order.'/pix/'.$id.'/');
if(!is_dir($pathPix)){
  mkdir($pathPix, 0777, true);
}

$file_name = $_FILES['main_pix']['name'];
$file_size = $_FILES['main_pix']['size'];
$extension = pathinfo($file_name, PATHINFO_EXTENSION);
$new_name = "main-pix.png";
$temp = ($_FILES["main_pix"]["tmp_name"]);
$target_file = ($pathPix.$new_name);

if(0 < $_FILES['main_pix']['error']){
  echo 'Error: ' . $_FILES['main_pix']['error'] . '<br>';
}else{
  move_uploaded_file($temp, $target_file);
}


Source: stackoverflow-php

Table cell value updating in the same row and not moving to the next row in html

I am displaying a table on a webpage using html/css and javascript. The table displays all the cell values fine except for the cells for Col3 and Col4 i.e., name2 and id2. So, it keeps updating the col3 and col4 values in the first row cells only and doesn’t move to the next row for just these two cells, and the rest is being displayed fine. Why is this happening? Can anybody help me please!!

<table align="center">
            <tr>
                <th bgcolor="#f0a00c">Col1</th>
                <th bgcolor="#f0a00c">Col2</th>
                <th bgcolor="#f0a00c">Col3</th>
                <th bgcolor="#f0a00c">Col4</th>
                <th bgcolor="#f0a00c">Col5</th>
                <th bgcolor="#f0a00c">Col6</th>
                <th bgcolor="#f0a00c">Col7</th>
           </tr>

        {% for b in obj %}
        <tr>
            <td>{{ b.col1 }}</td>
            <td><span class="wrapped"><span>{{ b.col2 }}</span></span> </td>
            <td id="name2"></td>    
            <td id="id2"></td>  
            <td>{{ b.col5 }}</td>
            <td>{{ b.col6 }}</td>
            <td>{{ b.col7 }}</td>
        </tr>
        

            var name2 = "{{ b.col5 }}".split("(")[0];
            document.getElementById("name2").innerHTML = name2;
            
            
            var dpid = "{{ b.col5 }}".split("_")[1].match(/[A-Z0-9]*/i); 
            var id2 = id[0]
            document.getElementById("id2").innerHTML = id2;
         
     {% endfor %}

    </table>


Source: stackoverflow-javascript

Logical display of dynamic data in 3d HTMl5

I cant reveal my project details here. So I am taking an example of Electrical circuit.

Suppose we have 10 lights at home and there is a centrepoint from where the electricity flows to the lights when switched on. I want to draw a logical view that at a given time, from the centrepoint, to what lights the electricity is flowing.

This representation should be in 3d View. Imagine, I have been provided with a unique symbol for centrepoint and switch.

My thought process towards this is generate a json data from my application and feed this data to HTML5 which can render the json data into 3D representation.

But my query is, the data I have is quiet complex. Say, centrepoint is connected to many subnets and set of lights are connected to each of the subnet and at a given point, what subnet is connected to centrepoint and what lights are getting electricity is connect to the particular subnet. I should show neither the subnet nor the lights which is not getting the electricity (assuming, electricity will flow to subnet when atleast one light is glowing from that subnet)

How can I render this dynamic data in HTML5 in 3d?

Kindly please point me to the example projects in github.com or direct me right tutorial.

If HTML5 is not the right choice, Kindly please direct me to the right technology that I can use to do this?


Source: stackoverflow-javascript

Convert Json parsed date to fit html5 input date

I am using Knockout to make a nice looking Gui like so

Javascript:

   viewModel = {
        lookupCollection: ko.observableArray()
    };

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url:  "@Url.Action("GetView", "FakturaOmfangs", new {area = "" , id = ViewBag.id})",
        }).done(function (data) {
            $(data).each(function (index, element) {
                var mappedItem =
                    {
                        FakturaId: ko.observable(element.FakturaId),
                        FakturaProdukterId: ko.observable(element.FakturaProdukterId),
                        Beskrivelse: ko.observable(element.Beskrivelse),
                        Periode: ko.observable(element.Periode),
                        EndDate: ko.observable(element.EndDate),
                        procent: ko.observable(element.procent),
                        Rabat: ko.observable(element.Rabat),
                        Pris: ko.observable(element.Pris),
                        Ialt: ko.observable(element.Ialt),
                        Value: ko.observable(element.Value),
                        Mode: ko.observable("display")
                    };
                console.log(mappedItem);
                viewModel.lookupCollection.push(mappedItem);
            });
            ko.applyBindings(viewModel);
        });
    });

the EndDate is a Datetime? parsed from controller like this

  return Json(list, JsonRequestBehavior.AllowGet);

This is my input where i would like to put the Date into, so i can edit it.

<td><input class="form-control" type="date" data-bind="value: EndDate" /></td>

How do i format the date to the correct format? so that i can use it in input type=Date ?

Thanks.
Benny.


Source: stackoverflow-javascript

How do I make an HTML-button both redirect the user to a new .html-page whilst also saving data from form input using .value?

I have created a form where a user gets to type in data that is saved in variables when the data is submitted. I am requesting a solution that will both save the user’s data whilst also redirecting the user to a new .html-page when the button is pressed.

<button type="button" onclick="getInfo()">Submit</button>

As you can see above, the button is activating a function, that will save the info like this:

function getInfo(){
var firstname = document.getElementById("firstname").value
var lastname = document.getElementById("lastname").value
var adress = document.getElementById("adress").value
var password1 = document.getElementById("password1").value
var password2 = document.getElementById("password2").value
}

How can I make this possible? Sincerely, Decentralized.


Source: stackoverflow-javascript

HTML5 Video with Canvas transparency does not work in Safari

I’m trying to load a randomized video with alpha transparency using canvas on click, which is working in all browsers except Safari. For Safari, the audio is loading, however there is no video output. I tried removing the source tags as stated in https://www.experts-exchange.com/questions/28634434/HTML5-Video-Background-Not-Playing-on-Safari-or-IE11.html, however that did not seem to solve anything.

$(document).ready(function() {
	var outputCanvas = document.getElementById('outputSS'),
		output = outputCanvas.getContext('2d'),
		bufferCanvas = document.getElementById('bufferSS'),
		buffer = bufferCanvas.getContext('2d'),
		video = document.getElementById('videoSS'),
		width = outputCanvas.width,
		height = outputCanvas.height,
		interval;
				
		function processFrame() {
			buffer.drawImage(video, 0, 0);
			
			// this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
			var	image = buffer.getImageData(0, 0, width, height),
				imageData = image.data,
				alphaData = buffer.getImageData(0, height, width, height).data;

			
			for (var i = 3, len = imageData.length; i < len; i = i + 4) {
				imageData[i] = alphaData[i-1];
			}

			processFrame.crossOrigin = "anonymous";
			
			output.putImageData(image, 0, 0, 0, 0, width, height);
		}
		
		function randomColourVal() {
			return Math.floor( Math.random() * 2000 );
		}
		
		video.addEventListener('play', function() {
			clearInterval(interval);
			interval = setInterval(processFrame, 40)
		}, false);
			

	document.getElementById('buttonRedesign').onclick = function (){
		$( document ).ajaxSuccess(function( event, xhr, settings ) {
    		if ( settings.url.indexOf("/store/cart/mini_cart.jsp") >= 0) {
				var videos = [
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.ogv'}],
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_6_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_4_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_1_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_2_ALPHA_Final2.ogv'}],  
				    [{type:'mp4', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.mp4'}, {type:'webm', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.webm'}, {type:'ogg', 'src':'/__ssobj/static/ellen_comp_5_ALPHA_Final2.ogv'}],  
				];
				var number = Math.floor(Math.random()*videos.length);
			    $('#videoSS').find('source').each(function(index){ 
			          videoSrc = videos[number][index].src;
			          $(this).attr('src', videoSrc);
			          document.getElementById('videoSS').load();
			          document.getElementById('videoSS').play();
			    });
		 	}
		});
	};
	$(function(){
	    var video = $('#videoSS')[0];
	    video.addEventListener('ended', function(){
	        $('.videoCont').fadeOut();
	        $('.replayVideo').show();
	    })
		video.addEventListener('playing', function(){
	        $('.videoCont').fadeIn();
	        $('.replayVideo').hide();        
	    })

	});

	$('.replayVideo').click(function() {
		document.getElementById('videoSS').play();
	});

});
.videoCont {position: fixed;margin-left: -390px;z-index: 1000;bottom: 0px;display:none;width: 400px;display: block;}
.replayVideo {position: fixed;margin-left: -260px;z-index: 1001;bottom: 0px;display:none;cursor:pointer;text-align: center;}
.replayVideo img {width: 2rem;}
.replayVideo div {background: rgba(255, 255, 255, .8);display: block;padding: 15px;margin-bottom: 40px;}
#outputSS {width: 300px;height: 327px;display: inline-block;}
#bufferSS {display: none;}
<button id="buttonRedesign">Add</button>
Replay Video
REPLAY


Source: stackoverflow-javascript

Music on iPhone stops playing when browsing the website

I have a strange problem. When I’m browsing my website on my iPhone, the music stops playing anytime I click on an element to load a new page. It will just stop playing any music.

I cannot find anything that handles such behavior. I researched quite some time but have not been able to find a solution. I would greatly appreciate any suggestions.


Source: stackoverflow-php

static webpage change file

I’m making a simple website in GitHub pages. I have a text file in the /docs folder (I can move though) and I want to change it’s content through index.html. I found a lot of back-end solutions but GitHub pages allows static webpages only. Is there a way to do so in static webpage and if so how to do it in javascript?


Source: stackoverflow-javascript

Javascript HTML select dropdown

I am trying to get the data from database and display it in select option through drop down menu. I am getting the data correctly in java script page as well. But it is not displaying in the drop down menu of html.

HTML code:

<td>Organization Name:</td>
                <td><select id="orgname" name="Oname" onload="getOrganizationname();">
                          <option selected disabled value=" ">Choose your Organization</option>

                        <!-- <option value="1" >xyz</option>
                        <option value="2">Brocade</option>
                        <option value="3">Citrix</option> --> 
                </select></td>

Javascript code: function getOrganizationname() {

    $.get('getOrganizationname.jsp',function(data)
            {
        document.getElementById("orgname").innerHTML= data;
        alert(data);
    }

    );
}


onload i am getting this in alert msg(trying to debug) This is info. from database:
<option value="Infosys"></option>
<option value="Akamai"></option>
<option value="Brocade"></option>
<option value="XYZ"></option>
<option value="XYZ1"></option>
<option value="XYZ2"></option>
Appreciate your help in advance.


Source: stackoverflow-javascript