Dynamically load link in rel attribute. - javascript

I want to dynamically load content using jquery's .load() function. Im storing the links in the .rel attribute of the links. I've got it setup like this:
<script>
$(document).ready(function(){
$('.sidebar_link').click(function(){
var link = this.attr('rel');
event.preventDefault();
$('#content').empty();
$('#content').load(link '#content');
});
});
</script>
<div class="main_menu">
<a class="sidebar_link" href="#" rel="photos.htm">Photography</a>
<a class="sidebar_link" href="#" rel="furniture.htm">Furniture</a>
<a class="sidebar_link" href="#" rel="services.htm">Services</a>
</div>
</div>
Its not working - It doesn't seem to be grabbing the link out of the rel attribute and Im not sure why. Any ideas?

Try this:
var link = $(this).attr('rel');
.attr is not a native JavaScript function, it is from jQuery so you have to wrap this with jQuery
And this:
$('#content').load(link);
You can pass an id for loading fragments, however the url and the id need to be a string literal like so $('#content').load('photos.htm #content') The photos.htm page would need to have an element on the page with id content. If you just want to display the entire contents of the page, just use the url.

In your click handler this is a pure dom element; you need to call the jQuery function on it before accessing the rel attribue
$('#content').load($(this).attr("rel"));

$('#content').load(link '#content');
This is almost certainly throwing a syntax error -- check your JavaScript console. I think you just want .load(link);.

Related

Delete single item using Ajax and jQuery

Please I need to delete item from my website using jQuery and ajax but I don't know how to get the particular id of what I want to delete or less is single see below example:
HTML CODE
<span id="file-1">Orange</span> <a id="delete-1">Delete</a>
<span id="file-2">Orange</span> <a id="delete-2">Delete</a>
<span id="file-3">Orange</span> <a id="delete-3">Delete</a>
<span id="file-4">Orange</span> <a id="delete-4">Delete</a>
<span id="file-5">Orange</span> <a id="delete-5">Delete</a>
<!--Next item will have id of 6 is looping...-->
AJAX JQUERY
<script>
$(document).ready(function(e){
$("#delete-").click(function(){
//Am confused here how to know which id need to be deleted?
var id = $('#file-').val();
$.ajax({
url:'/delete_reply.php',
data:'id='+id,
type: "POST",
beforeSend: function(){
$('#comment-'+id'').attr('class', 'deleting');
},
success: function(data){
$('#comment-'+id'').hide();
$(#comment-'+id'').css('display','none');
}
});
});
});
</script>
Please I don't know how to pass the id of the content I want to delete to the ajax can someone help me?
UPDATE:
It's good approach to assign value to HTML element using data
attributes. For that HTML and jQuery both would look something like
follow.
HTML:
<span id="file-3">Orange</span> <a data-fileid="3" class="cmnDeleteFile">Delete</a>
JQUERY
$(".cmnDeleteFile").click(function(e){
e.preventDefault();
var id=$(this).data('fileid');
// This is how you get id of the file from same element using data attribute.
});
Old answer:
You're following wrong method.
Give every link common CSS class and fire trigger event on click of a link like this.
HTML:
<span id="file-3">Orange</span> <a id="3" class="cmnDeleteFile">Delete</a>
JQUERY
$(".cmnDeleteFile").click(function(e){
e.preventDefault();
var id=$(this).attr('id');
// This is how you get id of the file from same element.
});
Replace your
var id = $('#file-').val();
with
var id=$(this).attr('id').split("-")[1];
Btw, I haven't tested rest of your code. Particularly, your #delete- selector that you have used for binding click event.

Get content (URL) from element and put it into jQuery code

I using .load() function to load content from another page. My page is http://example.org/mypage.htmland contains this jQuery:
$(".content").load("http://example.org/12333.html .data");
How I can get this URL http://example.org/12333.html dynamically from another page: http://example.org/static.html to my jQuery code?
My static.html looks like:
<div class="link">
Link
</div>
You can use this id "target" for another page.
$("#b" ).load( "article.html #target");

Image anchor click is not working in IE7?

I have below image anchor inside a form. Form id is myForm. On click i will call some database call and i have below html code and jquery code.
<a id="new"><img src="image.gif"></a>
jQuery code:
$('#myForm #new').click(function() {
alert("new byutttton clickeddddd");
});
But it is not alerting. Am I doing anything wrong here? It works fine in FF.
"<img src="image.gif">"
I think you are missing href tag use like this
IE7 most likely required an href attribute on the element. You may want to use a different element other than an anchor for this functionality. you also only need one ID for the selector as they should be unique.
Try
<a id="new" href="#"><img src="image.gif"></a>
$('#new').click(function(event) {
event.preventDefault();
alert("new byutttton clickeddddd");
});
I would switch to the 'on' jQuery event
HTML
<img src="/" alt="my image" />
jQuery
$("#new").on("click", function(event){
event.preventDefault();
alert("new byutttton clickeddddd");
});
Remove #myForm. You are overqualifying the selector as well. But that's not a big deal I suppose.

Lightbox using tags or <a href=[base64]>

Is there any lightbox implementation that allows using <a href=base64-string" instead of an actual url?
You only tagged javascript, however if you can use jQuery you could use fancybox to achieve this with little work:
$("a[href^='data:image']").each(function(){
$(this).fancybox({
content: $("<img/>").attr("src", this.href)
});
});
Code example on jsfiddle
Yes I think you can use Slimbox. It has it's own LinkMapper function. This allows you to return any url you want, based on element you are working on at that moment. This is javascript, so you could do an ajax request or whatever kind of link you want to return.
So yes, you need jQuery for this one, but I think there is a Mootools version as well. Have a look at it.
To me works replacing the href with data-remote as follow,
<a data-remote="{{ base64string }}" data-gallery="multiimages" data-toggle="lightbox">
<img src="{{ base64string }}" />
</a>

jQuery problem, jQuery takes over all links on page

<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#results").load( "jquery-routing.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val()} );
return false;
});
});
</script>
<div id="results"> </div>
1
2
that code works fine, only problem that after I run it all my a href links stop to work! The links become jquery ajax calls.. why?
You're $("a") selector matches all <a ...> tags, you need to change it to something more specific:
$("a#someid")
$("a.someclass")
$("div#somecontainer a")
To target specific links, use the id or class tag on your anchor tags.
E.g.
<a class="link1" href=""></a>
<a id="link2" href-""></a>
Do note that id tags are unique within a page and can only be used once.
Reference those links in jQuery using:
$('a.link1').click(function() {}
$('#link2').click(function() {}
or you can combine both:
$('a.link1, #link2').click(function() {}
What you need to do is assign an id or class tag to the link that will call the ajax request. E.g. <a class="ajax" href="">ajax</a> and referencing it with $('a.ajax').click(function () {}
Your setting the onclick event of all anchor tags on the page. Try only selecting the link that you want instead of the more general $("a")
Your selector $("a") indicates all the hiperlink in your page.
You may need to give a specific id to the hiperlink where you want your ajax call to work and then change the selector based on that.
ex:
<a id= "my-link" href="" >ddd</a>
$("a#my-link").click()

Categories