JQuery Razor MVC Not Working - javascript

I'm having an issue where the JQuery isn't firing on a button click. I've been looking through the Chrome debugger but nothing is coming up. No errors and when the button is clicked nothing happens.
I am using a fresh build of MVC with the initial references for Web API and MVC. The plugin I wish to get working is the Menu Slider here
I have tried to strip out as much as possible, the sidr.js and the sidr.css are the same as taken from the above link.
Can anyone see what I'm doing wrong? I've reordered the scripts to get the jquery-1.9.1.min to load first but still no dice.
Update
I have just rebuilt the below code on another computer, same IIS, Visual Studio etc and it works (with the button) what could be making JQuery not run (I've gone through the references and they match up) as I'm out of ideas.
Layout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.js")"></script>
<link href="#Url.Content("~/Content/jquery.sidr.dark.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.sidr.js")"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#slide').sidr();
});
</script>
</head>
<body>
<div id="sidr">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<button id="slide">Reveal Menu</button>
<div>
#RenderBody()
#RenderSection("scripts", required:false)
</div>
</body>
</html>

I believe that this plugin needs to be instantiated on markup with a list inside. Something like this:
<a id="demo" href="#slide">Reveal Menu</a>
<div id="slide">
<ul>
<li>Menu Item</li>
</ul>
</div>

If you want JQuery to do something on click try this.
https://api.jquery.com/click/
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
Here is a fiddler where Jquery pops an alert on button click.
https://jsfiddle.net/wncdr034/
Maybe you can trigger the slide from within the event function?

As per their documentation they have the below code:
<a id="demo" href="#sidr">Toogle menu</a>
<div id="sidr">
<ul>
<li>Side <a href="http://www.jqueryscript.net/menu/">Menu 1</a></li>
<li class="active">Side Menu 2</li>
<li>Side Menu 3</li>
</ul>
</div>
They have mentioned href to the anchor which is the id of sliding div but here you have button and have initialized .sidr() on that which will not have href attribute! I suspect the plugin may work on the href attribute of the anchor. So my suggestion is why don't you just replace your button with anchor and provide href value with the div id as below:
<div id="sidr">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<a id="slide" href="#sidr">Reveal Menu</button>

Related

Opening a document hyperlink present in one JQuery tab, in another JQuery tab?

Sorry: I know this is a FAQ but I've looked and experimented without success.
What I am trying to accomplish is generate Apache Solr results in the "Search" tab (done; working; screenshot appended), and open those results (returned document titles are hyperlinks to the source documents) in the "Documents" tab (and later, links among entities and documents in the "Graph" tab).
Presently I am working "offline" (localhost), but eventually I'd like to push this work online (virtual private server).
Here is example code and a JS Fiddle, https://jsfiddle.net/pfjtgLs6/
... In this example I am using Google as an example of a link in the "Results" tab, that I would like to open in the "Documents" tab. In practice, those links (plural) would be the titles of the documents (which are Solr search results), or other links within that tab.
I have been having trouble coding an Ajax solution that generically addresses those links (again, plural), rather than hardcoding a URL into the Ajax method.
<!DOCTYPE html>
<html encoding="UTF-8" charset="UTF-8" lang="en-US" language="English" xmlns="https://www.w3.org/1999/xhtml/" itemtype="http://schema.org/WebPage">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script type = "text/javascript">
$(init);
function init(){
$("#tabs").tabs();
}
</script>
</head>
<body>
<div id = "tabs">
<ul>
<li>Search</li>
<li>Documents</li>
<li><a id="documents2_id" href="#documents2">Documents2</a></li>
<li>Graph</li>
</ul>
<div id="search">
<ul>
<li>search item 1</li>
<li>search item 2</li>
</ul>
<p>How can I open this link (Google, for example), in the 'Documents' tab? ... Ajax solutions preferred.</p>
<p>Please note that in my project, I am presently working with local files on a localhost webserver; however, I am also interested in comments and suggestions on CORS issues.]</p>
<p><button type="button" onclick='$("#documents2_id").trigger("click");'>
Go to 'Documents2' tab
</button> </p>
</div>
<div id="documents">
<ul>
<li>documents item 1</li>
<li>documents item 2</li>
</ul>
</div>
<div id="documents2">
<ul>
<li>documents2 item 1</li>
<li>documents2 item 2</li>
</ul>
</div>
<div id="graph">
<ul>
<li>graph item 1</li>
<li>graph item 2</li>
</ul>
</div>
</body>
</html>
When ever using tabs with remote content its best to use jquery ajax to load the data. This will call the external web page and then inside the .done() function this will append the webpage response to the tab/div.
$.ajax({
method: "GET",
url: "http://www.example.com/path/to/url",
data: {}
}).done(function( response ) {
$("#documents").html(response);
});
If you need to debug the web page html response use this below. This way you will be able to see what is returns from the web page url
$.ajax({
method: "GET",
url: "http://www.example.com/path/to/url",
data: {}
}).done(function( response ) {
console.log(response);
});
Note most developers would ensure the external website page is written in json format and then loop over an array of results, yet this is not always possible especially if you do not own the external web page.
You can try using an iframe which is more reliable for external web pages
<div id="documents">
<iframe id="iframe-documents" src="http://www.example.com/page1.php" style="width:400px;height:400px;">
</div>
<div id="documents2">
<iframe id="iframe-documents-2" src="http://www.example.com/page2.php" style="width:400px;height:400px;">
</div>
<div id="graph">
<iframe id="iframe-graph" src="http://www.example.com/page3.php" style="width:400px;height:400px;">
</div>
For reference, here is the solution I derived based on the accepted answer. Clicking the test URLs opens them in the "Documents" tab, and activates / opens that tab.
<html>
<head>
<script type = "text/javascript">
$(init);
function init(){
$("#tabs").tabs();
// This selects <a>-elements in the "id=search_tab" <div>:
$('#search_tab a').on('click', function (event) {
event.preventDefault();
// SWITCH TO #documents_tab :
$( "#tabs" ).tabs({ active: 1 });
$.ajax({
method: "GET",
// url: "http://127.0.0.1:8080/test/d3.html",
url: this.href,
data: {}
}).done(function( response ) {
$("#documents_tab").html(response);
});
})
}
</script>
</head>
<body>
<div id = "tabs">
<ul>
<li>Search</li>
<li>Documents</li>
</ul>
</div>
<div id="search_tab">
<!-- Test URLs: -->
<p>d1.html</p>
<p>d2.html</p>
<p>d3.html</p>
</div>
<div id="documents_tab">
</div>
</body>
</html>
Update
The solution above worked well on hard-coded URLs / links present in the body of the web page.
However, I encountered a rather vexing impediment when I tried to apply the same approach to Ajax-generated hyperlinks, on that page.
That discussion, and my eventual solution are documented in this StackOverflow thread.
Trouble passing Ajax-generated URL to a JQuery tab in web page

