Tag Archives: JQuery

JQuery tutorial –- Effect — Part 4

1. Animating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Animating an Element</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#right”).click(function() {
$(“#theDiv”).animate({ width: “500px” }, 1000);
});
$(“#text”).click(function() {
$(“#theDiv”).animate({ fontSize: “24pt” }, 1000);
});
$(“#toggle”).click(function() {
$(“#theDiv”).animate({ left: “500” }, 1000, “swing”);
});
});
</script>
<style type=”text/css”>
div#theDiv {
position:relative;
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: cyan;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Animating an Element</p>
<div id=”theDiv”>Animate Me</div>
<button id=”right”>Grow Right</button>
<button id=”text”>Big Text</button>
<button id=”toggle”>Move Div</button>
</body>
</html>

2. fading

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Element Fading</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#fadein”).click(function() {
$(“#theDiv”).fadeIn(“normal”);
});
$(“#fadeout”).click(function() {
$(“#theDiv”).fadeOut(“normal”);
});
$(“#fadeto3”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 0.3);
});
$(“#fadeup”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 1.0);
});
});
</script>
<style type=”text/css”>
div#theDiv {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Fading an Element</p>
<div id=”theDiv”>
</div>
<button id=”fadein”>Fade In</button>
<button id=”fadeout”>Fade Out</button>
<button id=”fadeto3″>Fade To .3</button>
<button id=”fadeup”>Fade To 1.0</button>
</body>
</html>

3.Sliding, Show and hide

$(function() {
$(“#slideup”).click(function() {
$(“#theDiv”).slideUp(“normal”);
});
$(“#slidedown”).click(function() {
$(“#theDiv”).slideDown(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).slideToggle(“slow”);
});

$(“#show”).click(function() {
$(“#theDiv”).show(“normal”);
});
$(“#hide”).click(function() {
$(“#theDiv”).hide(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).toggle(“slow”);
});
});

4.Images rotating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Image Rotator</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
// create the image rotator
setInterval(“rotateImages()”, 2000);
});

function rotateImages() {
var oCurPhoto = $(‘#photoShow div.current’);
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $(‘#photoShow div:first’);

oCurPhoto.removeClass(‘current’).addClass(‘previous’);
oNxtPhoto.css({ opacity: 0.0 }).addClass(‘current’).animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass(‘previous’);
});
}
</script>
<style type=”text/css”>
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>
</head>
<body>
<h1>
jQuery-based Image Rotator</h1>
<div id=”photoShow”>
<div class=”current”>
<img src=”images/Grass.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Leaf.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Spring.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Water.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
</div>
</body>
</html>

Advertisements

JQuery tutorial – Events — Part 3

1. mouseover mouseleave event

$(function() {
$(“#evtTarget”).on(“mouseover mouseleave”, highlight);
$(“#evtTarget”).on(“click”, function(evt) {
$(“#evtTarget”).off(“mouseover mouseleave”, highlight);
$(“#evtTarget”).html(“<p>You shut off the hover effect!</p>”);
});
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}

2.Using jQuery to find the dive position

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using the jQuery Event Object</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).click(function(evt) {
$(this).html(“pageX: ” + evt.pageX + “, pageY: ” + evt.pageY + “, type: ” + evt.type + “, target: ” +
evt.target);
});
});
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color: Silver;
font-size:18pt;
margin:5pt 5pt 5pt 5pt;
}
</style>
</head>
<body>
<h1>Using the jQuery Event Object</h1>
<div id=”Div1″ class=”normal”>Click on this div (Div1) to see the event information</div>
<div id=”Div2″ class=”normal”>Click on this div (Div2) to see the event information</div>
<div id=”Div3″ class=”normal”>Click on this div (Div3) to see the event information</div>
</body>
</html>

3. more mouse relative event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using Event Helpers</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#evtTarget”).hover(highlight, highlight);

