I am writing a web application in MVC3 which consists of a master page (header / menus) which does not change. When I do something like click on a linkit causes refresh og whole page which is correct but this redraws the whole screen and becomes annoying because on every post back and the whole screen flickers.
Is there a way not to refresh the layout page?
Thanks in advance for replies.
Put all you want to refresh in one view and make a action point this,just like that:
//layout head...
<div id='maincontent'>
#Html.Action("Content","SomeControl")
</div>
//layout foot...
And use post to get the new content and replace it:
//in refresh event
$.post("/SomeControl/Content",function(data){
$("#maincontent").html(data);
})
Related
I have a wordpress page where I want to create custom events.
I would like to measure how many people click on different links/entries on my page.
I have been reading and I should create in HTML an on click DOM event for those entries/links, but I am not sure how to set this up.
Then I also require the DOM selector.
Would somebody give me an example of how to do this?
Below is an example of how it looks an entry on HTML:
-Shoes: Click acá!
Thanks very much.
Sabrina C.
I think this is what you're asking for:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
A better solution might be:
<a onclick="log(this)" href="https://www.paruolo.com.ar/" rel="nofollow noreferrer">Click acá!</a>
<script>
function log(e){
alert(e.href);
alert(e.innerHTML);
}
</script>
This would allow you to pass the item to a fetch call that you replace the alert with to log on your server or on the page. Just replace the alert with another function that handles your data and handle by link or the text in the link.
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 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.
Hi
I am basically calling individual php pages (and their forms) via AJAX in separate JQueryUI tabs. The code is something like:
<div id="dock">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Statistics</li>
<li>Pings</li>
</ul>
</div>
...
jQuery(function($) {
jQuery('#dock').tabs({'collapsible':false});
});
1) Now every time I click on the tabs, their content gets loaded fine but the previous content does not get destroyed. As a result, imagine if a tab was clicked (loaded) N times - a form is also submitted N times. As far as I have understood, multiple bindings occurs here and hence the multiple form submits. How can I prevent this?
2) I have separate forms in each tab. When multiple tabs are selected, multiple forms get loaded. Now if I submit a value (via AJAX) in any one of the form, the data is submitted across all the forms which were previously loaded (Checked with Firebug). How can I prevent this again ?
PS: Enabling caching in tabs partially solved problem #1, but does not help with problem #2.
PPS: I went through quite a few similar posts but I am still stuck :(
Thanks !
From the little bit of code there, it looks like your problems may arise from using the same page (index.php) for each of the tabs. Check these:
Does each form have a separate ID? They should.
Disable caching in both 'cache' and 'ajaxOptions'. This will make sure content is refreshed (and removed) with each click.
How are your forms submitting via AJAX? Regardless of the method, you should handle your form bindings for each tab select through the "load" option.
Try this...
$("#dock").tabs({
load: function (event, ui) {
//setup new content bindings here
},
cache: false,
ajaxOptions: {
cache: false
}
});
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).