Lightbox isn't working properly

I'm currently trying to implement lightbox onto my website, but I cannot get it to work, I don't think there is anything conflicting with it, and I have placed all of the files in the correct locations and linked them how it tells you to on the lightbox 2 website. (http://lokeshdhakar.com/projects/lightbox2/)
Just to double check:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">
is in the head tags,
<script src="js/lightbox.js"></script>
Is at the bottom of the page, just before the closing body tag.
lightbox.css is in the css directory
lightbox.js is in the js directory
<li><img src="images/1.png" data-lightbox="image-1" /></li>
and above is what all of my image tags look like.
I'm unsure why it isn't working. I have the files uploaded to a server, and it doesn't work on there either.
Thanks in advance
The problem is that you're using an img tag, and they explicity say to use an anchor a one.
For me, it's working like a charm:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/js/lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/css/lightbox.min.css" rel="stylesheet" />
<ul>
<li>
Cute baby panda
</li>
<li>
Another
</li>
<li>
Last one
</li>
</ul>
The documentation says to use <a> (anchor tag) to trigger the lightbox.
<li>
<a href="images/1.png" data-lightbox="image-1">
<img src="images/1.png" />
</a>
</li>

Flexslider Plugin Slides Are out of Order

My problem is about Flexslider plugin. I don't know why slides are out of order. Considering my markup:
<div class="flexslider">
<ul class="slides">
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
</ul>
</div>
I have this result:
First li appears as second slide, second li as third slide, and third li as first slide.
This problem appears when I add animation: "slide" option, like this:
$(window).ready(function() {
$('.flexslider').flexslider({animation: "slide"});
});
I'm confused, maybe somewhere in my code some CSS causes this behavior.
This problem is a bug in flexslider version 2.2.2 download package. Even the demo file in the downloaded package does not work fine, really!
After so much investigation I found out the "jquery.flexslider.js" has problem and got a working file from version 2.2.0.
The solution: Get a working package version 2.2.0. If you are interested make a comment to make a working package available to you for download.
It's hard to tell what is going wrong without all of the code, but this may be a solution for you.
$(window).ready(function() {
$('.flexslider').flexslider({animation: "slide", startAt: 0});
});
This is because you put the slides in an unordered list, when you should use ordered list like this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({animation: "slide"});
});
</script>
</head>
<body>
<div class="flexslider">
<ul class="slides">
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
</ul>
</div>
</body>
</html>
EDIT: Try the updated code. Make sure that you load the flexslider.css before JS and you use $(window).load

Unable to get Jquery Smooth scrolling to work

