I am using MVC to render a View.
The view has a single DIV element and a SCRIPT element.
The SCRIPT element has a simple alert('hello world').
When the view is rendered I expected to see the alert popup. Unfortunately this is NOT the case.
What can be done to invoke a script function after a View is rendered?
View.cshtml:
<div id="hello"></div>
<script type="text/javascript">
alert('Hello World!');
$('#hello').html('Hello world.');
</script>
* Updated *
My serious apologies. I found the issue. The problem was that within my script section I was setting an innerHTML without wrapping the string text with quotes. I guess this caused the browser to be confused and just silently crash. I found this out, by happenstance/luck, when I was looking at the debugging console (F12).
Place below line of code inside $(document).ready();
$( document ).ready(function() {
alert('Hello World!');
$('#hello').html('Hello world.');
});
Try this:
$(function()
{
alert("Hello world!");
$("#hello").html("Hello world.");
});
Related
I have this at the bottom of a form partial, which worked previously when I loaded it through application.html.erb, but have since decided to replace it in application.html.erb with Google Maps.
_new.html.erb (with the field appropriately id'd). straight up doesn't work, can't figure out why.
<script>
$(document).ready(function(){
var autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"));
});
function initAutocomplete(){
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs&libraries=places&callback=initAutocomplete"
async defer></script>
Try moving
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFm7OzAKuPbEa48b_aZ4S6JqMGVUCwwFs&libraries=places&callback=initAutocomplete"
async defer></script>
to the in application.html.erb head tag
Then put
initAutocomplete = ->
$(document).ready ->
autocomplete = new (google.maps.places.Autocomplete)(document.getElementById('autocomplete'))
return
Into a coffeescript for you front page, or use your existing script inline of the partial to test if you need to.
Problem: When I activate jQueryUI tooltip it prevents another script on the page from working.
Description: I have a floating button on a page:
<div id="buttonTOC">
Table Of Contents
</div><!-- End button <div> -->
This is used by the following script to open a hidden div:
jQuery(document).ready(function($){
$("div#buttonTOC").click(function() {
$("div#table-of-contents").animate({height:'toggle'},500);
});
});
This works correctly but if I add a script to use tooltips then it stops functioning and nothing happens on click. The tooltip does work as expected.
I've tried some experiments to get this working including the following attempt to disable 'tooltip' on the div in question but this doesn't make any difference.
jQuery(function($) {
$( 'a#buttonText' ).tooltip({
track: true
});
$('#buttonTOC *[title]').tooltip('disable');
});
I would suspect a conflict between the scripts but then again I assume that something like a tooltip would be able to work regardless of the presence of other scripts.
I'd appreciate any guidance on how to implement this successfully.
Thanks
Your code has a typo:
$( 'p#buttonText' ).tooltip({
track: true
});
It should be a#buttonText, not p
Aside from that, there seems to be no problem with the script.
Note: JS/Jquery noob alert (yes, me)
There seems to be a conflict between the following two plugins:
TableSorter (2.9.1)
bootstrap-popover.js v2.2.1
The plugins work as they should separately, but when together, the popovers don't work. I've tried moving the calls to the popover script (and its initialization) before any other plugins, but no dice. I have a feeling the tablesorter script is somehow removing the titles from the DOM (another subject I know little about) before the popover script can load, but no dice.
In my HTML
<script src="../../js/jquery-1.8.2.min.js"></script>
<script src="../../js/jquery.tablesorter.js"></script>
<script src="../../js/jquery.tablesorter.pager.js"></script>
<script src="../../js/tooltips-popovers.js"></script>
<script>
$(function(){
$("#stats").tablesorter();
});
</script>
<script>
$("a[rel=popover]").popover({html:true,trigger:'hover'});
</script>
<script> /* Initiate pager */
$(function(){
var pagerOptions = {
container: $(".pager"),
};
$("table")
.tablesorterPager(pagerOptions);
});
</script>
Make sure you are initializing the popover script within a document ready event.
$(function(){
$("a[rel=popover]").popover({html:true,trigger:'hover'});
$("#stats")
.tablesorter()
.tablesorterPager({
container: $(".pager")
})
});
If that doesn't work, I can only guess that the popover links are inside the table? If so, they are added and removed dynamically, when sorting the table, so they might need to be added through a delegated event, the code above may not work in that case.
Update: As stated, the popup links are within the th, which I assume are in the thead? If so, try this code:
$(function(){
$("#stats")
.tablesorter({
initialized: function(table){
$("a[rel=popover]").popover({html:true,trigger:'hover'});
}
})
.tablesorterPager({
container: $(".pager")
})
});
I have jQuery UI tabs set up, but a problem that I'm having with links to different pages is that they load all contents of the page into the tab. This includes the footer, header, and other navbars that I don't want in the tab. What if I would only like to load a single ID from that page?
My tabs are set up this way:
<div id="mytabs">
<ul>
<li>Awesome page</li>
<li>Foo</li>
</ul>
</div>
Nothing much going on in the jQuery...
$(function() {
$( "#mytabs" ).tabs();
});
Let's say this is the html of "awesomepage" (that the first link targets):
<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>
...And I only want the tab to load #awesomeness from the page. How would I go about doing this? I've read into some guides that do that by adding a data-target="#youridhere" attribute to the HTML, but I'm still confused on how to implement the javascript. It seems like this is a convenient solution, as I won't be targeting the same ID in every page. Any clues on how to get the javascript working?
Thanks in advance!
The function that allow to load partial code of the response is the $.load() function.
Unfortunately, the tabs() feature does not use this function but use $.ajax instead.
You can try this solution:
You can try to stop the default processing on the beforeLoad callback and manage your ajax call with the $.load() method.
(base on the 1.9 documentation, you may should adapt)
$('#tabs').tabs({
// Callback run when selecting a tab
beforeLoad: function(event, ui) {
// If the panel is already populated do nothing
if (ui.panel.children().size() > 0)
return false;
// Make your own ajax load (with fragment feature)
ui.panel.load(ui.tab.attr('href') + ' #yourFragment');
// stop the default process (default ajax call should not be launched)
return false;
});
NOTICE: I'm not sure about extracting the URL with ui.tab.attr('href'), check before what object is ui.tab, but it should be easy to retrieve the href parameter.
Good luck
Got the solution :) Using one of the answers as a reference point, the tabs can now load a single element specified in the data-target attribute. Here is the modified version:
$(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});
I am trying to use quickSearch from http://lomalogue.com/jquery/quicksearch/ website. I don't know how to hook to the table so I hoping someone could be kind enough to help me here. I am using VS 2010 MVC 3, in C#, ADO.NET. Thanks in advance. I had a look at related question on the website, if there is a technical gitch? Is there alternative solution? Thanks in advance.
View file Index.cshtml looks like this...
Edited
<script type="text/javascript">
$(function () {
$("table.tablesorter").tablesorter({ widthFixed: true, widgets: ['zebra'],
sortList: [[0, 0]] })
.tablesorterPager({ container: $("#pager"), size: $(".pagesize
option:selected").val() });
});
</script>
<script type="text/javascript">
$(function ()
{
$('input#search').quicksearch('table tbody tr', {selector:'th'});
}
);
</script>
</p>
<table class="tablesorter">
Also it could solve any code organisation problems if you are to wrap the JQuery statement in this
$(document).ready(function() {
$('input#search').quicksearch('table tbody tr', { selector: 'th' });
});
Also the table quick search plugin i use is JQuery table search plugin, it works well and if you just take a quick look at the demo it is rather easy to implement and does not clash with most other JQuery table plugins.
While I haven't used QuickSearch before, and I'm not sure if it'll solve all of your problems, but as a start it appears that you've put your first script element too early in your document.
You need to put it after the other script elements.
this:
<script type="text/javascript">
$('input#search').quicksearch('table tbody tr', { selector: 'th' });
</script>
should appear after the the jquery script, and the quicksearch script elements. If you include it before, the browser doesn't know what $ and $(selector).quicksearch is.
btw: this:'input#search' selector is not needed.
you can use the #search selector to same effect, becuase searching by id is a one command in JS.