I have a page that collects a set of user comments on the contents of that page. New comments are added to the page by clicking a button and filling out a form that appears via a Bootstrap modal. The results are then inserted into the page via ajax. This is all working fine.
The "results" that are added to the page include another Bootstrap button/link, which looks something like this:
<a tabindex='-1' href='#' class='ajax-modal btn btn-small'
data-target='modal_my-modal' data-backdrop='true'
data-controls-modal='res-modal' data-keyboard='true'
url='/somewhere'>Click me</a>
The link looks and behaves like a button (thanks, Bootstrap!), but, when clicked, doesn't trigger the modal like it's supposed to. However, if I refresh the page in the browser so that this comment, along with the others on the page, are redrawn, the button/link now works fine.
Since the button works when the page is redrawn, I'm assuming that there is some Bootstrap initialization code that runs when the page loads and sets up all the links to do their stuff, and that I need to call this after adding my new button to the page. Is this correct, and, if so, what should I be calling to get the link properly initialized? Thanks!
Short answer: There is indeed a function that gets called when the page is drawn and that sets up the click handlers -- it's my own function that's responsible for setting up the modals. I added a call to that function after the html containing the button/link, and all's well. I'm sure there is a Bootstrap init function that gets called, but calling my own is what was needed.
Related
I have a page when you click a button, it opens a Bootrstap 3 modal. This modal's function loads an Ajax call and returns a HTML on a DIV. This HTML has the fields to be used in x-editable. I declared all fields before:
$(document).ready(function() {
$('#Make').editable();
$('#Address').editable();
...
});
The Ajax response have all fields previously defined, but don't open the edit box.
Used console log with no errors. Seems it's not calling the function.
Thanks
solved my own problem. The element name has space on it. Removed and worked fine.
I'm new with Ember and I would like to show a full screen overlay when a user presses a "get stuff from the server" button.
What is the best way to achieve this?
Does Ember already provide something built-in? Or is it that the only way is to have a piece of HTML in one of my templates, to show/hide it when the promise where I make the AJAX call returns?
You have a few options available to you.
The first concerns a route change. Conventionally speaking, if the user is hitting a button that transitions to another route, a separate route can be created to handle this in-between loading experience.
To describe this briefly, if you have a route named foo, creating a sibling route named foo-loading with an associated template, will show a "foo-loading" page state while things are being fetched, and then dismiss it once things are good.
Alternatively, as you've hinted, if the call to action for a user intends an updated result on the same route, a loading service could be useful. In your application template, you could have a loading div that is hidden by default. Prior to initiating an AJAX request, you could turn the loading state on and reveal the loading div. Then, once the AJAX call is settled, the finally block could include a call to conceal the loading div.
This latter approach would involve a conditionally loaded block in the primary application template, a loading service handling show and hide, and a loading template.
You could use ember-modal-dialog to create a loading screen component that gets rendered when you're waiting for your ajax request.
For example:
// view.js
showLoadingScreen: true
// view.html
{{#if showLoadingScreen}}
{{loading-screen}}
{{/if}}
// loading-screen.html
{{#ember-modal-dialog}}
<div class="loader-full-screen-class"></div>
{{/modal-dialog}}
The advantage of the component/ember-modal-dialog is that this pattern is usually implemented as a modal, and this library is the standard in ember. The component then allows you to put it anywhere you need it to be.
I have javascript files defined in the <head> of both my layout decorator template and my individual pages which are decorated. When I update a thymeleaf fragment in one of my pages the javascript defined in the head of the parent page no longer works. Is there a standard way to 'refresh' these js files?
Thanks.
Additional clarification :
I have a form submitted by an ajax call which updates a table in the page. I have a Jquery onClick function targeting a button in the updated table. The javascript doesn't seem able to bind to the returned elements in the updated part of the page. I select by element class and can see that the selection works prior to the partial fragment render.
For me it is unclear what you mean by
javascript defined in the head of the parent page no longer works.
The page is created on the server. Normally it contains urls of the javascript files
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
In this case 'refreshing' the javascript files can happen only in the client.
Check the html of the page in the client.
Are the tags as expected ?
Are there tags for all expected javascript files ?
With the browser tools (for example Google Chrom developer tools ) check that all script files are actually loaded.
If this doesnt help, it could be that the order of the script tags has changed between the first and second load. This could cause a different behaviour of the javascript executed in the browser.
EDIT :
With the initial load you bind javascript callbacks to dom elements.
You do this directly or through Jquery or other libraries.
When a new dom element is loaded, it has no callbacks bound to it, even if it has the same id as a replaced dom element.
So after the load you have to bind your callbacks again.
If you bound them 'by hand', just bind it again.
If you are using a JQuery plugin, that made the bindings, look into the code or documentation, many of them have a function for that or you can call initialization again.
Once you added new content to the DOM you need to bind again the new content.
Let's say I have a button with some class, the event in binded to the class:
<button class="someclass">Button 1</button>
<script>
var something = function() {
// do something
};
$(".someclass").on("click", something);
</script>
If I add more buttons from the same class to the DOM, they will have not have the click event binded. So once you load the new content via ajax, also remove all binding and add again (you need to remove or you will have buttons with 2 events).
$(".someclass").off("click");
$(".someclass").on("click" , something);
Hi I have a page with a navigation menu on the left and when any link
on this menu is clicked , an Ajax get call is sent to the server and
the right side gets updated with the new page.
How I am currently doing this is by creating 2 columns, the left col
contains the navigation link and the right col contans a div named the
content which has a dojotype of dojox.layout.ContentPane.Now when the
data is received from the server, I change its content like this
dijit.byId("thecontent").setContent=data
Now when I click on the navigation link , the right side gets
displayed properly(this page has dijits and also some scripts to
handle onclick events). But firebug returns an error saying
"Tried to register widget with id==thecontent but that id is already registered"
my main dojo include looks like this:-
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js"djConfig="parseOnLoad:false"></script>
I do a dojo.parser.parse() in the function dojo.addOnLoad like this:-
dojo.addOnLoad(function(){
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojox.layout.ContentPane");
dojo.require("dijit.Editor");
dojo.addOnLoad(function(){
dojo.parser.parse();
sendgetrequest();//this initiates the xhrget request
dojo.removeClass(dojo.byId("doc3"),"hiddendiv");
}
);
})
I am also unable to run any scripts in this new loaded page. No onclick event is working, just the dijit widgets are displayed...
The error means, as Ken already said, that you are creating a dijit with an id that already exists. My guess would be that you load the AJAX content in the right panel without destroying the old right panel first.
Try calling destroyRecursive on the main dijit container in the right panel before loading the new content. Also, if you do not need to set the id of the dijit, you just might drop the id (but that would leave a memory hole because the old dijits are not destroyed).
This is probably going to get a resounding no, but I am wondering if it possible to have the URl change dynamically with using hashing, and without invoking a http request from the browser?
My client is keen on using AJAX for main navigation. This is fine, when the end user goes to the front page first, but when they want to use the deep linking, despite it working, it forces an extra load time as the page loads the front page, then invokes the AJAX from the hash.
UPDATE: Could it be possible, given that what I want to avoid is the page reload (the reason is that it looks bad) to stem the reload by catching the hash with PHP before the headers are sent, and redirecting before the page load. This way only one page loads, and the redirect is all but invisible to the user. Not sure how to do this, but seems like it is possible?
Yes, this is possible. I often do this to store state in the hash part of the URL. The result is that the page doesn't reload, but if the user does reload, they're taken to the right page.
Using this method, the URL will look like: "/index#page=home" or "/index#page=about"
You'll need to write a JavaScript function that handles navigation, and you'll need a containing div that gets rewritten with the contents fetched from AJAX.
Home
About
Questions
<div id="content"></div>
<script type="text/javascript">
function link(page) {
location.hash = "page="+page;
loadPage(page);
}
// NOTE: This is using MooTools. Use the AJAX method in whatever
// JavaScript framework you're using.
function loadPage(page) {
new Request.HTML({
url: "/ajax/"+page+".html",
onSuccess: function(tree, elements, html) {
document.id('content').setProperty('html', html);
}
}).get();
}
</script>
Now, you'll also need to have something that checks the hash on page load to load the right content initially. Again, this is using MooTools, but use whatever onLoad method your JavaScript framework provides.
<script type="text/javascript">
document.addEvent('domready', function() {
parts = location.hash.split('=');
loadPage(parts[1]);
}
</script>
Ok, the problem is that opening an AJAX link of the form http://example.com/#xyz results in a full page being downloaded to the browser, and then the AJAX-altered content is changed once the page has loaded and checked the hash part of its URL. The user has a diconcerting experience.
You can hugely improve this by making a page that just contains the static elements - menus, etc. - and a loading GIF in the content area. This page checks its URL upon loading and dynamically fetches the content specified by the hash part. The page can have any URL you want; we'll use http://example.com/a. Links to this page (http://example.com/a#xyz) now provide a good user experience for users with scripting enabled.
However, new users won't come to the site by fetching http://example.com/a; they'll fetch http://example.com. This is fine - serve the full page, including the home page content and links that don't require scripting to work (e.g., http://example.com/xyz). A script run on loading this page should alter the href of AJAXable links to their AJAX form (http://example.com/a#xyz); thus the first link a user clicks on will result in a full page load but subsequent ones won't.
The only remaining problem is is a no-script user gets sent an AJAX link. You can add a noscript block to the AJAX page that contains a message explaining the problem and provides a link back to the homepage; you could include instructions on how to enable scripting or even how to modify the link by removing a# and pressing enter.
It's not a great answer, but you can offer a different link in the page itself; e.g., if the address bar shows /#xyz you include a link to /xyz somewhere in the page. You could also add a link or button that uses script to bookmark the page, which would again use the non-AJAX form of the link.