I have been pulling my hair out trying to get functional smooth scrolling to ids on the same page. I have tried just about every solution I have found on google. I get to a point where when it seems everything should work but then even the basic non-js id linking breaks. I am currently using the smooth-scrolling plugin downloaded from the jquery website. The code as it currently stands is such. I don't know a ton about JS or Jquery so I assume I am just missing something. I inspecting the code on functional versions of the smooth scrolling but even when
I do the in-page linking breaks entirely:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simon Moon Landings</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('ul.mainnav a').smoothScroll();
});
</script>
</head>
<body>
<div class="container">
<div class="menu">
<nav>
<ul class="mainnav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</nav>
<img class="logo" src="images/smlogo.gif" width="450" height="288" alt="Simon Moon Landings Logo" onmouseover="on();" onmouseout="off();"></nav>
</div>
<div class="content">
<div class="section" id="one">
<h4>One</h4>
</div>
<div class="section" id="two">
<h4>Two</h4>
</div>
<div class="section" id="three">
<h4>Three</h4>
</div>
<div class="section" id="four">
<h4>Four</h4>
</div>
<div class="section">
<a id="five"><h4>Five</h4></a>
</div>
<div class="section">
<a id="six"><h4>six</h4></a>
</div>
</div>
</div>
</body>
</html>
I found the problem. It was not in the script at all, but in the CSS. I have a two column layout, the menu and anchors are in one column (.menu) and the target divs are in another column (.content) I applied poisiton:fixed to the menu and it started working.
It works fine here.
Make sure that the URL of jquery-smooth-scroll is correct.
I used this copy of jquery-smooth-scroll to test your code: https://github.com/kswedberg/jquery-smooth-scroll
It works for me. See this example: http://jsbin.com/ixefet/1/edit
All I did was change the src for the smooth scroll JavaScript to the online version (https://raw.github.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.min.js) and add some text so you can see the scrolling happen.
Sounds like you're using the wrong src for your smooth scroll script (if that's the case, your JavaScript error log should say undefined function: $.smoothScroll or something like that).
It worked for me while testing on jsfiddle,
here you go
http://jsfiddle.net/mastermindw/XvV9W/1/

jQuery mobile Tabs and Anchors

I would like create a tabbed mobile page using jQuery Mobile. I have got the basics of creating tabs (For Example Tab1, Tab2, Tab3, Tab4) and having each tab load a new page of content. How would I go about using an anchor within a specific tab? So for example if someone wanted to bookmark a link that took them right to Tab4 Anchor1.
I am pretty new to JavaScript and jQuery.
Code below:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<!-- JavaScript HTML requirements -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="d" id="home" data-id="nav">
<header data-role="header" >
<h1>TEST</h1>
<div data-role="navbar" data-id="nav">
<ul>
<li><a href="#home" data-icon="home" data-theme="d" class="ui-btn-active ui-state-persist" >Home</a></li>
<li>Speakers</li>
<li>News</li>
</ul>
</div>
</header>
<section data-role="content"> Home </section>
<footer data-role="footer" class="ui-bar"> Buy Tickets </footer>
</div>
<div data-role="page" data-theme="d" id="speakers">
<header data-role="header" data-id="nav" >
<h1>TEST</h1>
<div data-role="navbar" >
<ul>
<li>Home</li>
<li><a href="#speakers" data-icon="star" data-theme="d"
class="ui-btn-active ui-state-persist">Speakers</a></li>
<li>News</li>
</ul>
</div>
</header>
<section data-role="content">The name attribute specifies the name of an anchor.
The name attribute is used to create a bookmark inside an HTML document.
Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are invisible to the reader. <a name="jib"></a> Speakers </section>
<footer data-role="footer" class="ui-bar"> Buy Tickets </footer>
</div>
</body>
</html>
I think I understand but feel free to comment if I'm misunderstanding your question.
I believe you're misunderstanding how internal JQuery linking works. First thing is take a look at the JQuery Mobile page anatomy, especially at the "Multi-page template structure" in your case:
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Basically every "embedded in the middle of page" section of your page will need to be a stand alone div marked with the data-role="page" tag. Its ID is going to be what you'll point an anchor to.
So in order for your internal <a href="#jib"> to work you have to have a built in div with ID = "jib"
UPDATED ANSWER AFTER COMMENTS
What you're looking for is $.mobile.silentScroll . You want to get your anchor link's Y-position and then have the page scroll to it. There is a little gotcha though. You'll need to add a little pause before the scroll happens because of the JQuery Mobile animations that happen on page transition.
function loadJib()
{
$.mobile.changePage('#jib',{transition:"slide"});
var yPos = $('#mylink').get(0).offsetTop;
setTimeout(function(){
$.mobile.silentScroll(yPos);
},800);
Take a look how I did it ( .8 second delay ).:
http://jsbin.com/ahevav/3/edit

Categories