js

Showing posts with label js. Show all posts

JQuery: Send Post Data and Redirect

Mar 2, 2015

Basically, what I wanted to do is to send data from one page to another page.

Apparently, I don't have any form to submit and I don't want it to appear on the URL, either.

Here's one simple solution:

var form = $("<form action='" + url + '' method='post'>" +
  "       <input type='hidden' name='id' id='id' value='" + id + "'/>" +
  "       <input type='hidden' name='username' id='username' value='" + username + "'/>" +
  "</form>");
$('body').append(form);
form.submit();

where id and username are variables holding the data you want to send to another page, and url is the page you want to pass the data to.

Any other alternate solution?

Please feel free to leave your message on the comments section.

Bootstrap: Modal Dialog Box

Sep 12, 2014

I had a post before about how to create a modal dialog box using native CSS and Javascript (no libraries).

This time, I will make one using Bootstrap.

Required:

You may download the files or just place the following code inside your <head> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Next, we create our modal dialog box.

<div class="modal fade" id="modalDialog" role="dialog">
  <div class="modal-dialog">
 <div class="modal-content">
   <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <h4 class="modal-title">[Modal title]</h4>
   </div>
   <div class="modal-body">
  <h1>[Modal Body]</h1>
  <p>Lorem ipsum dolor</p>
  <a href="">Lorem ipsum dolor</a>
  <ul>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
  </ul>
  <ol>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
  </ol>
   </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</button>
   </div>
 </div>
  </div>
</div>

We then create the button that would allow the modal to appear.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalDialog">
 Show Modal
</button>

FIDDLE

Did this work for you?
Any better solutions?

Please feel free to drop a message on the comments section.

Javascript: Bubble Sort and Math.Random

Sep 3, 2014

We are given an exercise that needs to be solved using Javascript.

*Bubble sort
-ceate a function that returns a sorted array in ascending order
-within the function, create an array with a size of 10 with random unique numbers (1-100) in it (to generate random numbers try using Math.random() function)
-sort the random values then return the array

*displaying the array
-in respect to problem 1, display the returned array into an ordered list element (<ol>)

Here is my solution to the problem.

Code snippets to help with output tracing is also available as comments.

var num = [];

num = assignValToArray();
bubbleSort(num);
displayOrderedList(num);

// ***** FUNCTIONS *****

//assign n random unique numbers to array;
function assignValToArray(){
 var arr = [];
 var val;
 var maxNum = 100;
 var minNum = 1;
 var n = 10; //size;
 
 while(arr.length < n){
  val = Math.floor(Math.random() * ((maxNum + 1) - minNum) + minNum);
  //check generated value if exists in the array;
  var exist = false;
  for(var x = 0; x < arr.length; x++){
   if(val === arr[x]){
    exist = true;
    break;
   }
  }
  
  //push to array if generated value does not exist;
  if(!exist){
   arr.push(val);
  }
 } 
 //document.write("Original list: " + arr); //original list;
 return arr; 
}

// bubble sort;
function bubbleSort(arr){
 //var count = 0; //count for every iteration;
 do{
  var tmp; //hold temporary value;
  var swap = false;
  for(var i = 0; i < arr.length-1; i++){
   if(arr[i] > arr[i+1]){
    swap = true;
    tmp = arr[i];
    arr[i] = arr[i+1];
    arr[i+1] = tmp;
   }
  }
  //count++;
  //document.write("<br>" + count + "th Iteration: " + num); //list every iteration;
 }while(swap);
}

//display output;
function displayOrderedList(arr){
 document.write("<ol>");
 for(var i = 0; i < arr.length; i++){
  document.write("<li>" + arr[i] + "</li>");
 }
 document.write("</ol>");
}

For questions or for better solutions, feel free to leave a message on the comments section.

Tech Newbie

Pages

JQuery: Send Post Data and Redirect

Bootstrap: Modal Dialog Box

Javascript: Bubble Sort and Math.Random