$(“#evtTarget”).click(fnClick1);
$(“#evtTarget”).dblclick(fnClick2);
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}
function fnClick1() {
$(“#evtTarget”).html(“Click!”);
}
function fnClick2() {
$(“#evtTarget”).html(“Double Click!”);
}
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color:Yellow;
font-size:18pt;
}

.highlighted {
background-color:Red;
}
</style>
</head>
<body>
<h1>Using Event Helpers</h1>
<div id=”evtTarget” class=”normal”>Mouse over this div to see the effect. Click on it to change the content.</div>
</body>
</html>

4. div click event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Miscellaneous jQuery Events</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).one(“click”, function() {
$(this).css({ background: “red”,
cursor: “auto”
});
});
});
</script>
<style type=”text/css”>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p {
font-size: 18pt;
}
</style>
</head>
<body>
<p>
Click on each square to change color</p>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>

5. table working with event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Striping/Hover Highlighting a Table</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#theList tr:even”).addClass(“stripe1”);
$(“#theList tr:odd”).addClass(“stripe2”);

$(“#theList tr”).hover(
function() {
$(this).toggleClass(“highlight”);
},
function() {
$(this).toggleClass(“highlight”);
}
);

$(“#theList”).on(“click”, “tr”, function showText (evt) {
alert($(this).text());
})
});
</script>
<style type=”text/css”>
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
.clickable {
cursor:pointer;
}
.stripe1 {
background-color:#0f0;
}
.stripe2 {
background-color:#afa;
}
.highlight {
background-color: #ffcc00;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Using jQuery to stripe and hover-highlight a table</h1>
<table id=”theList”>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
<tr>
<td>Butter</td>
<td>3.49</td>
</tr>
<tr>
<td>Bread</td>
<td>0.99</td>
</tr>
<tr>
<td>Pasta</td>
<td>1.19</td>
</tr>
<tr>
<td>Honey</td>
<td>4.39</td>
</tr>
<tr>
<td>Cookies</td>
<td>2.99</td>
</tr>
<tr>
<td>Apples</td>
<td>0.59</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.78</td>
</tr>
<tr>
<td>Pepper</td>
<td>1.56</td>
</tr>
</tbody>
</table>
</body>
</html>

JQuery tutorial –set up and retrive — Part 1

1. Set up

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>First jQuery-Enabled Page</title>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function() {
alert(“The page just loaded!”);
});
</script>
</head>
<body>

</body>
</html>

2.basic retrieving

$("document").ready(function() {
        //$("p[class]").css("border", "3px solid red"); // paragraph has define class
        //$("p[id=para1]").css("border", "3px solid red");//paragraph has id named para1
        //$("p[id^=para]").css("border", "3px solid red");//paragraph has id name start with para
        //$("p[id^=para][lang*=en-]").css("border", "3px solid red");//paragraph has id name started with para //and has attribute lang follow with anything or not and = en- 
     $("li a[href$='.pdf']").after("");
//li has a and end with .pdf then add a img to it
//$("p:first").css("border", "3px solid red");
        //$("p:last").css("border", "3px solid red");
        //$("p:even").css("border", "3px solid red");
        //$("p:odd").css("border", "3px solid red");
        //$(".a:first").css("border", "3px solid red");
        //$(".b:even").css("border", "3px solid red");
        //$("p:gt(1)").css("border","3px solid red");
        //$("p:not(p:eq(2))").css("border", "3px solid red");
        //$("p").css("border", "3px solid red");
        //$(".a").css("border", "3px solid red");
        //$("#list1").css("border", "3px solid red");
        //$("p.b").css("border", "3px solid red");
        //$("p:contains(3)").css("border", "3px solid red");
        //$("p:parent").css("border", "3px solid red");
        //$("ul:has(li[class=a])").css("border", "3px solid red");
        //$("ul li:nth-child(3)").css("border", "3px solid red");
        //$("ul li:nth-child(2n)").css("border", "3px solid red");
        //$("form :input").css("border", "3px solid red");
        //$("form :text").css("border", "3px solid red");
        //$("form :text:enabled").css("border", "3px solid red");
        //$("form :checked").css("border", "3px solid red");
        //$("form :checkbox:checked").css("border", "3px solid red");
        //$("p,li.b").css("border", "3px solid red");
        //$("ul li.a").css("border", "3px solid red");
        //$("ul + p").css("border", "3px solid red");
        //$("#list1 ~ p").css("border", "3px solid red");
       // Inspect the length and size() of a result set
        alert("There are " + $("p").length + "elements");

        // use the get() and get(index) to retrieve DOM elements
        var elems = $("li").get();
        alert("There are " + elems.length + "tags");
        alert($("li").get(0));

        // use the find function
        $("ul").find("li.b").css("border", "3px solid red");

        // use the each function
        var leftmargin = 0;
        var border = 3;
        $("p").each(function() {
            $(this).css("border", border+"px solid red");
            $(this).css("margin-left", leftmargin);
            border += 2;
            leftmargin += 10;
        });

    });

