I am really new to javascript and jquery, but I am trying to create a page that will allow the user to click on a Country name and information for that country will load in a div from a separate html file.
Else where I found this code which works nicely for this, using the .click(function) on the <a> tag:
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("a").click(function(){
$j.ajax({
url: $j(this).attr("href"),
success: function(response) {
$j("#partnerContent").html(response);
}
});
return false;
});
});
Here is the basic html:
<div id="contentcontain">
<div class="partnercol1">
<div class="container">
<div id="menu" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">International Sales <span class="caret"></span></button>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Belgium</li>
<li>Brunei</li>
<li>Bulgaria</li>
</ul>
</div>
</div>
</div>
<div class="partnercol2">
<div id="partnerContent"></div>
</div>
However, now every <a> tag on the page (including top and bottom menus) loads their href into the div when clicked. How can I target just the div containing the state menu to work with this function?
Make the selector for the elements you're attaching the events to more restrictive:
// this selects all the anchors below the items with ID menu
$j("#menu a").click(function () {
...
});
in your html, put:
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a class="menu-item" href="partners/belgium.html">Belgium</a></li>
<li><a class="menu-item" href="partners/brunei.html">Brunei</a></li>
<li><a class="menu-item" href="partners/bulgaria.html">Bulgaria</a></li>
</ul>
And in your javascript
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".menu-item").click(function(){
$j.ajax({
url: $j(this).attr("href"),
success: function(response) {
$j("#partnerContent").html(response);
}
});
return false;
});
});
You're loading an entire html page, which means you're loading
<html>...</html>
and then stuffing that in its entirety into your page, that means you'll eventually have
<html>
....
<html>...</html>
...
</html>
which is NOT valid. If you're trying to replace the contents of a single <div> in your page, then either you fetch that entire page into a var and slice out the chunk you want, or have jquery fetch/insert ONLY the part you want, e.g.
$('#div_to_replace').load('source_of_new.html #id_of_element_to_use_for_replacement');
Note the second #... argument in the .load() call. That tells jquery to ignore everything in the page EXCEPT for the specified element/ID. Only that ID's contents will be stuffed into #div_to_replace.
Related
I inherited an application and trying to figure out way scripts on the tabs are loading more than once.
It is an basic bootstrap tab feature that loads partial views.
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
<li><a data-target="#reputation" data-toggle="tab">Reputation</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
#Html.Action("SocialConfig", "Admin", new {area = "Admin", accountID = ViewBag.AccountID})
</div>
<div class="tab-pane" id="reputation">
#Html.Action("ReputationConfig", "Admin", new { area = "Admin", accountID = ViewBag.AccountID })
</div>
</div>
There is an JavaScript file included on each partial view. Each script will get loaded as many times there are #Html.Action
So for instance I have 2 #Html.Action so the script on the SocialConfig view will load twice and the script on the ReputationConfig will also load twice.
How can i stop this silly behavior.
If you are using jQuery to add some event handlers then check if the selectors are filtering elements of both partials views. If so you should change your selector in way that it is contextualized to your partial view.
Ex:
Partial view 1
<div>
<button class="button" type="button">Click me</button>
</div>
<script>
$(".button").click(function () { alert("click on button") });
</script>
Partial view 2
<div>
<a class="button">Click me</a>
</div>
<script>
$(".button").click(function () { alert("click on link") });
</script>
A example of contextualized events:
Partial view 1
<div id="my-partial-view-1-container">
<button class="button" type="button">Click me</button>
</div>
<script>
$("#my-partial-view-1-container").find(".button").click(function () { alert("click on button") });
</script>
Partial view 2
<div id="my-partial-view-2-container">
<a class="button">Click me</a>
</div>
<script>
$("#my-partial-view-2-container").find(".button").click(function () { alert("click on link") });
</script>
When working with partialview try to avoid loading script, add it instead in the main view. Why not just add it in the current view?
Here I need to click on a thumbnail, so that it will show the details on other page, it should show the details of that particular thumb only. I used xml file here to fetch the data and display thumbnail. I am unable to pass the values to other page and open it at the same time onclick event. pls help
<div class="container-page">
<div class="row" id="portfolio">
<div class="col-md-2">
<nav>
<ul class="nav nav-pills nav-stacked" id="test">
<li role="presentation" class="active">Services</li>
<li role="presentation">Desktop</li>
<li role="presentation">Web</li>
<li role="presentation">Mobile</li>
<li role="presentation">Design</li>
</ul>
</nav>
</div>
<div class="col-md-10">
<div class="row" id="thumb">
</div>
</div>
</div>
</div>
<!-- js -->
$.ajax({
type:"GET",
url:"portfolio.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('thumbnail').each(function()
{
var $thumbnail=$(this);
var type=$thumbnail.find('type').text();
var descr=$thumbnail.find('description').text();
var title=$thumbnail.attr('title');
var imageurl=$thumbnail.attr('imageurl');
var thum='<div class="col-xs-6 col-md-3"> </div>';
thum=$(thum).appendTo("#thumb");
thum = $('').appendTo(thum);
var thumName = $('<div class="thumTitle"></div>').appendTo(thum);
$('<h2>'+title+'</h2>').appendTo(thumName);
$('<p>'+type+'</p>').appendTo(thumName)
thum = $('<img src="'+imageurl+'" alt="image" class="thumbImgSize imgSlide">').appendTo(thum);
$(".forHove").mouseup(function()
{
//here is the redirection code, and want to pass $thumbnail to testxml.html page
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
});
}
});
Well, one of the alternative is using Web Storage API.
Just store img html and use it.
// use 'click' instead of 'mouseup'
$(".forHove").click(function()
{
// store image html to sessionStorage
window.sessionStorage.image_data = $thumbnail.clone().wrapAll("<div>").parent().html();
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
// in http://www.bookmane.in/skillworks/testxml.html
// You have data sotred and insert it somewhere
$(document.body).append(window.sessionStorage.image_data);
You can achieve this thing using the following steps:
Add a form tag like
<form action="YOUR_PATH" method="GET">
<a class="thubnailClick" href="#" >
<html_of_your_thumbnail>
<input type="text" name="NAME_OF_PARAMETER" />
</a>
</form>
Now override the click event of <a> tag with
$(document).ready(function() {
$(".thubnailClick").on('click', function(event) {
// to override the default behavior of <a> tag.
preventDefault();
// Find the form element using closest() of jQuery.
// Call submit event of that form using $(form_element).submit();
});
})
Now on the other page you can get parameter from URL using location.search or follow:
Getting Query params using JavaScript
Now use these Params according to your needs.
onmouseOver of eacuser i want to show the change password as a dropdown(as can seen in attached image) but with my code changes i am getting change password next to eacuser link.Can anyone please give me some hint how to achieve.I attached the two image file.please check for reference
<div id="appLinks">
<ul id="appLinks_list" class="nav">
<span id="appLink_csrname" class="ui-state-default csrname"><a onmouseover="onMouseOver()">eacuser</span>
<li id="appLink_chngpwd" class="ui-state-default chngpwd">Change Password</li>
<li id="appLink_about" rtlOrder="3"><img src="${link.getContextPath()}${msg.get("icon.information")}" border="0px;" align="top">About</li>
<li id="appLink_logout" rtlOrder="2"><img src="${link.getContextPath()}${msg.get("icon.logout")}" border="0px;" align="top">LogOut</li>
<li id="appLink_help" rtlOrder="1"><a target="eachelp" href="$msg.get("eac.helpPath")"><img src="${link.getContextPath()}${msg.get("icon.help")}" border="0px;" align="top">Help</a></li>
</span>
</ul>
</div>
<script>
$(document).ready(function(){
$(".csrname").mouseleave(function(){
//$('#appLink_chngpwd').hide();
$(".csrname li").css("display","none");
});
$(".csrname").mouseover(function(){
//$('#appLink_chngpwd').show();
$(".csrname li").css("display","block");
});
</script>
use this,
<script>
$(document).ready(function(){
$('#appLink_chngpwd').hide();
$(".csrname").mouseover(function(){
$('#appLink_chngpwd').show();
});
$(".csrname").mouseleave(function(){
$('#appLink_chngpwd').hide();
});
});
</script>
In your code you have used like below.
$(".csrname li").css("display","none");
It means you are making display none for child property of span having class .csrname
At present in your code, "Change Password" is sibling element not a child.
So change your code like below.
$(".csrname + li#appLink_chngpwd").css("display","none");
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>
I have some HTML:
<div class="post-container self">
<a href="/user/Wiz">
<img class="avatar" alt="Profile Picture" src="">
</a>
<div class="post-body">
<div class="post" style="margin-left:0px;">
<div class="post-timestamp" style="display:inline-block;float:right">
Oct 31
</div>
<div class="post-functions dropdown displaynone" style="float:right;margin-right:5px;">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
<i class="icon-cog">
</i>
</a>
<ul class="dropdown-menu post-dropdown" role="menu" aria-labelledby="dLabel">
<a class="post-delete" href="javascript:void(0)"><i class="icon-trash"> </i>Delete</a>
</ul>
</div>
</div>
</div>
</div>
And with that, I have some Jquery:
$('.posts-content').on('click', '.post-delete', function(e) {
$('.post-dropdown').dropdown();
if (confirm('Are you sure you want to delete this post?')) {
var $this = $(this);
$.ajax({
url: '/a/delete_post',
type: 'POST',
dataType: 'json',
data: {'p' : post_id},
success: function() {
//...
return true;
}
});
}
return false;
});
Everything works perfectly the first click, but if I go to another post, and try to click .post-delete, the event never fires, and nothing shows up in the console. It also works if I use $.click(), but I need to dynamically create elements. Why does the $.on('click') not fire the second click?
My guess is that dropdown plugin you use change the DOM structure.
$('.post-dropdown').dropdown();
BTW,
$this.parent().parent().parent().parent().parent() this is really really bad practice.
You should use closest instead.
If you are dynamically creating elements try:
$(document).on('click', '.post-delete', function(e) { });