I'm trying to change the content of the menu whenever the user clicks a button. The CSS loads fine initially, but once i press the button to initiate the ajax call, the menu bar returns, but none of the CSS is applied. All of the code is in an MVC 4 partial view.
Here's my JS
$(document).ready(function () {
$("#menu").wijmenu({
orientation: 'vertical'
});
$("#TDButtons a").click(function () {
var href = $(this).attr("href");
$('#menuAjax').fadeOut('slow', LoadAjaxContent(href));
return false;
});
function LoadAjaxContent(href) {
$.ajax(
{
url: href,
success: function (data) {
$("#menuAjax").html(data).fadeIn('slow');
}
});
}
});
Here's the nav tag
<nav id="menuAjax">
<ul id="menu">
<li>Breaking News
<ul>
...
Here's the HTML for the buttons to initiate the AJAX
<div class="navDiv">
<div id="TDButtons">
<a href="#Url.Action("_menu", "Home", new { TakeoutDelivery = "TakeOut" }, null)">
<img class="headerLogo" src="../../Content/Images/TakeoutButton.jpg" alt="Take Out" /></a>
<a href="#Url.Action("_menu", "Home", new { TakeoutDelivery = "Delivery" }, null)">
<img class="headerLogo" src="../../Content/Images/DeliveryButton.jpg" alt="Delivery" /></a>
</div>
Please let me know if you need anything else.
Put this on the page.
function pageLoad(sender, args) {
$('#OutsideDiv').trigger('create');
}
This will re attach the css on page load. The problem I presume is that it is only a partial post and hence you are lossing the style sheets. I had a very similar problem with my mobile site in jquery-mobile when making partial postback calls. This fixed it re partial postbacks.....
Note: there is a very small delay for it to render... Not sure if this will be a problem for you....
Hope it helps
Cheers
Robin
I needed to add
$("#menu").wijmenu({
orientation: 'vertical'
});
into the LoadAjaxContent function.
function LoadAjaxContent(href) {
$.ajax({
url: href,
success: function(data) {
$("#menuAjax").html(data).fadeIn('slow');
$("#menu").wijmenu({
orientation: 'vertical'
});
}
});
}
Related
I have a package with a dashboard single page. On this single page I need a dynamically created dialog popup, and so
I also need to use the router, views (package/mypackage/views) and controllers.
The questions now are the following:
What looks the directory structure like?
Where and how do I use Router::register('what_path_?', 'Namespace\?\Class::method') to create the route to the view/controller?
How do I call upon the route inside the single page view (Url::to(?)) and in combination with the dialog JS?
Please add comments if some questions are still open!
In concrete5, you can use $.fn.dialog.open, for example:
$.fn.dialog.open({
width: 500,
height: 300,
element: $('<div>This is an example!</div>')
});
To create modal dialogs on dashboard single pages in packages, the following steps are necessary (assuming the package already exists):
Creating the following supplementary files / folders (for sake of readability):
/my_package/controllers/dialog/my_dialog.php
/my_package/views/dialogs/my_dialog.php
The 'my_dialog' controller should look like this:
namespace Concrete\Package\MyPackage\Controller\Dialog;
use Concrete\Core\Controller\Controller;
class MyDialog extends Controller
{
protected $viewPath = 'dialogs/my_dialog';
public function view()
{
/** your code */
}
}
The 'my_dialog' view is a standard Concrete5 view.
Add (if not exists) the following method inside the package controller:
public function on_start()
{
Route::register('/my_package/my_dialog',
'\Concrete\Package\MyPackage\Controller\Dialog\MyDialog::view');
}
Now in the single page view:
<a class="btn btn-default btn-xs" data-button="my-dialog">My dialog</a>
<script type="text/javascript">
$('a[data-button=add-event]').on('click', function() {
$.fn.dialog.open({
href: '<?= URL::to('/my_package/my_dialog'); ?>',
title: 'My dialog',
width: '280',
height: '220',
modal: true
});
return false;
});
</script>
To note:
The route can be named however one wants it (ex.: /superuser/needs/new/pants).
The call on the dialog JS might be better handled, please comment on it.
To add another "inline-code" possibilty:
HTML:
<div id="my_dialog" style="display: none">
<div>
This is an example!
</div>
</div>
jQuery:
$('#my_dialog').dialog({
title: 'My Title',
width: 500,
height: 300,
modal: true,
buttons: [
{
text: 'Yes',
icons: {
primary: "ui-icon-confirm"
},
click: function () {
// Confirmed code
}
},
{
text: 'No',
icons: {
primary: "ui-icon-cancel"
},
click: function () {
$(this).dialog('close');
}
}
]
});
I'm using the following JQuery block in my DotNetNuke module:
jquery(document).ready(function (){
$( "#dialog:ui-dialog").dialog("destroy");
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
}
}
});
});
</script>
<div id="dialog-message" title="Registration Confirmed">
I'm not sure how to redirect the user to the home page when they click the Ok button? Also, how do I wire up the dialog-message DIV to only fire when my ASP:Button is clicked?
Thanks much!!
You can put an OnClientClick on your Button and call a function that will show your modal. When the ok button is clicked you can change the window.location to the path of your homepage.
HTML
<asp:Button runat="server" ID="btn_ShowModal" OnClientClick="showModal(); return false;" />
Javascript
function showModal()
{
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
window.location = "pathToHomepage";
}
}
});
}
Edit
There are two types of paths that can be used in javascript and in web development in general: relative paths and absolute paths.
Relative paths: start from the current directory and you access the desired location from there using '/' to go forward a directory and '../' to go backward
Absolute paths: the full url to the desired location
You can find a more thorough description here
'~/' is a sever side "shortcut" that unfortunately does not work on the client side without using something like this.ResolveClientUrl.
'<%= this.ResolveClientUrl("~/default.aspx") %>'
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "Alert",
buttons: {
Close: function () {
$(this).dialog('close');
window.location = "home.aspx";
}
},
modal: true
});
});
};
</script>
client side
string message = "Profile Updated!!.";
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
I have a server side method that can take long time. I decided to display a loading process modal and for that I used this tutorial. It works fine, but my problem is the following.
I'm using jQuery UI/Tab on the same page and it contains two tabs. On postback all UI loses styles. As I understood, the problem is in UpdatePanel, and the solutions suggested is to use the function pageLoad(). But it solved my problem partially, because the last selected tab is not persisted on postback.
It worked fine before implementing the loading model process and I used the following :
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
Is there any solution for this?
I have a similar problem and I sorted out using the following:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
//here you need to add the jquery functions related to the tabs, as well as other jquery code you may have
//i.e.
$(function () {
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
});
}
Hope this helps,
UPDATE: Probably, for your specific case, it would be something like this:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
}
You need to register a ClientSideScript that selects the current tab in whatever event/method that is being executed during the postback.
Simplemodal works perfectly but I dont know how to automatically close the Iframe after the form is submitted.
I have tried to get the event outside the modal options using js, but
if I close the modal window on the submit event, then the form is not submitted...
I have also added the class simplemodal-close to the input button, but it doest work in the form??
Any suggestions??
Here is my code
//Modal Window
modal.click(function(e){
e.preventDefault();
$.modal('<iframe src="' + this.href + '" height="480" width="525" style="border:0" >',{
containerCss:{
backgroundColor:"#fff"
},
overlayClose:true,
onShow: function (dialog) {
$("input",dialog.data).click(function (e) {
e.preventDefault();
alert('Here'); //Doesnt execute
$.modal.close();
parent.$.modal.close();
alert('Here');
});
}
});
Ok, I just did it.. I didnt use iframe because after parent.$.modal.close().. The js included in that iframe didnt execute anymore..
So I just did it this way..
//Modal Window
modal.click(function(e){
e.preventDefault();
$.get(this.href,function(data){
var resp = $('<div></div>').append(data); // wrap response
$(resp).modal({
overlayClose:true,
minHeight:450,
minWidth: 500,
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff"
},
onShow: function(dialog){
autocomplete();
}
});
});
});
If I use a div instead that an iframe,, when I submit, the modal closes otherwise it stays open....
It was easy, but I got confused..
So here is my button:
<div id="calculateButton" style="cursor: pointer;">
<img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/btn_calculate.gif")%>" />
</div>
And here is the javascript:
$('#calculateButton').click(function () {
alert('Calculating...');
});
When I click the button nothing happens. What am I doing wrong?
Edits:
$(document).ready(function () {
$("#prepaymentTable").bubble({ width: 400, title: 'Prepayment' });
$("#exposureTable").bubble({ width: 400, title: 'Exposure' });
$('#calculateButton').click(function () {
alert('Calculating...');
});
});
The bubble plugins both work...but not the button click...
Make sure you're attaching the click handler inside a document.ready handler, after the element has loaded, like this:
$(function() {
$('#calculateButton').click(function () {
alert('Calculating...');
});
});
If it's created later as the result of AJAX, etc, use .live(), for example:
$('#calculateButton').live('click', function () {