ICanHaz Not detecting template - javascript

I've checked the other posts on this topic, but none of them match my problem. Here is the code for my template:
<script id ="postingcell" type="text/html">
<li class="postinglistcell">
<div class = "postinfowrapper">
<table class="centermargins">
<tr>
<td>
<div class="posttitle">{{Title}}</div>
</td>
</tr>
</table>
</div>
</li>
</script>
And here is the code where I call the ICH:
$(document).ready(function() {
var p = ich["postingcell"](thisobj);
});
I can get an error telling me that ich["postingcell"] is not defined, but it has been in the above script tag. Does anyone know what im doing wrong here?

ICanHaz also uses jQuery for setting up. One possible reason is your code runs before the ich.grabTemplates() call.
if (ich.$) {
ich.$(function () {
ich.grabTemplates();
});
}
You may try calling ich.grabTemplates() in your code:
$(document).ready(function() {
ich.grabTemplates();
var p = ich["postingcell"](thisobj);
});

Related

How to apply CSS for Ajax.ActionLink

hello i want to apply css for nav bar, i am retrivig nav bar values from database using Ajax.ActionLink, i tried javascript but i am getting error called
jQuery is not defined",
here is my code. and Test_Section is my Model.
<table style="width:auto">
#foreach (Test_Section p in Model)
{
<tr>
<td>
<div id="ajaxnav" class="navbar-left">
<ul class="nav nav-tabs nav-stacked">
<li>
#Ajax.ActionLink(p.SectionName, p.Title, new { id = p.StdSectionId , #class = "navigationLink"},
new AjaxOptions
{
UpdateTargetId = "getHtml",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
}, new { style = "color:#428bca" , #class = "navigationLink" })
</li>
</ul>
</div>
</td>
</tr>
}
</table>
<script type="text/javascript">
$('.navigationLink').click(function () {
$('.navigationLink').removeClass('active');
$(this).addClass('active');
});
</script>
Please help me.
You need to include jQuery to your application by referencing it in your page, because the Error jQuery is not defined or $ is not defined occurs when jQuery is not (correctly) included in your page.
You should add this line before the <script> section in your posted code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Hope this help you.
You need to use .click inside
$(document).ready(function(){//...onclick(...)})
But first make sure, you include jquery script file in your html.

document.getElementById(#mapid) returns null

referring to this question here, context is not defined javascript
I am just throwing out another question in regards of the error where document.getElementById is returning a null even though the template is already compiled.
A brief background, I am using handlebar template, jquery and I want a googlemap to appear in 1 of the handlebar template.
my html:
<script id="employee-tpl" type="text/x-handlebars-template">
<div class='header'>Back<h1>Gloop</h1></div>
<div class='details'>
<img class='employee-image' src='img/{{firstName}}_{{lastName}}.jpg' />
<h1>{{name}}</h1>
<h2>{{address}}</h2>
<h2>{{phone}}</h2>
<span class="location"></span>
<ul>
<li><div id="map-canvas"> </div></li>
</ul>
</div>
</script>
and my js
this.render = function(){
this.el.html(EmployeeView.template(employee));
console.log(document.getElementById("map-canvas"));
};
this.initialize = function(){
this.el=$('<div/>');
};
this.initialize();
}
EmployeeView.template = Handlebars.compile($("#employee-tpl").html());
notice that the call to console will log a null value and this js is called at the bottom of my html file
<script src="lib/iscroll.js"></script>
<script src="lib/handlebars.js"></script>
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="js/storage/cafe-memory-store.js"></script>
<script src="js/EmployeeView.js"></script>
<script src="js/main.js"></script>
</body>
</html>
my understanding it that the my compilation will render the div which then should be able to be seen but this is not the case. Anyone knows why?
Is that fiddle all the code you have? If I add this to the JS it works.. but it's hard to see what you're after.
var source = $("#employee-tpl").html();
var template = Handlebars.compile(source);
var data = { //your data here }
$('body').append(template(data));

Combine two jQuery functions new

Please help me to combine two scripts of jquery. AT the moment they are not compatible to each other. What can I do to make them both friendly.
Jquery:
<script>
function edit_product() {
var id = $('.DIVY.panel3').attr('id');
alert (id);
</script>
<script>
$(function(){
$('.DIVY').click(function(){
$('.DIVY.panel3').removeClass('panel3').addClass('panel2');
$(this).removeClass('panel2').addClass('panel3');
})
})
</script>
html:
<div id="1" class="DIVY panel2" >click me please!</div>
<div id="2" class="DIVY panel2" >click me please!</div>
<div id="3" class="DIVY panel3" >click me please!</div>
<div id="4" class="DIVY panel2" >click me please!</div>
<div >Check ID</div>
For better visualization, I put this code to My_jsfiddle
Thank you for your efforts!
Your code works on jsfiddle, just change the execution to No wrap - <in head> on the Frameworks & Extensions panel, see http://jsfiddle.net/IrvinDominin/CevcR/4/
But don't mix jQuery and inline js code if you can, you lose clarity in the code.
Assign an id to your anchor element like editMe and set its click function, your code can look like:
$(function () {
$('.DIVY').click(function () { // when a .myDiv is clicked
$('.DIVY.panel3').removeClass('panel3').addClass('panel2');
$(this).removeClass('panel2').addClass('panel3');
})
$('#editMe').click(function () { // when a .myDiv is clicked
var id = $('.DIVY.panel3').attr('id');
alert(id);
})
})
Demo: http://jsfiddle.net/IrvinDominin/CevcR/2/

resize two elements simultaneously using jquery/js

i have been trying to resize two windows simultaneously but for some reason it doesnt work.
i tried to catch errors but nothing.
Note: i dont want to use jquery resize since it doesnt have a fast inteval for checking resizes
JAVASCRIPT:
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directy with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
$(".data").each(function(){
var resizerint;
$(this).mousedown(function(){
try {
var eee = $(this);
var resizerint = setInterval(function(){
try {
_u( eee );
} catch(err){alert(err);}
},10); // i need it 10ms
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:red;"> mouse DOWN </font>');
}).mouseup(function(){
try{
clearInterval(resizerint);
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:green;"> mouse UP </font>');
});
});
});
and HTML:
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">ONEEEEE</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > ONEEE TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">TWOOOOOO</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > TWOOO TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="text"></div>
Thank you in advance for any help you can provide.
JSFIDDLE (IF YOU SEE , THE BLUE DOESNT RESIZE WHEN MOUSEDOWN at the TEXTAREA )
http://jsfiddle.net/2sfFW/
My first answer was that there was a missing "$" but it didn't fix the problem.
Got it working to some extent, but you have to click into the text field first before it will initialize. I used your blue version as a visualizer.
The proper jquery traversal is
e.parent().parent('.boss').find('.first')
or
e.parents('.boss').find('.first')
You have to use the plural version because there are two parent divs above it. Using parent().parent() is more specific but probably not necessary in this case.
http://jsfiddle.net/aQKVD/1/
If you remove the mouseup/mousedown handlers it will initialize at document.ready instead, which I think might be what you want. You don't necessarily need to do the clearing of the variable unless you have some other need for it, since .each() creates a separate instance of the function tied to the specific div in question. Here's a version like that:
http://jsfiddle.net/aQKVD/2/
Doesn't fix it in JSfiddle, but for starters you've left off a "$". I've set up a JSfiddle link so other people can try it. http://jsfiddle.net/aQKVD/
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directly with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
(".data").each(function(){
last line should be
$(".data").each(function(){

jQuery .hover() only working in FireFox

I need to add informational popups to several menu items, and Im using jQuery .hover to do so. However this only works in Firefox and does not work in Safari, Chrome or Opera.
var Main = function() {
//other functions...
function _setPopups() {
$(".dt_event_title a").hover(
function(){
$(".info_popup",this).css({"display":"block"});
//$(".info_popup",this).fadeTo("normal",1);
//$(".info_popup",this).fadeIn("normal");
//$(this).find(".info_popup").fadeIn("normal");
},
function(){
$(".info_popup",this).css({"display":"none"});
//$(".info_popup",this).fadeTo("normal",0);
//$(".info_popup",this).fadeOut("normal");
//$(this).find(".info_popup").fadeIn("normal");
}
);
}
return {
//other methods...
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
//other method calls...
Main.setPopups();
});
My other methods are working in the context so my closure is fine. The commented-out jQuery lines represent other transformations I tried that produced the same results: works in Firefox, but not others. I'm not sure what I could be doing wrong.
FYI the .info_popup div is given a css style display:none in an external style sheet to hide it.
Any help would be appreciated.
***Here is some of the html... note this represents the output, the html is largely generated by php
<tr class="dt_event_title">
<td>
<a class="dt_event_link" href="...php generated link...">
<span class="info_icon"></span>
<span class="event_title">Title of Event</span>
</a>
<div class="info_popup">
...some php generated content
</div>
<div class="dt_event_date">
09-15-2010 02:00 pm - 02:00 pm
</div>
</td>
</tr>
Ok Here is the latest rearrangement of my code. The HTML now looks like this:
<tr>
<td>
<div class="dt_event_title">
<a class="dt_event_link" href="php generated link">
<span class="info_icon"></span>
<span class="event_title">php generated title</span>
</a>
<div class="dt_event_date">php generated date</div>
<div class="info_popup">
<div class='popup_title'>php generated title</div>
<div class='popup_date'>php generated date</div>
<div class='popup_time'>php generated time</div>
<div class='popup_arrow'></div>
</div>
</div>
</td>
</tr>
And the javascript looks like this:
var Main = function() {
function _setPopups() {
$(".dt_event_title").hover(
function(){
$(".info_popup",$(this)).fadeIn("fast");
},
function(){
$(".info_popup",$(this)).fadeOut("fast");
}
);
}
return {
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
Main.setPopups();
});
And still the same problem.
(Edited to use your html)
Since you are specifying a selector context (adding ,this to your selector), the .info_popup element must be inside the this element. Notice how the info_popup div is inside the a element. I'm not sure that's what you want, but it matches your code. Since your info_popup is outside the a element, use $(this).parent() as your selector.
I tossed this into a jsFiddle for you. I am using it in Chrome and it works.
Code below also:
HTML
<table>
<tr class="dt_event_title">
<td>
<a class="dt_event_link" href="...php generated link...">
<span class="info_icon"></span>
<span class="event_title">Title of Event</span>
</a>
<div class="info_popup">
...some php generated content
</div>
<div class="dt_event_date">
09-15-2010 02:00 pm - 02:00 pm
</div>
</td>
</tr>
</table>​
CSS
.info_popup { display:none; }​
JS
var Main = function() {
//other functions...
function _setPopups() {
$(".dt_event_title a").hover(
function(){
$(".info_popup",$(this).parent()).show(); //switched to .show() and $(this).parent()
//$(".info_popup",this).fadeTo("normal",1);
//$(".info_popup",this).fadeIn("normal");
//$(this).find(".info_popup").fadeIn("normal");
},
function(){
$(".info_popup",$(this).parent()).hide(); //switched to .hide() and $(this).parent()
//$(".info_popup",this).fadeTo("normal",0);
//$(".info_popup",this).fadeOut("normal");
//$(this).find(".info_popup").fadeIn("normal");
}
);
}
return {
//other methods...
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
//other method calls...
Main.setPopups();
});​

Categories