I tried to apply a zebra strip with an ajax loaded table but it's not work. I tried googling some suggestion over the net but no luck. Here's my code:
CSS:
<style>
.odd{background:#eeeeee}
</style>
Javascript:
<script src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
});
//supplier ajax viewer
$(document).ready(function(stripTable) {
$("#supplier_viewer").load("inc/stock_view.php");
$('tr:odd',this).addClass("odd");
var refreshId = setInterval(function() {
$("#supplier_viewer").load('inc/stock_view.php?randval='+ Math.random());
}, 10000);
$('tr:odd',this).addClass("odd");
$.ajaxSetup({ cache: false });
});
</script>
And this is where the table is loaded.
HTML:
<div id="supplier_view"></div>
I've tried to add
$('tr:even',this).addClass("even");
to the load stage but not work. Please suggest.
You are applying the classes to the element before they are actually loaded.
Try applying these classes when the loaded event is fired.
I would also recommend to use FireBug to view the generated html and see if the classes are really applied to the dynamically loaded data. (which I highly suspect not)
Once the data is loaded, you need to execute these two lines
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
But only after the data has been loaded to the div
Related
so I'm working on my Tumblr Theme right now. I'm using Masonry to have all my posts in a 5-column grid and the infinite scroll script to load new images into the grid when I'm scrolling down. Unfortunately, most of the time as I scroll down images are overlapping. I figured out that the problem may be Masonry triggering before the images are loaded, but right now I have no idea how to fix this. I'm already using (window).load instead of (document).ready but the pictures keep overlapping nonetheless. Here's the full code snippet:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js">
</script>
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('.posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 11000,
loadingImg : "",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
<script type="text/javascript">$(window).load(function(){$("p").remove(":contains('Source:')");});</script>
Does anyone have an idea on how to get it working? Any help would be appreciated!
Masonry is placing the items absolutely before your images have loaded and take more space.
Utilize Jquery imagesLoaded to overcome this. You may want to initially hide your elements and then show them after they have finished loading. Try something like this:
//Wire masonry onto the photolist with whatever defaults you need
$photolist.imagesLoaded(function () {
$photolist.masonry({
// options
itemSelector: '.photo',
columnWidth: 226,
isFitWidth: true,
gutterWidth: 12
});
});
I have a form which populates div elements based on selections from a select box using an AJAX call.
The content of the populated div is a multiselect box that I want Chosen to apply to. Unfortunately it seems that the 'chzn-select' is not firing, no doubt due to this being pulled in dynamically.
I have added this:
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
To the bottom of the code that is pulled in by AJAX, but it is still not firing. Any ideas on how to make this work as desired?
Solved myself. Will post for future reference. I put the Chosen calls in their own function on my original page that calls the AJAX:
<script type="text/javascript">
function doChosen() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
}
</script>
And in the AJAX script itself, I added a call to the function after the responseText part:
document.getElementById(div).innerHTML=oXmlHttp.responseText
doChosen();
instead of using chosen(), try change() method. It works on change event.
try:
$(".chzn-select").change(function () {
var str = "";
$("select option:selected").each(function () {
// do your coding here
});
})
.trigger('change');
I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the "Title" tag.
Here is the code i am using to invoke TipTip
<script type="text/javascript" src="jquery.tipTip.js"></script>
<!-- ToolTip script -->
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});
</script>
<!-- End ToolTip script -->
and in the body
sample content. sample,stuff.
This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.
<script type="text/javascript">
//loading sample ajax data
$(document).ready(function(){
$('#remote').load('sample.html');
});
</script>
Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.
Could someone please advise me?
An easy solution would be to create a function that activates TipTip:
function activateTipTip() {
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}
$(document).ready(function(){
activateTipTip();
$('#remote').load('sample.html', function() {
activateTipTip();
});
});
Not very elegant, but should work though.
This code will make it so that any link that has a title attribute will have TipTip's functionality applied to it:
$('a[title]').live('mouseover', function()
{
$(this).tipTip({
delay: 200,
maxWidth: '400px'
});
$(this).trigger('mouseenter');
});
Source: https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live
This is my solution for this problem:
$(ElementParent).on('mouseover', YourElementSelector, function()
{
if($(this).data('hasTipTip') !== true)
{
$(this).tipTip(TipTipOptions);
$(this).data('hasTipTip', true);
$(this).trigger('mouseover');
}
});
How can i catch the "onblur" event of my htmlbox textarea?
I want to be able to get the htmlbox content when it's onblur..
Thank's In Advance.
Try this code, it loops waiting 1 second until htmlbox creates the iframe, then it adds a .blur handler to the iframe, I found out the iframe's id by using IE8's Developer Tools, by clicking on the arrow icon in the developer tools and clicking the box you can see how HTML looks after the page loads and javascript processed. if($("iframe").length) is true then then htmlbox has created the iframe and you can attach the .blur event handler.
<script type="text/javascript">
$(function(){
var check = function(){
if($("iframe").length){
$("#hb_html").blur(function(){
alert('Blur has occurred!');
});
} else {
setTimeout(check, 1000)
}
}
setTimeout(check, 1000)
});
</script>
This example demonstrates:
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bar").blur(function(){
$(this).text("I have been blurred.");
});
});
</script>
<textarea id='bar'>foo</textarea>
Make sure the file jquery-1.5.min.js is in the same folder IF you use the example above.
You can read up on the .blur event at http://api.jquery.com/blur/
It receives a function as an argument and executes it when it becomes blurred.
I have a Kohana framework which is building ExtJS objects in one view, which in turn loads (via JQuery AJAX) other views inside of it with a this function:
function replaceContentOnClick(id, route) {
$('body').delegate(('#' + id), 'click', function(){
$.get(route, function(data) {
$('#region_center .x-panel-body').html(data);
});
});
}
This is working fine but only when these child views are merely HTML/Javascript/JQuery, but in the child views I cannot get any ExtJS objects to display, even if I render them to DOM elements that exist and to which I can successfully append JQuery elements. It is as if the DOM doesn't exist for ExtJS at that moment.
The main problem is: the JQuery code successfully fills the element:
<script type="text/javascript">
$('#region_center .x-panel-body').html('this is from jquery...');
</script>
but the ExtJS code fails to fill the same element (an there is no error reported in Firebug/Net panel):
<script type="text/javascript">
var region_center = new Ext.Panel({
id: 'region_center',
region: 'center',
renderTo: '#region_center .x-panel-body',
margins:'10 10 10 10',
padding:'10 10 10 10',
autoScroll:true,
html: 'this is from ExtJS...'
});
</script>
What do I have to do so that ExtJS can access the DOM element as JQuery can?
These two bits of code are doing different things. This code:
<script type="text/javascript">
$('#region_center .x-panel-body').html('this is from jquery...');
</script>
...is accessing the DOM node at '#region_center .x-panel-body' and injecting a new innerHTML value. This code:
<script type="text/javascript">
var region_center = new Ext.Panel({
id: 'region_center',
region: 'center',
renderTo: '#region_center .x-panel-body',
margins:'10 10 10 10',
padding:'10 10 10 10',
autoScroll:true,
html: 'this is from ExtJS...'
});
</script>
...is attempting to render a complete Panel component into itself (i.e., the renderTo config is pointing at the panel with id 'region_center', which is the panel itself). This makes no sense and will not work. You can only render components to an existing DOM node -- in this example, there is no existing DOM node with id 'region_center' because the panel is not yet (and cannot be) rendered.
The equivalent code to do exactly what you're doing in jQuery would be this:
<script type="text/javascript">
Ext.get('#region_center').child('.x-panel-body').update('this is from Ext...');
</script>
Assuming all things are equal in the DOM when this is run, it should execute exactly like your jQuery code.
Now, assuming that your BorderLayout is properly rendered, and it in fact has a center region with id 'region_center', you should be able to add a new panel into it dynamically (make sure the new panel's id is unique). Note that it would be preferable to go through the Component API (instead of the DOM API) to do this as layout will be managed for you in that case. E.g., you'd want to do something like:
// assuming myCenterPanel is a valid *component* ref (NOT a DOM element):
myCenterPanel.add(new Ext.Panel(...));
myCenterPanel.doLayout();
You'd also want to ensure that the center panel has an appropriate layout assigned (via the layout config). If you simply render the new panel directly to the underlying DOM node instead (as you're trying to do above), it may work, but in the long term will probably cause you other issues (again, since you are bypassing Ext's layout manager in that case).