So I'm using http://code.drewwilson.com/entry/tiptip-jquery-plugin for tool tips in my app.
When a page loads, it works great. If I load a new page through ajax, the tool tipz on the new page simply don't show up.
Any ideas for what could be breaking something like this?
When you say this:
$(".someClass").tipTip();
To bind the tooltips to some elements, that executes immediately and only pays attention to the elements that are currently on the page. If you load some new elements through an AJAX call, you'll have to bind tipTip to everything in the new HTML. Whatever AJAX calls you're using should have a success callback, you can supply a callback that will re-do the .tipTip() call on the new HTML as you insert it into the page.
Rails uses prototype by default currently so anything that uses jQuery, unless you use a gem requires this:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
I assume you're using the $( syntax... so just replace $( with jQuery( and call jQuery.noConflict(); at the beginning of the plugin.
Hope this helps.
Related
I have a Partial page in which I am loading div elements. I want to call a JavaScript function when each div is loaded in my partial view.
<p class="m-0" onload="markMessageAsDelivered('#item.isDelivered')">#item.Message</p>
This is the function I have in my JS in my razor page.
function markChatAsDelivered(isDelivered) {
if (!isDelivered)
alert('markChatAsDelivered');
}
This function is not getting called. I tried to put it in windows onload as well but still it is not working. Please let me know what can be done?
The problem I've had with these things is that onload is called before ASP.NET makes its changes to the page. There's two solutions I use:
$(document).ready() with JQuery waits until the DOM is fully loaded and done, so you can migrate some code into there.
function pageLoad(sender, args) is a built-in ASP JS function (like Page_Load in your code behind) that gets called when the page is done being loaded. You can migrate some JS into here like the first answer.
Personally, even though I like to avoid libraries, I like the first option because you can use more than one per page. This is only really useful if you're calling code in your master page though. The second option is good if you only use it once per page, but obviously if you try to use it in both your master page and current page, it won't work properly. So I'd recommend JQuery, but if you must avoid it, pageLoad works too.
I am currently trying to implement an on-click search event, using Simple-Jekyll-Search on a page with SmoothState.
After following the suggestion written in this question: How do you simulate a button press in Javascript, to trigger searching in Simple-Jekyll-Search, and adding the following snippet to the library, it appears the onClick event no longer triggers a the search event after SmoothState loads a new page.
$('#yourbutton').click(function(){
render( searcher.search(store, opt.searchInput.value) );
})
Any suggestions would be appreciated.
There's a section in the FAQ section of the README that might help. Here's the excerpt:
Help! My $(document).ready() plugins work fine when I refresh but
break on the second page load.
smoothState.js provides the onAfter
callback function that allows you to re-run your plugins. This can be
tricky if you're unfamiliar with how AJAX works.
When you run a plugin on $(document).ready(), it's going to register
only on elements that are currently on the page. Since we're injecting
new elements every load, we need to run the plugins again, scoping it
to just the new stuff.
A good way to do this is to wrap your plugin initializations in a
function that we call on both $.fn.ready() and onAfter. You'll want to
specify the context each time you initialize the plugins so that you
don't double-bind them. This is called a "module execution
controller".
I have an Ajax call, that returns some HTML code. In this returned code, I have several dropdown boxes that use the select2 JavaScript library among many others (company libraries, custom libraries, etc.)
Now, none of the libraries seems to work at all in the content retrieved from the Ajax call.
A solution to a similar problem can be solved by using the jQuery delegate method (according to other questions made), but in this case I cannot simply go into the select2 library (nor inside all the other ones for that matter) and replace everything with delegate.
What solutions can I implement in order to make the libraries work on the returned ajax content?
If you are loading html into the page via AJAX you will need to run the initialization function on the new html:
//from the docs
$('select').select2();
If you are using jQuery.load you can do it like this:
//load the html into #result
$( "#result" ).load( "demo.html", function() {
//now use 'this' in the selection to search the new html and init select2
$('select',this).select2();
});
alternatively, to use delegate, you wait until after a click (or a custom event) and then initialize select2 again but I don't think you need to do that in this case.
I have an application that uses jQuery and pjax (standalone). We're trying to experiment to see if we can use the possibly more flexible and smaller npm pjax over jquery-pjax.
One of my functions sets the html of a div after loading data, and this html includes links that we want as pjax links, for example $('#link-container').html('<a href="/account_detail.html?='+account.id+'" data-pjax >'). However clicking on this link causes a full page reload rather than a pjax request.
Is there a way to reimplement pjax? When I try new PJAX({elements:[a[data-pjax]]}) inside the pjax:success call (whenDOMReady from the project page - https://www.npmjs.org/package/pjax) it uses pjax... but then loads resources twice.
Perhaps the best solution is going with jquery-pjax ($(document).pjax(a[data-pjax] etc.) but I wanted to see if anyone has come across this type of issue before. Perhaps it is rare to include jQuery and non-jQuery pjax, but it seems like this can happen for any asynchronous data query and DOM modification, and I just want to re-PJAX.
I'm using jquery-pjax, and when you use it or configure it wrong - it also refresh the page, so you're experiencing one of the issues I've encountered.
In any way, I'm not sure if it will help your problem or not, but I suggest everyone to use Firefox with Firebug and in the "Console" tab to click on "Persist" you usually find some errors there that might be helpful, and since errors somewhere might cause the page to refresh - sometime you miss it as the console is being refreshed too.
What I learned is that you need to make sure that when you write:
<a href="/account_detail.html?=2" data-pjax>bla</a>
You need to have a container - that PJAX drops the content into, like:
<div id="pjax-container"></div>
And initially you configure PJAX to bind these objects:
<script>
// this is how I define it in jquery-pjax, so adjust it as you use it.
$(document).pjax('a[data-pjax]', '#pjax-container');
</script>
so the key points that I learned that causes refresh with PJAX:
I'm sending a header twice ( back-end code )
The container was suddenly removed from the HTML body ( the div id="pjax-container" ) and when the DOM is missing it doesn't have a
place to drop the HTML - so it just refresh the page.
When I initially bind the a[data-pjax] with jQuery, new DOM object are not automatically re-bind by jQuery ( unless using "live/on"), therefor they act as a regular <a> tag and reload the page with the new URL.
some JS/PJAX syntax error
In your case, if the pjax-container is "#link-container" I'm not sure if it's a good idea to place the tags inside it.
I have some code that uses jQuery and it's in the html. I include jQuery at the bottom of the page so the problem is that every use of $. is undefined.
I remember reading somewhere that you can create a holder $ function and when the jQuery get loaded it will execute everything that called $. (like some sort of a stack).
Can you please tell me how to do this? Like with a code example or if you have that article link it will be great. :)
No, you can't make a whole bunch of jQuery calls before it's loaded and then expect something later on to play back everything.
Your choices are:
Load jQuery before things that use it.
Don't use any jQuery calls until after the page and jQuery are loaded.
Create your own list of initialization functions that you want called after jQuery is loaded and register those callbacks as the page is loading. Then, have your own function that walks that list of initialization functions and calls them all once jQuery is loaded to kick of the initialization that uses jQuery.
But, #3 seems like a lot of work that isn't really necessary. Either load jQuery up front or don't run your initialization functions that use jQuery until after it is loaded - either is cleaner and simpler.
Keep in mind that you also need to load any jQuery plugins after jQuery is loaded because they use jQuery to initialize/install themselves.
Make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.
It could be that you have your script tag called before the jquery script is called
place the jquery.js before your script tag and it will work