JQuery Auto complete work with bakcode by using asp.net mvc

Recently to convert the new website, I have a bookinng form for the clients to finished the booking,there is some exiting data need to using auto complete. In the past I alway use ajax tool control kits to achieve that result. But now I am kind of fun for JQuery. Here is the Jquery Autocomplete textbox

First I have databses contain all the subuerbs, here is my database table.

databaseSuburbs

here is my action in my BookController:

databseJasonResult

I let it return json because json is the fast and easy analyse data at moment.

Then in your view , just add the reference to JQuery UI:

autocompleteJqury

You could ignore the timepicker.min.css, and timepicker.min.js, I use it to picker up the time, for autocomplete don’t need those two references.

here just in you view you just need one more line.

@Html.TextBox(“SearhToSuburb”, null, new {type=”text”,@class=”form-control”, @id = “search_to_suburb” })

That’s it. Simply isn’t it. Have fun. Below is what will it looking like.feels

Create marquee news in front page and the news is read from the database with expired data,also included management page to insert news

My boss just saw other company website has a marquee new on the front page, so she asked me if I could make one and arrow her to insert news and the news will dispear at the expired data.

For achieve that task, first I create a table in my database table, here is my table:

breadNewTable

then I write a store proceedure, a little tip for fresh guy, alway use store preceedure to insert data for security reasons.

breadNewStoreProceedure

Now, We could start the front end job. I create a user control:marquee.ascx(so you could put it in anyway you like), to display the new, here is my html code:

frontUCmarquee

here is the backcod, I used ado.net to open the database and qurery what I need, and bind it to my BulledtedList:

databasereadertomarquee

See the code this if(!IsPostBack) is not neccessary, but I use web froms so it wil inherit maintain state so I don’t need retrieve database everytime postback.

here I am also happy to share the css file for style this unorder list to display inline:

MarqueeCssStyle

A tip for fresh guy, put this in the page your use control will stand it.

Now, you just need drag the usercontrol to any page you want it with this css style in top of the header it. You coud see it.

Then We could start create a page to arrow my boss to insert the bread news, I used boostrap format so it save my time to write css. here is the front page look like:

addNews

here is the html code:

htmlCodeAddnews

The form use jQury Validate, the jquery-ui.js, is for my boss click then will pop up the jQuery calender to arrow her to put the expired date. So simple isn’t, I am love JQure very much, save a lot of time. It remind me when I first time write javascript over 10 years ago, for every simply function I need write a lot codes.

Finally I just need write a event could be fired by this button.

storeIntodatabase

Ok, That’s all. Have fun!

Revision:how to use backbone

three way to create your  model:

Person = Backbone.Model.extend({})
Person = Backbone.Model.extend({
defaults:{
name:"";//Model arrow undefined data
create:new Date() //here arrow put PHP function
}
});
Person = Backbone.Model.extend({
defaults:function(){
return   {  name:"";  //Model arrow undefined data
create:new Date()
}
}
});

Read and Write:

var person = new Person({ name:”Sandy”,age:”12″});

person.get(“name”);//” Sandy”

person.set({name:”Anna”,age:”12″});//overwrite it

Create Simple View

PersonView = Backbone.View.extend({

render:function(){

var person = “<p>” + this.model.get(“user”) + “</p>”;

$(this.el).html(person);

}

});

“this.el” meaning: every View Model create a Page Scope, el means the root tag<div></div>,

Get Model data Add into HTML page

var personView = new PersonView({

model:person;

})

personView.render();

console.log(personView.el);//check the el

