//path = the location of the external file
//scriptBlockId = the id of the external script block (<script id="add-form-tempate" type="text/html-template">)
//fillId = where you want to place the template when rendered
var App = Backbone.View.extend({
render: function (path, scriptBlockId, fillId) {
$.ajax({
async: false,
dataType: 'html',
method: 'GET',
url: path,
success: function (response) {
//Not sure why we have to do this first, before we can select the script block?
var section = $('#main').append(response);
var templateString = $(section).find('#' + scriptBlockId).html();
var compiledTemplate = _.template(templateString);
var temp = compiledTemplate();
$(fillId).html(temp);
}
});
}
});
var app = new App();
app.render(window.siteRoot + 'Scripts/_test1.tmpl.html', 'add-form-template', '#main');
This code works! Why we have to append first I do not know...
You may have had an issue w/ the aysnc $.ajax.
var App = Backbone.View.extend({
render: function(path, scriptBlockId, fillId) {
var self = this;
$.ajax({
async: false,
dataType: 'html',
method: 'GET',
url: path,
success: function(response) {
var templateString = $(response).find(scriptBlockId)[0].innerHTML,
compildeTemplate = _.template(templateString),
temp = compildeTemplate();
$(fillId).html(temp);
}
});
return this;
}
});
var app = new App();
app.render(window.siteRoot + 'Scripts/_test1.tmpl.html', 'add-form-tempate', '#main');
I also tried to do what I think you're trying to accomplish by searching your HTML result for an id and pulling the content out of that script block.
Related
I just started to use ejs. Now, I want to pass data gotten from ajax result to two different div in ejs.
I can pass to a single div but for multiple divs, what change do I need in my code?
$.ajax({
type: "POST",
url: serviceurl + 'Get',
dataType: 'json',
crossDomain: true,
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "imagesrc": imagesrc }),
success: function (data) {
var property = JSON.parse(data.GetResult);
$('.insideContent>').remove() ;
$('.insideContent').addClass("insidecontentcss") ;
var str = $("#insidecontenttooldata").html();
var data = { tooldata: property };
var content = new EJS({ text: str }).render(data);
$(".insideContent").html(content);
var str1 = $("#well").html();
var data1 = { tooldata: property };
var content1 = new EJS({ text: str1 }).render(data);
$(".well").html(content);
}
and in ejs page i use two script like
<script id="insidecontenttooldata" type="text/x-ejs-template">
//// loop////
</script>
<script id="well" type="text/x-ejs-template">
///loop///
</script>
I guess you have error while targeting second template. Modify code as follows:
var str1 = $("#well").html(); //id of template is 'well' and not the 'welldata'
var data1 = { tooldata: property };
var content1 = new EJS({ text: str1 }).render(data1);
$(".well").html(content1);
Note: as suggested by #kristjan reinhold modified the code to use relative variables.
I am trying to call a function that when clicked goes to the controller (I am working on MVC project) but for some unknown reason the function does not get called. I have used this before with other buttons and grid selections and it used to work properly, can any one help with this question?
I have a bootstrap toggle button that is as follows:
<input id="toggle-event" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled ">
The function is as follows:
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
var nodeURL = document.getElementById("IDHolder").innerHTML;
var nodeConfig = nodeURL + ".CONFIG";
var nodeAdd = nodeURL + ".CONFIG.Enable";
var ListNodedetS = [];
var ListNodedetI = [];
var Listmet = [nodeConfig, nodeAdd];
var params = {
ListNodeDetailsString: ListNodedetS,
ListNodeDetailsInt: ListNodedetI,
ListMethod: Listmet
};
var temp = {
url: "/Configuration/CallMethod",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(params),
success: function (params) {
window.location.replace(params.redirect);
}
};
})
})
Controller part:
public bool CallMethod(List<string> ListNodeDetailsString, List<string> ListNodeDetailsInt, List<string> ListMethod)
{
var AddMethod = RxMUaClient.CallMethod(ListNodeDetailsString,ListNodeDetailsInt, ListMethod, "127.0.0.1:48030");
return AddMethod;
}
The ajax call was used before on different buttons and it worked normally, but now since it is called as an action of checking the bootstrap toggle it does not work.
The other jq that works:
$('#AddActivity').click(function () {
var nodeURL = document.getElementById("IDHolder").innerHTML;
var nodeName = $("#ActivityName").val();
var nodeType = $("#ActivityType").data("kendoComboBox").value();
var nodeConfig = nodeURL + ".CONFIG";
var nodeAdd = nodeURL + ".CONFIG.AddActivity";
var ListNodedetS = [nodeName];
var ListNodedetI = [nodeType];
var Listmet = [nodeConfig, nodeAdd];
var params = {
ListNodeDetailsString: ListNodedetS,
ListNodeDetailsInt: ListNodedetI,
ListMethod: Listmet
};
var temp = {
url: "/Configuration/CallMethod",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(params),
success: function (params) {
window.location.replace(params.redirect);
}
};
I'm new in Handsontable.
I want to call Handsontable's method such as getData or selectCell. I have already tried out what the documentation is saying but it doesn't work.
Below is my JavaScript (jQuery) code:
$(document).ready(function () {
var test;
$.ajax({
type: 'POST',
url: 'accounting/ajax/ajaxLoadForViewAccount.php',
datatype: 'script',
data: {
tbname:tbname
},
success: function (response) {
test = JSON.parse(response);
var data = new Array();
var headerName = new Array();
var i=0;
for(i=0;i<test.room_num.length;i++){
var obj = {room_num:test.room_num[i],rental_fee:test.rental_fee[i]};
data.push(obj);
headerName[i] = test.room_num[i];
}
var container = document.getElementById('example');
var hot;
hot = new Handsontable(container, {
data: data,
colWidths: [80, 80],
rowHeaders: headerName,
colHeaders: ['room_num','rental_fee']
});
},
error: function () {
alert('error');
}
});
$('#submit').click(function () {
$('#example').append("<p>Testtttttttttttttttttttttttttttttttttttttt</p>");
$('#example').handsontable('setDataAtCell',1,1,'10000');
alert('test');
});
});
According to my code, after I click the submit button the example div is appended with "Testtttttttttttttttttttt" that means $('example') selector should work fine. In addition the 'test' alert also appears. However the method setDataAtCell doesn't work.
Consider always using the hot instance variable to access the instance. In your case:
hot.setDataAtCell(1,1,'10000')
I'm trying to do an autocomplete to my textbox, but it doesn't work. Follow my code.
$(function () {
var credenciada = '<%= credenciadaId %>';
xml_NomeCompleto = "";
var Nomes = "";
var retorno = '';
var count = 0;
var t = '';
$.ajax({
url: "../Xml/AcessoExterno.aspx?Credenciada=" + credenciada,
type: "get",
dataType: 'xml',
async: false,
success: function (data) {
$(data).find("REGISTRO").each(function () {
t = $(this).find("NOMECOMPLETOUSUARIO").text();
Nomes += ["\"" + t + "\","];
});
}
});
$("#ctl00_contentConteudo_txtNome").autocomplete({ source: Nomes });
});
The variable 't' receives all the names of my users, normally, but the autocomplete don't work.
Wait for ajax response to complete and then initialize the autocomplete because before you initialize the plugin data is not available. Also the way you are creating Nomes(source) is wrong. Declare it as an array and use push method to populate it.
Try this
var Nomes = [];
$.ajax({
url: "../Xml/AcessoExterno.aspx?Credenciada=" + credenciada,
type: "get",
dataType: 'xml',
async: false,
success: function (data) {
$(data).find("REGISTRO").each(function () {
Nomes.push($(this).find("NOMECOMPLETOUSUARIO").text());
});
$("#ctl00_contentConteudo_txtNome").autocomplete({ source: Nomes });
}
});
I'm loading some data lively from the database and each row have some links that do some things over that.
They work flawlessly except for the last one I've implemented which seems not to be working on IE
$('.lockFile').click(function(){
var url = "functions/lock_call.php";
var unlock = 'assets/lock-unlock.png';
var lock = 'assets/lock.png';
var action = 'unlock';
var id = $(this).parent().parent().attr('id');
var image = $(this).children(0);
if (image.attr('src') == unlock)
action = 'lock';
var data = 'id='+id+'&action='+action;
$.ajax({
type: "POST",
url: url,
data: data,
cache: false,
success: function(){
alert (action);
if (action == 'lock')
image.attr('src', lock);
else
image.attr('src', unlock);
}
});
return false;
});
What could be wrong?
The alert is performer on "success" but nothing is made. That is, the script doesn't run.
IE 8 has some amazing variables reserved, try this one
$('.lockFile').click(function(){
var Aurl = "functions/lock_call.php";
var AunAlock = 'assets/lock-unlock.png';
var Alock = 'assets/lock.png';
var Aaction = 'AunAlock';
var Aid = $(this).parent().parent().attr('id');
var Aimage = $(this).children(0);
if (image.attr('src') == AunAlock)
Aaction = 'Alock';
var data = 'id='+Aid+'&action='+Aaction;
$.ajax({
type: "POST",
url: Aurl,
data: data,
cache: false,
success: function(){
alert (Aaction);
if (Aaction == 'lock')
Aimage.attr('src', Alock);
else
Aimage.attr('src', AunAlock);
}
});
return false;
});
try to declare data in JSON format
var data = {'id':id, 'action': action}