<script>
var 박스 = document.getElementById("Box");
박스.addEventListener("click", function() {
console.log(박스)
});
</script>
I used that code but it doesn't work.
Though, I try changing the punctuation from '.' to colon before addEventListener.
Now the code is working..
What is the problem?...
I expected that clicking event can leave the trace on colsole tab.
But I failed to see the code working.
Related
I'm having trouble to find the correct way to do this. In my landing page I got a inner link like this:
Destacados
When I click on it, the page go to the #destacados id, but all the javascript stop working, so the carrusel just dies. I'm not sure if this can help, but when I click the link, the address bar change to /myapp/#destacados ... may be it has trouble routing that... any idea??
Thanks
Can you show how you are binding the click event to your <a> ?
Just tested with JQuery (could be without)
<a href='#destacados'>Go To Destacados Section</a>
<script>
$(function () {
$("a[href='#destacados']").click( function () { console.log('clicked'); });
});
</script>
The focus goes to the anchor and clicked is printed
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.");
});
I have a JQM apps and I am incorporating Backbone.
Since my initial javascript code is huge, I am only extracting what I believe is problematic.
I am following the advices and calls steps cited here:
jqm-config.js from http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
http://jquerymobile.com/test/docs/pages/backbone-require.html
I have a major problem, and this is the behaviour, the problem comes from this code:
var r = Backbone.Router.extend
router: ...
"page": "pageDisplay"
...
pageDisplay: function(){
c = new AView(); // Backbone.View ...fetch() data...
$(c.el).page(); // Call to JQM to add its extra stuff; seems done correctly
$.mobile.changePage( "#" + c.id, {changeHash: false}); // line 50
}
When following the links of <a href="#page" >, I come as expected to the
page "#page" properly processed. But once there, if I click a refresh, which is indirectly reprocessed by the same router rule, I end up with the following error:
Uncaught TypeError: Cannot call method 'trigger' of undefined
I downloaded the jquery mobile development code and observed this:
// JQM1.1.2 - Line #3772 Show a specific page in the page container.
$.mobile.changePage = function( toPage, options ) {
if ( isPageTransitioning ) {
pageTransitionQueue.unshift(arguments );
return;
}
var settings = $.extend( {}, $.mobile.changePage.defaults, options);
// Make sure we have a pageContainer to work with.
settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
// Make sure we have a fromPage.
settings.fromPage = settings.fromPage || $.mobile.activePage;
// Line #3788
var mpc = settings.pageContainer, // Line #3789
pbcEvent = new $.Event("pagebeforechange" ),
triggerData = { toPage: toPage, options: settings };
// Let listeners know we're about to change the current page.
mpc.trigger( pbcEvent, triggerData ); // Line #3794
The Uncaught TypeError is caused by Line #3794, because mpc is undefined.
So, from JQM, In the Chrome inspector, I can see also that settings.fromPage is undefined and settings.pageContainer is undefined. I kind of imagine, that JQM cannot make an assumption on the fromPage, and therefore, cannot proceed on my refresh. All the options I have tried on the $mobile.changePage() have not succeed. I am out of ideas.
UPDATE/ Online site with the minimum to reproduce the problem:
apartindex, access the website with the bug
Any help will be appreciated.
The dextoInit function that calls the router code is called in $(document).ready() which does not guarantee that the jQuery mobile page has actually been set up successfully. But the router code calls $.mobile.changePage which depends on jQuery Mobile being initialized.
Putting it into mobileinit or pageinit should work.
(Unfortunately I can't modify the code and test it easily.)
Although, this fix it for the moment, it does have drawbacks. See below.
$(document).bind("pageinit", function(){
console.log('bindtomobileinit: event pageinit received');
if ( !window.AppNode.router ){
window.AppNode.router = new AppNode.singletons.router();
console.log("mobileRouter.js: Starting b history");
console.log('mobileRouter.js: About to launch Backbone history');
Backbone.history.start();
}
});
Registering to pageinit has a weird effect of being fired twice. I see that 2 nodes have been added to the Dom: the default "loading" jquery mobile div (related to pageinit:1), and my data-role page (pageinit:2). So on a "refresh browser click", my situation leaves me waiting for a first pageinit, creating an unexpected jquery mobile dom element (a default page created to display the waiting JQM circle animation), which trigger the router creation, and allows the Backbone.history call which then deal with my "" home page. The second pageinit do not interfere with the settings since I execute it only once.
I am really disappointed by this setup. I will leave this question for now, since it does sort of work.
I've found the source of the problem to be jquery-mobile version 1.3.0. When I fall back to either JSM 1.2.0 or 1.2.1, the "Uncaught TypeError: Cannot call method 'trigger' of undefined" problem goes away.
BTW, I am not using Backbone.
I had fixed this problem by using method append(), but not html()
$('body').append(view.render().$el);
I was able to resolve this issue by changing the page data property from "data-role" to "data-mobile-page" as what is referenced in line 4042 of jqm 1.3.2
fromPage.data( "mobile-page" )._trigger( "beforehide", null, { nextPage: toPage } );
Setting
$.mobile.autoInitializePage = true;
In your jquery mobile config file, some place like:
$(document).on("mobileinit", function () {...});
May help.
I'm puzzled about the execution order of the following:
$('#home').live('pageinit',function(){
$('#test').hide();
$(function() {
alert('test1');
});
$('#button').click(function(event) {
event.preventDefault();
});
});
$('#home').live('pageshow',function(){
alert('test3');
});
Here is the sequence:
pageinit gets fired
$('#test').hide() is executed
$('#button').click()... is executed
pageshow and
alert('test3') go off
alert('test1') is fired
Why isn't alert('test1') executed as number 3?
Thanks
I am not sure whether any typo is there in the code but it should give you an error in the Inspect Element or Developer Console. Try enclosing the function like this:
(function() {
alert('test1');
})();
Check this fiddle with full source
I have the listview refresh functioning appropriately with a dynamically built list after load except for one issue. The last <li> tag in the list does not get any styling applied to it.
The refresh actually adds the the ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c class to the second to last <li> tag.
Any ideas why this would be happening?
Attached is the function that is dynamically generating the list:
function createSidebarEntry(marker, name, phone, address, distance) {
var saddr = document.getElementById('addressInput').value;
var li = document.createElement('li');
var html = '' + name + ' (' + distance.toFixed(1) + ' miles)' + address + phone +'<a href="http://maps.google.com/maps?saddr='+ saddr +'&daddr=' + address +'" /></a>';
li.innerHTML = html;
$('#locationList').listview('refresh');
return li;
}
From your code, it looks like you are adding the li to your listview outside of that function, BUT you are calling .listview('refresh'); inside the function.
So It just happens to work for all your LIs because except for the last one, because its always the following LI that causes the list to be refereshed with the correct look&feel.
Solution: just call .listview('refresh'); AFTER you have added the last LI outside of this function. It will also have the effect of improving performance becuse you will only be refreshing the listview once you have finished dynamically adding all your new LI elements.
Calling .listview("refresh") did not work for me. It created a basic list, without styling.
This is what worked for me:
function updateData()
{
$.ajax({
url: '#Html.Raw(ajaxUrl)',
async: false,
beforeSend: function () { $.mobile.showPageLoadingMsg(); },
complete: function ()
{
$.mobile.hidePageLoadingMsg();
$("ul:jqmData(role='listview')").listview();
},
success: function (data, textStatus, jqXHR)
{
$('#myDiv').html(data);
$('#myDiv').trigger("create"); // *** THIS IS THE KEY ***
}
});
}
Sometimes you need to instantiate listview view before calling the refresh.
Chrome should be giving you an error saying that you cant apply a refresh to a listview that isnt instantiated.
You can try this out, it might solve your problem (it solved this exact same issue for me).
$('#locationList').listview().listview('refresh');
I also had some problem with listview refresh function( jqm 1.0 beta1 ).
On IE8, it's even worse.
So my solution is simply inspect what jqm has done to <li> tag.
And directly insert the after-refresh-html-code.
Not an elegant solution, but it works.