Get Data from the server(RESTful way)

var Person = Backbone.Model.extend({urlRoot:”/person”}); //point to the data sourse

var person = new Person({id:1}); //point to your object

person.fetch();//get /person/1

person.save();//put /person/1

var newPerson=new PersonModel(); //create a new object

newPerson.set({name:”Sandy Zhang”}); // give the an name

newPerson.save(); // insert into /person

newPerson.get(“id”); //2

newPerson.destroy();// Delete /person/2

Create Better View

var PersonView = Backbone.View.extend({

tagName:”article”,

id:”personOne”;

class:”person”,

attributes:{title:this.model.get(“name”)},

render:function(){

var person=”<p>” + this.model.get(“name”)+”</p>”;

$(this.el).html(person);

}

});

this will render html sourse:

<article id=”personOne” class = “person” title=”Sandy Zhang”>

<p>Sandy Zhang</p>

</article>

Cache of the jQuery object

$(“#personOne”).html();

in Backbone.js: $(this.el).html(); or better way : this.$el.html()

el  is  generated for the cache of jQuery object, so that it can be used repeatedly without fear of generating multiple instances of the jQuery object.

Built-in template engine(underscore template)

use render() seems not elegant ,now we use underscore template

var PersonView = Backbone.View.extend({

tagName:”article”,

id:”personOne”;

class:”person”,

attributes:{title:this.model.get(“name”)},

template: _.template(‘<p><%= name %></p>’),

render:function(){

data = this.model.toJSON();

$(this.el).html(template(data));

}

}); // Cool! looking better

Track your instance

var person = new Person({name:”sandy”}); //create a instance

person.on(“change”,function(){

alert(“Something changed on ” + this.get(“name”) );

});

person.on(“change:age”,function(){

alert(this.get(“name”) +”,Your age has been changed ”  );

});

Change data to JSON format

var person = new Person({id:1});

console.log(person.toJSON());

//or

console.log(JSON.stringify(person));

Now Add View event

var PersonView = Backbone.View.extend({

tagName:”article”,

id:”personOne”;

class:”person”,

attributes:{title:this.model.get(“name”)},

template: _.template(‘<p><%= name %></p>’),

render:function(){

data = this.model.toJSON();

this.$el.html(template(data));

},

events:{ “mouseover” :”showMore”,},

showMore:function(){…….},

});

Advance Level

1.Server <= (get) model (data) => view (rendering) => DOM

var PersonView = Backbone.View.extend({

input:_.template(‘<input type=”text”><%= name%></input>’),

submit: _.template(‘<button type=”submit”>Change Name</button>’),

render: function(){

data = this.model.toJSON();

this.$el.html(input(data)).html(submit);

}

});

Now we can  change name now, the question is how do you know the model data has changed? This needs to view it through the event.

var PersonView = Backbone.View.extend({

events:{“submit button”:”updateName”}

updataName:function(){

newName = $(this).val();  // this=button!

if(newName !== this.model.get(‘name’)){

this.model.set({name:newName}); }

else{ return;}

}

});

Well…it did work, but the problem is : should belong Model processing logic  put in the View now. So we reconstruct it.

var PersonView = Backbone.View.extend({

events:{“submit button”:”updateName”}

updateName:function(){

newName = $(this).val();

this.model.updateName(newName);

}

});

var Person = Backbone.Model.extend({

updateName: function(newName){

this.set({name:newName});

this.save(); // tell server to save the new name into database

}

})

2.The above, we pass the parameter value changes transferred to the Model, and then further processed by the Model it wants to do.

Now, the loop model like this:

Server <= (updated) model (proceed) <= (notification) view <= (user interaction) DOM

If the data model changes, how to notice the view? You might immediately think of the render method can be performed immediately after the completion notification view:

var PersonView = Backbone.View.extend({

updateName:function(){

newName = $(this).val();

this.model.updateName(newName);

this.render();

}

});

Ah good idea …… but it is not always useful, because the value of the model could be changed elsewhere, such as in another view . So, how to notify the specified view  response to the model changes?

So, use listenTo() function

var PersonView = Backbone.View.extend({

initialize:function(){

this.listenTo(this.model,”change”,this.render);

//this.model.on(“change”,this.render,this);

}

});

3. collection

a)Collect multiple model data

