We Keep Coding

The button that I have in the datatable does not work on the second page

Below are my codes I'm using currently. Can someone help as this is important.
$("#btn" + arr[i].numberID).on("click", { id: arr[i].numberID }, function (event) {
var data = event.data;
getdet(data.id);
});
function getdet(numberID) {
window.location = "order.html?numberID=" + numberID;
}

I am not sure about this, but I think your issue is that the click event listener is not binding to the buttons in the other pages(the reason being that the buttons are dynamically generated when you change pages). This article explains the problem: Event binding on dynamically created elements?.
Try if this works:
$(document).on("click", "#btn" + arr[i].numberID, { id: arr[i].numberID }, function (event) {
var data = event.data;
getdet(data.id);
});
function getdet(numberID) {
window.location = "order.html?numberID=" + numberID;
}
Hope this helps.

jQuery - Trigger a function

I am trying to trigger a function from a html file that is located in another function in js file. I am trying to use the trigger method but i cannot make it to work.
Any suggestions how to do this? FIDDLE
<div id="result4" style="color:white; background:black">
from function
</div>
<script>
var TEST = new test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.trigger('reset');
</script>
JS
function test(args) {
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
}

Looking at the console log, your fiddle has an error:
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
$this is not defined.
and looking at the documentation for trigger:
http://api.jquery.com/trigger/
you are invoking it wrong. You are creating your own object that does not have a trigger method.

You need to define $this and return it as the object for test since trigger is a jquery function and not a native JavaScript Object function.
function test(args) {
var $this = $(this); // declare $this
var default_options = {
breakingPoint: 2000
};
var options = $.extend({}, default_options, args);
$("#result1").html(options.type);
$("#result2").html(options.file);
$("#result3").html(options.breakingPoint);
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
return $this;
}
var TEST = new test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.trigger('reset');

Wrap you tag code in jquerys ready event. This will execute it once the DOM is loaded instead of as it is parsed.
Maybe this is what you're looking for:
<script>
$(document).ready(function(){
var TEST = test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.reset();
});
</script>
In JS File
var test = function(options){
var that = {};
// you can use type, file & breaking point with option.type options.file etc..
that.reset = function() {
$("#result4").html("new text");
console.log("OK");
};
return that;
};

$ is not defined, but only on $(function())

In my MVC partial view, the below does not fire:
$(function() {
alert('test');
});
The console reports that '$ is not defined.', which seems like jQuery is not referenced in the page.
However, in the same script block, I have other jQuery functions that work perfectly, so this problem seems isolated to just the $(function()) or $( document ).ready() on-load functions.
Here's the complete script block in the partial view:
<script type="text/javascript">
$(function () {
debugger;
alert('hi');
});
function updatePaymentTypes() {
$("#paymentTypes").empty();
$('#paymentTypes').append($('<option></option>').val("").html("- Please Select -"));
var getVoucherPaymentTypesUrl = "#Url.Action("getVoucherPaymentTypes", "Supplier", new { id = Model.Supplier.Id, area = "Configurations" })";
$.post(getVoucherPaymentTypesUrl, { "voucherPaymentMethodId": $("#paymentMethods").val() },
function (data) {
for (i = 0; i < data.length; i++) {
var paymentType = data[i];
$('#paymentTypes').append($('<option></option>').val(paymentType.Id).html(paymentType.Name));
}
// Force event
paymentTypeSelected();
});
}
function paymentTypeSelected() {
var getCardDetailsViewUrl = "#Url.Action("getVoucherCardDetailsView", "Supplier", new { id = Model.Supplier.Id, area = "Configurations" })";
$.post(getCardDetailsViewUrl, { "voucherPaymentTypeId": $("#paymentTypes").val() },
function (data) {
$("#cardDetailsView").html(data);
}).fail(function (error) {
debugger;
});
}
</script>
The partial view is being rendered within a jQuery Accordion div, and all jQuery functions in the parent view, including the $(function()) events all fire normally.
What could be wrong?

As most people pointed out in the comments, the problem is that the partial view is loaded before the script reference to jQuery.js has been rendered.
Make sure the script reference to jQuery is added on the top of the main view.

How to call a method from controller more once time? AJAX

Sorry if the question is really dumb, however, I couldn't find how to solve it.
I have a very simple methid in a controller:
public string ExactSeconds()
{
string str = DateTime.Now.Second.ToString();
return str;
}
The view is simpler than the method:
<p id="rData"></p>
<p id="qqqqq">click me!</p>
JavaScriptCode:
<script type="text/javascript">
$(document).ready(function () {
$('#qqqqq').click(function () {
alert('');
var url = "/Home/ExactSeconds";
$.get(url, null, function (data) {
$("#rData").html(data);
});
});
});
});
However, When I click at id="qqqqq", then it just uploads data(seconds) just for the first time. Then if I click the second time and the next times, then alert('') works perfectly, however it is not called method ExactSeconds, that is I cannot see updated seconds at the view.
How to call method ExactSeconds() always when I click at #qqqqq?

When I remove your AJAX calls, this works fine.
$(document).ready(function () {
$('#qqqqq').click(function () {
alert('');
$("#rData").html(Date.now);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="rData"></p>
<p id="qqqqq">click me!</p>
Secondly, why do you have nested one AJAX get call inside another. How about just one call?
$(document).ready(function () {
$('#qqqqq').click(function () {
alert('');
var url = "/Home/ProverbPartialView";
$.get(url, null, function (data) {
$("#rData").html(data);
});
});
});

<script type="text/javascript">
$(document).ready(function () {
$('#qqqqq').click(function () {
alert('');
var url = "/Home/ProverbPartialView";
$.get(url, null, function (data) {
$.get(url, null, function (data) {
$("#rData").empty();
$("#rData").html(data);
});
});
});
});
Try this by adding $("#rData")..empty(); in the code

Events in Backbone.js

Can u help with the click event?? here is my code.
$(function() {
var Trainee = Backbone.Model.extend();
var TraineeColl = Backbone.Collection.extend({
model: Trainee,
url: 'name.json'
});
var TraineeView = Backbone.View.extend({
el: "#area",
template: _.template($('#areaTemplate').html()),
render: function() {
this.model.each(function(trainee){
var areaTemplate = this.template(trainee.toJSON());
$(this.el).append(areaTemplate);
},this);
return this;
}
});
var trainee = new TraineeColl();
var traineeView = new TraineeView({model: trainee});
trainee.fetch();
trainee.bind('reset', function () {
traineeView.render();
});
});
my o/p after(trainee.toJSON) is
Sinduja
E808514
HPS
Shalini
E808130
HBS
Priya
E808515
HSG
Everything is fine with the o/p...
Now i want to get this o/p oly after a button click....

Simply add an event to that button. Since you're using jQuery, that should be simple :
$(function () {
$("#your_button_id").on("click", function (e) {
e.preventDefault();
// your code here
});
});

I don't understand what the o/p is...
Anyway, you can do something like that :
trainee.bind('reset', function () {
$('button').click(function() {
traineeView.render();
});
});
with the proper jQuery selector $('button') for your button...