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.
Related
I'm having a master page in ASP.Net, which downloads various files via AJAX and does some initialization work for a library, that I'm using, after that. I'm using jQuery's $.when().then syntax for that.
My individual page requires all those settings to be made before executing it's code. Right now, I'm using the $(function () {}) syntax on my page. The problem with this is, that it executes right after the page has rendered, but long before my when.then construct has finished.
Is there way to wait for that construct? Can I somehow fire a custom event from my master page code after initialization, and attach my content page function to that? Or are there even better solutions?
PS: To make it clear, we're talking about client-side-only code here!
Do not wrap in the document ready $(function () {}) but instead in a custom event.
$(document).on('mycustom',function () {});
THEN trigger that in the then
$.when().then(something).then(function(){$(document).trigger("mycustom");});
In the master page you can set the when/then chain to a variable and continue to chain it in the detail page. They are, after all, one page client-side. So as long as the initial chain comes first, you can append to it all you like.
So you might set the first chain to a variable:
var eventChain = $.when(/.../).then(/.../);
Then in the detail page:
eventChain.then(/.../);
So the detail page is really just picking up where the master page left off.
In our team it is practice to keep all Javascript in their own .js files -> no Javascript in Views.
Certain events cause new divs to be loaded on the page (but the page itself does not get reloaded, nor do we go to a new URL). I want the Javascript code only to be executed when a certain div is loaded.
My current solution is to simply call within the view:
<script>
someJavascriptFunction(...);
</script>
What I want is something like
$(document).ready(function(){
$("#my-div").....
}
However, $(document).ready, only loads once. Same for
jQuery(window).on('load', function () {
//some function
});
which only seems to work when the URL actually changes.
Does somebody have an good idea on how to execute Javascript only when a certain div is currently loaded on the page/in the current view?
I haven't found a working solution yet...
Hopefully my question is clear - I'm new to Javascript!
If you are using default turoblinks:
$(document).on('turbolinks:load', function() {
$("#my-div").....
});
RoR turbolinks
I am creating an application with Symfony2, where I have a main menu of options depending on the option selected dynamically opens a tab at a lower div with the content for that option. Content is loaded with load() of Jquery in the container div.You can see in the picture below:
The first problem was that in the HTML loaded in each tab could not use the js file initially loaded in the index.html, as you can see in this example you should check out a notice when we click the content of each tab, but does nothing .
The solution to this problem was included in each HTML code to load the appropriate script, and it worked properly. But to do it this way, if two HTML carry the same js, when one of the contents some event runs is repetite many times as tabs we have created, that is, if I open two different options (each in its own tab both charge the same js) by clicking on the first event associated performed twice, whereas if I do it in the second only done once. In short, whenever a function of a js used, is repeated as many times as there are dynamically loaded on the tabs.
And I tried event.preventDefault();orevent.stopPropagation(); and it does not solve the problem.
Would it be okay that it js is included twice in the overall structure of HTML? (Included in the initial head and then the container div)
Dynamically loading HTML + JavaScript is not the best approach for this case. I suggest that you use some JavaScript SPA framework, like AngularJS or ReactJS. Both are very big and well supported projects, so you can find tons of documentation and tutorials. You'll most likely end up using Symfony only as a RESTful service and Angular/React taking care of the rest (template loading, sending request to server, etc). Also, js frameworks will take care of deep linking and in the end you'll have a better working, easier to maintain application.
It is a bit more work initially, especially until you bootstrap the application, but then it gets easier to maintain and implement new functionality, so it pays off in the end. With your current approach you soon will find yourself in a big mess full of 100s of templates, js callbacks, inclusions, etc. I'm saying this from a personal experience!
Well...
Jquery works like this: when you attach an event to html, if the html does not exist, the event is attached to nothing. If the element exists then the event is correctly attached. It attaches only to existing elements when the on function is execute. That is a correct behaviour. In the past it used to exist a .live method that did exactly what you want: you attached an event and if you create the element after the attachment, the new element also contained the event.
Adding the js twice is not the solution. As you said after a click the button will be executed twice.
Why do not attach the events after loading the content? If you load it in the page start you can do in the main file:
$(function(){ // will force to execute the on method after all the page is loaded.
$('.submenu .button').on ('click', function (){
...
});
});
If you load the menu by ajax, in the callback and after adding the html menu to the main you must use the code I wrote above.
I am having some trouble getting a countdown timer to work on my jQuery mobile page. If I have it load on a static html page it works as it should (see that page here:http://www.beingproperties.com/match-game). when you hit the start game the timer starts.
I have recently ported this over to the jQuery mobile framework and the timer is not working on that site (see this here by going to the link and clicking the 'multi-page link, then the start game link): http://www.beingproperties.com/match-game/home.html).
I have tied using 'pageshow' as scene below and though I get it to work and throw an alert, once I add in my code to execute nothing happens.
$('#shapesPage').live('pageshow', function () {
I know that it's something regarding the ajax loaded page, though all other jQuery fires on this page except for the countdown timer. I'm at a loss and would much appreciate a kick in the right direction.
I used the inspector and it's not very informative. Any insight to get this resolved, or proper ways to debug these types of issues would be much appreciated. thanks in advance. -Chris
Looking at the source for home.html, it seems that you haven't included js/plugins.js, only js/index.js.
I know you've included it in shapes.html, but JQM is a bit weird about loading external scripts when loading a page via ajax, as stated in the documentation:
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.
Edit: You can not call any functions that modify the DOM until it is fully loaded. This is signaled in JQM by the pageinit event. Read about scripting and events for more info.
Try surrounding your javascript for shapes.html with
$( document ).delegate("#shapesPage", "pageinit", function() {
...
});
I have several pages that are called onto an ajax tabbed area. the pages that are called have javascript on them however the document.ready function will not load for each of these pages when loaded onto the tab. Instead I have had to put a button on the pages to load the function manually. Iv tried putting the document.ready function on both the page being called and the pages calling it but it still wont run. Is there any other way i can use rather than having a button? I dont want buttons displaying on my pages that have to be clicked before it looks good =(
Heres the code that calls the the page:
onclick="createNewTab('dhtmlgoodies_tabView1','Remote Access','','RemoteAccess.html',true);return false">Remote Access
All the javascript files are connected to the main page.
A button is located on the remoteaccess page:
input type='button' value='Load.' onclick='loadlightbox()'
The loadlightbox function is inside a javascript file that is conected to the main page:
loadlightbox = (function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
There is no document.ready event being fired when you load the content into the page with JavaScript. Most libraries just stick what is returned with innerHTML. Most libraries just rip out the JavaScript code from the responseText and run it through eval().
You probably want to forget the whole document.ready and just stick the code block at the end.
The document.ready function won't fire because the page (document) is already loaded. The remote page is loaded as content not as a document.
Since you are using jquery you should take advantage of the .load function and also you should take a unobtrusive approach to attaching the onclick to your link. This allows your JS and code to be separate.
//Using Jquery load
$("#id_of_link").click(function(e){
e.preventDefault();
$('#dhtmlgoodies_tabView1').load("RemoteAccess.html",
function(){
//callback code here
})
})