I use asp.net razor and I load part of page in a partial view by Jquery load function. Part of script in the partial view is a JavaScript event like this:
$("#FormId").on("submit", function () {
//doSomeThing..
//ajax request ..
$("ContainerDivId").load("UrlToAction"); //load partial view in ajax success function
});
The problem is event create by every load and bind to another handler in another chrome VM file so handler function call several times by click on submit button.
I solved the problem by a flag variable but I know there is a clean solution. Where did I go wrong?
Change your code that adds the event handler to remove the old one first:
$("#duplicateFacilityForm").off("submit").on("submit", function ...);
Related
I am having some problems when I want to add custom jQuery code that affects the form.
For example when someone clicks an input or radio button another input or element to be hidden or shown.I tried to get a result like console.log('trigger'); when clicked or something else but nothing in dev. console appeared.Also, I tried the following methods:
To call the click event with .on('click', function()... or to call the event with .trigger('click');, or to change the event to change
To embed the script within a file from ninja forms or to put it inside the page at the ending of body tag in footer.php
To change the opening declaration of jQuery to work inside a function like this : (function($) {$(document).ready(function(){.....
I know that I could try another plugin, I tried one and the custom jQuery works but I really like this one and don't know why this is happening ...
Thanks
Not sure if you need help with this any more as it's been some time since you posted your question, but this may help others in the future. I had the same/similar issue with not being able to run JS/jQuery on the Ninja Forms and found that it's because Ninja Forms load their forms asynchronously. So, when your document.ready function runs, the form doesn't yet exist and it's not able to bind.
Ninja Forms have their own event ready state that can be used as follows:
jQuery(document).on( 'nfFormReady', function( e, layoutView ) {
// Your code goes here...
});
The event isn't registered simply because the elements you're trying to bind the event to do not exist yet at that moment (on document load). Ninja forms loads the form contents asynchronously, so you'll have to wait until the form is fully loaded and then add your event listeners.
This works for me:
var formExists = setInterval(function() {
if ($(".nf-form-cont").length) {
// Set your event listeners here, example:
$("#nf-field-1").click(function(e) {
console.log("click!");
}
clearInterval(formExists);
}
}, 100); // check every 100ms
I'm using jQuery's load() function to change content on a page dynamically. It's a application with different 'levels' but the URL never changes.
It's working fine except for the final screen I'm using. I've got a form with text inputs etc that I need to create some form validations for but I can't get on('submit') to work after the page load. I am using a callback function on the load function and I do run some simple jQuery CSS, etc. to content that is on the final_page.php so I know that it's successfully running the function AFTER the content is loaded.
I'm trying to simply just apply a preventDefault() to the form for now to confirm that it's working correctly but the form submits every time I get to that final page so it looks like the on() function doesn't get bound to the form selector.
Is there some sort of conflicting with submit and load?
$('#main_content').load('final_page.php', function(){
$('#main_content').css({'height':'auto','padding-bottom':'25px','background':'#086c8c'});
$('#hidden_input').attr('value', 'complete');
//GOOD UP TO THIS POINT
$('#final_form').on('submit',function(e){
e.preventDefault();
});
});
I Want to execute a function when the page load but don't know how to do it. cause that I have a list but his data from to another place in the load.
It sounds like you are refreshing page content through an AJAX call and you want to make that AJAX call on the page load in ADDITION to binding it to an event.
Assuming that is the case, at the end of your ModelViewModel declaration, simply call the function. For example:
function SearchResultsViewModel(){
this.updateResults=function(){
//Some AJAX Call and action.
}
this.updateResults();
}
You bind the knockout viewmodel to the view as normal, then use
window.onload = function ()
{
//data from to another place in the load
}
or in jQuery
$(document).ready(function(){
//data from to another place in the load
)};
Since knockout is bound to the view, when you add items, the view will update automatically.
I have a simple custom tabbing module, that loads tabs with an AJAX request (via $(elem).load()). On each page that is loaded with AJAX I have some JavaScript. The first time the page loads (via direct input of URL, not AJAX), the javascript fires up perfectly. When I navigate away from the page via the AJAX tabs, the javascripts from the pages aren't loading anymore.
Is there any way I can force them to execute?
(The javascript that is not firing is placed in a $(document).ready() function if that helps)
You need to use callback of load() function:
$(elem).load('source.html', function() {
// here you need to perofrm something what you need
ActionOnDocumentReady();
});
You can put all your actions in $(document).ready into some function (ex ActionOnDocumentReady()) and call it on load() callback.
the domeready event fires only when is initial dom is ready (like the name and the jquery-api suggest).
if you want to use jquerys load() and fire a function if that loading has been done, you'll have to use a callback-function (according to the api).
if you want to do the same thing on domready and load-events, the best way would be to define a new function for that:
function dostuff(){
// do some stuff here
}
and fire this function in both cases:
$(function(){ // domready | shortcut for "$(document).ready()"
dostuff();
})
$('#something').load('script.php', function() { // callback on load()
dostuff();
});
Put your $(document).ready() code in a new method. Lets call it methodA. Now call this methodA from $(document).ready(). Secondly, call the same method after ajax request is successful. That should solve your problem.
I'm trying to do some client-side initialization that involves calling $find() on the ClientID of some RadComboBoxes.
My code is being run from an event-handler hooked to window load:
Sys.UI.DomEvent.addHandler(window, 'load',
function()
{
// My initialization stuff
}
);
Within this code, $find(clientid) returns null.
If I move my initialization code to a window.setTimeout(), $find() works fine. So clearly the only problem is that the client-side code hasn't been initialized, when the window load handler executes.
When I browse the Telerik forums, I see recommendations to put the initialization code in a pageLoad(). Given the organization of the code in this project, that's not possible. (There can only be one pageLoad() function on a page - we have separate initialization functions for multiple user controls that may be included on a single page. We'd like to keep the initialization for each encapsulated inside the control, we don't want to pull all the initialization into a single page-level function.)
Are there any of the standard events that we can catch with Sys.UI.DomEvent to which we can add handlers that will fire after the telerik controls have been initialized?
How about using Sys.Application.add_load()?.
You can have a few handlers for the pageLoaded event. Just place right after the ScriptManager tag script below:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler1);
function pageLoad() {
Sys.Debug.trace("in pageLoad");
}
function pageLoadedHandler1(sender, args) {
Sys.Debug.trace("in pageLoadedHandler1");
}
</script>