When there was more and more instances , in order to facilitate the processing of them, we usually think of them together with the array. Backbone.js Collection module provides a simplified way to help us:

var Person = Backbone.Collection.extend({ model:person });

var person.add{[{name:”Sandy Zhang”, id:1},{name:”Anna li”,id:2}]};

person.length //=>2

person.get(2) // => { name : “Anna li”,id:2}

person.at(0) //=>{ name:”Sandy Zhang”, id:1}

HTML5 Push State API

Backbone.history.start({pushState: true});

var App = new (Backbone.Router.extend({
initialize: function() {
this.person = new person();
this.personView = new personView({collection: this.person});
$(“#app”).append(this.personView.el);
},

index: function() {
this.person.fetch();
},

start: function() {
Backbone.history.start({pushState: true});
}
}));

$(function() { App.start(); });

Backbone Collection

run the code in the browse should look like

backbone3

here is the code for get the collection:

<script type=”text/javascript”>
Student = Backbone.Model.extend({
defaults:{
name:””,
age:””
}

});
ClassRoom = Backbone.Collection.extend({
model:Student
});

var student1 = new Student({name:”Sandy”,age:”20″});
var student2 = new Student({name:”Rachel”,age:”18″});
var student3 = new Student({name:”Anna”,age:”23″});
var collection = new ClassRoom([student1,student2,student3]);

</script>

Backbone – Router

On this post create 2 template,and use backbone router to communicate with those 2 pages, here is the code.

<script type=”text/template” id=”first_template”>
<label>My First View:</label>
<a href=”#second”>Go to Second View</a>

</script>

<script type=”text/template” id=”second_template”>
<label>My Second View:</label>
<a href=”#first”>Go to First View</a>

</script>

<div id = “container”></div>

<script type=”text/javascript”>
FirstView = Backbone.View.extend({
el:$(‘#container’),
initialize:function(){
this.render();
},

render:function(){
var template = _.template($(‘#first_template’).html(),{});

this.$el.html(template);

}

});

SecondView = Backbone.View.extend({
el:$(‘#container’),
initialize:function(){
this.render();
},

render:function(){
var template = _.template($(‘#second_template’).html(),{});

this.$el.html(template);

}

});

MyRouter = Backbone.Router.extend({
routes:{
“”:”firstPage”,
“first”:”firstPage”,
“second”:”secondPage”
},

firstPage:function(){
new FirstView();
},
secondPage:function(){
new SecondView();
}

});

var router = new MyRouter();
Backbone.history.start();

</script>

 

Backbone create a View

On this post just create a event and render it, and the event communicate with your html ID.

here is the code for your view, just put this in your body will work.

test on the browser should look like this.

backbone2

<script type=”text/template” id=”sample_template”>
<label>Name:</label>
<input type=”text” id=”name_desc”/>
<input type=”button” value=”Add Name” id=”btn”/>

</script>
<div id = “container”></div>
<script type=”text/javascript”>
Name = Backbone.View.extend({
el:$(‘#container’),
initialize:function(){
this.render();
},

render:function(){
var template = _.template($(‘#sample_template’).html(),{});

this.$el.html(template);

},
events:{
“click input[type=button]”: “addName”
},

addName:function(){
alert(“The name: “+$(‘#name_desc’).val() + ”  has been added”);
}
});

var name = new Name();
</script>

Here is the source code for your product solution

//execute search function
function filter(){    
    //get input value
    var q=document.getElementById(‘txtsearch’).value;
    
    var regex = new RegExp(q, ‘i’);// ignore uppercase
    //get #datasource’s table tr element from secont row, pecifies a function to run for each tr element.
    $(‘#datasource tr’).slice(1).each(function(i, tr){
        var tr = $(tr);
        var str = tr.text();//get  tr element text value
        //if statement to check whether the regex value equal than str value            
        if(regex.test(str)){
            tr.show();//show match tr elements
        }else{
            
            tr.hide();//hide not match  tr elements    
            
        }        
    });
}