I have a website and I want to link page1 to page2:
Page2
-has a submenu which displays information like this:
$("#element").click(function(){
$("#another_element").load("page3.html");
});
on Page1, I have links, and I want to know if it is possible to have a href="page2.html/call_ajax_function_from_page2" with the ajax call. How can i click on an element in page1 and go to page2 an call it's load() so that it displays the info as if an element from its submenu were clicked?
Thanks!
Additional info By clicking an element in page1.html i want to redirect o page2.html with certain ajax content loaded to it. page2.html is the one with ajax
More info: I want to do this because on page1 I have a carousel, and each button I want it to link to a completely different page, page2 to display info relevant to that carousel. I have already built that page2 and it loads content based on .load when a link from its submenu was clicked.
I may be wrong as your question is hard to understand, but I think you're looking for something along the lines of this:
$('#foo li a').each(function() {
$(this).click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('#bar').load(href + ' #someContainer'); // Load the href + an ID.
});
});
So for example take this html:
<ul id="foo">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
If you were to click link 2, the preventDefault() will 'prevent' your browser location from changing (changing page) then you will store the attribute of that anchor link in a variable called href. Then finally you will load the contents of that variable into your specified div, in this case 'bar'.
Related
Is there any way to know that view is open by back?
For example
<div data-role="view" id="view-test" data-show="show">
<!-- View content -->
</div>
<script>
var show = function(e){
if(e.view.isBack())
{
console.log("Back")
// do something
}
}
</script>
Is there any method or property like e.view.isBack() ?
There are many ways to handle this, maybe you can use a global variable where you keep the last visited page or even you can add a back button handler and get the view from which the back button was pressed. Another solution would be to pass a parameter along with page navigation when going back, for example:
<a data-role="button" href="#foo?back=true">Link to FOO with back parameter set to true</a>
And on the visited page on show event you can get the parameter like this:
function fooShow(e) {
e.view.params // {back: "true"}
}
Now depending on what the parameter value is you can detect if the back button was pressed or not before reaching the page.
I use AJAX on a link to insert data into a certain <div> in the same page. However, if the user right-clicks and opens in a new tab, the new page will contain only the data, without other page elements. How can I do to render a whole page for a right-click-new-tab?
HTML:
<a class=".updateContent" href="...">The link</a>
...
<div id="content></div>
AJAX:
$(document).ready(function() {
$('.updateContent').click(function() {
var url = $(this).attr('href');
$('#content').load(url);
return false;
});
});
Don't use an href. With an href the user has the option to open in a new tab/window or copy/paste no matter what you do (except maybe disable right click entirely but that's annoying). I suggest something like the following:
<a class="updateContent" data-url="...">the link</a>
Then your jQuery
var url = $(this).data('url');
I am opening an MVC view in magnific
I need to show a title (caption) below the modal
But caption is only for image type but I am using Ajax type.
I have set the title attribute on both the hyperlink that I click to open the modal and the root element of the view.
But it never shows up.
How do I do display the title (fixed or dynamic from a grid)? I wonder why author forgot to add this feature?
hyperlink:
<a class="edit-list" title="Edit List!" href="/manage/editlist/100">Edit</a>
Root element of the target page:
<form id="ListEditForm" class="white-popup" title="Edit List" action="/manage/EditList/100">
..fields go here
</form>
I followed this post, but he has markup, I don't:
http://codepen.io/dimsemenov/pen/zjtbr
Initialization:
$('.edit-list').magnificPopup({
type: 'ajax',
midClick: true,
callbacks: {
markupParse: function (template, values, item) {
values.title = item.el.attr('title');
}
}
});
This has been solved. I need to put the right container in the right place to render the title. The plugin won't drop any element to show the title.
I have a div like this
<section class="item_container">
<article class="item">
<h2>Page Title</h2>
<p><a class="delete_page" href="http://www.abc.com/delete/1/">delete</a></p>
</article>
<article class="item">
<h2>Second Page Title</h2>
<p><a class="delete_page" href="http://www.abc.com/delete/2/">delete</a></p>
</article>
</section>
And i am using this code to remove/delete items from item_container
$('a.delete_page').live('click', function(e){
e.preventDefault();
$('footer#ajax_footer').html('')
$('footer#ajax_footer').show("slide", { direction: "down" }, 500);
var url = $(this).attr("href");
var parent_div = $(this).parents("div").parent("article");
var title = $(this).parents("div").parent("article").find('h2').html();
$('footer#ajax_footer').html('<h2>Are you sure you want to delete <u>'+ title +'</u> Page</h2><p>'+ url +'</p><p>Yes, Please Delete It</p>');
$('a.delete_this_page').live('click', function(e){
e.preventDefault();
parent_div.remove();
$('footer#ajax_footer').html('').slideUp();
$.sticky('<b>Page Deleted</b><p><u>'+ title +'</u> Page has been successfully deleted.</p>');
});
});
All the contents are loaded via Ajax and there are few more div in each article and there are 30+ articles.
The problem is i am using Sticky plugin to display notification after every item is deleted and it's working fine, Everything is working fine, But after i delete an Article, The sticky notification of previous deletion is displayed as well.
Like, After i delete an item, i see 1 sticky notification, After i delete second item i see 2 sticky notifications (1 of this and 1 of previous) i only want to see 1, And For every item i delete it display all the previous sticky notifications + 1.
Hope i made it clear enough, Thanks guys.
The problem you have is that every time you click on a a.delete_page element you're setting up a new click event handler using .live(), so for each subsequent click you get one more event handler that gets run.
The whole point of .live() - though, as a side note, it's deprecated; consider using .on() (jQuery 1.7+) or .delegate() (prior to 1.7) - is that it handles events triggered by dynamically added elements. Call this:
$('a.delete_this_page').live('click', function(e){
e.preventDefault();
parent_div.remove();
$('footer#ajax_footer').html('').slideUp();
$.sticky('<b>Page Deleted</b><p><u>'+ title +'</u> Page has been successfully deleted.</p>');
});
outside of your other callback function (in your $(document).ready()), and find another way to identify parent_div. Or, bind the click event to that specific link directly inside the callback handler.
I have an MVC3 C#.Net project. When I initially load my Web site, I want to route to an Index page and have the navigation tabs at the top of the screen be disabled until a selection is made. Once a selection is made, the site routes to a details page. I would then like to enable the navigation menu itmes. How can I do this? Pass a ViewBag around? Not sure
I think the problem is that Index page doesn't follow a layout of the rest of the website, therefore index page shouldn't use a master layout.
On your index page:
#{
ViewBag.Title = "Index page";
// Null or a custom layout
Layout = null;
}
<p>Your content below</p>
If you want to render a menu on some condition, then store menu in a partial view model, e.g. SiteNavigation.cshtml
You can then render this view based on some condition. E.g.
#if(true){
#{ Html.RenderPartial("SiteNavigation"); }
}
I found an answer to my question. #CodeRush's answer is cool, which I will use in another scenario. But I like the implementation, below, for my prticular situation. In the Object1Controller Index get Action, I added the below code:
ViewBag.Hidden = "hidden";
Then in the Details get Action, which is the Action called when a link is clicked on the Index view, I added this code:
ViewBag.Hidden = "visible";
Then in the _Layout.cshtml I added this code:
<li style="visibility: #ViewBag.Hidden">#Html.ActionLink("About", "About", "Home")</li>
Which renders as:
<li style="visibility: hidden">About</li>
or
<li style="visibility: visible">About</li>
In the other Controllers, I don't need to set the ViewBag.Hidden property since the default for the visibility attribute is "visible". For the other Controllers, the ViewSource shows:
<li style="visibility: ">About</li>
Which renders as visible