How to implement a jQuery script to move links

JavaScript
41

Hello, i got this reply from the css forum: http://www.sitepoint.com/forums/showthread.php?1210105-How-to-get-an-X-in-link-for-deleting-the-link&p=5666258#post5666258 But this will break the Drag/Sort function right?

Thank’s

42

Dunno. Did you try it?
Could you post a link to a page where I can see it not working.

43

Well it kind of works, but the problems are:

  1. The favicon has moved in on the Blue/Red on hover field. As it was before i hade the favicon to the left of the Blue/Red on hover field. I ges i can live whit this.
  2. On drag/sort and if i update the page, all the titles ar missing, the url is still there if i look in the links.txt file but all the titles are missing.

Maybe i should change somthing in VAR list?

http://test3.fcab.se/links/temp/index.php

44

OK, i got the button in place now, so can i use the same or similar ajax code as the one i use to call the process.php file but insted i call a delete.php file
What do you think? Thank you. Or can i just use the .remove()). code? i’v tryed this but it only removes it temporarily if i update the link returns.

Thank you.

45

Hi,

You should be able to do something like:

$(".del-button").on("click", function(){
  $(this).parent().remove();
  $("#sortable").trigger("update");
});

But this is untested and it is late here, so let me know if it doesn’t work and I’ll have a proper look tomorrow.

46

I tested this now, i hade to change .del_button to just button, and it does remove the link, but on page update it returns?

47

Ok. It turns out that you cannot trigger the update event programatically.
However, there is a way to bind a sortupdate event manually and trigger that.

So, this should work:

function getLinkList(){
  var list = ""
  $("ul#sortable>li").each(function(){
    list += $(this).find("p.title").text();
    list += "|";
    list += $(this).find("a").attr("href");
    list += "|||||";
    list += "\
";
  });

  return {linkList: list}
}

$( "#sortable" ).sortable({ 
  opacity: 0.5, 
});

$("#sortable").on("sortupdate",  function(event, ui) {
    $.ajax({
      type: "POST",
      url: "/path/to/your/PHP/Script/",
      data: getLinkList(),
      dataType: "text",
      success: function(res){
        console.log(res)
      },
    });
  });

$("#sortable").disableSelection();
$('#sortable').mousedown(function(){ $(this).css('cursor', 'move');});
$('#sortable').mouseup(function(){ $(this).css('cursor', 'pointer');});
$('.title').mousedown(function(){ $(this).css('cursor', 'move');});
$('.title').mouseup(function(){ $(this).css('cursor', 'pointer');});

$(".del-button").on("click", function(){
  $(this).parent().remove();
  $("#sortable").trigger("sortupdate");
});
48

almost there, but this leaves a blank field when updating the page.

I hade to change this: list += $(this).find(“p.title”).text(); to this: list += $(this).find(“.titles”).text();
and this: $(“.del_button”).on(“click”, function(){ to this: $(“button”).on(“click”, function(){

remeber i have shange this (see below): i dont know if i can have the same class on <div class=“title”> and <span class=“titles”> that’s wy a changed the span class to titles.
<li>
<div class=“title”>
<button class=“del_button” type=“button” name=“delete” value=“X”>X</button>
<a href=“<?=$link?>”><span class=“titles”><?php echo (“$title”);?></span></a></div>
</li>

49

Change this:

$("button").on("click", function(){
  $(this).parent().remove();
  $("#sortable").trigger("sortupdate");
});

to this:

$("button").on("click", function(){
  console.log($(this));
  console.log($(this).parent());
  console.log($(this).parent().parent());
});

and let me know.

50

OK, i’v changed it now

51

Hi,

That’s great.

Change it back to:

$("button").on("click", function(){
  $(this).parent()[B].parent()[/B].remove();
  $("#sortable").trigger("sortupdate");
});

Does that solve your problem?

52

Iiihhaa, at last it works. Cant tell you how much I appreciate your help. Thank you very much.

53

Hello, Just one more thing, How can i add a confirm. I got this but even if i click NO the link delets:

$(“button”).on(“click”, function(){
$(this).parent().parent().remove();
$(“#sortable”).trigger(“sortupdate”);
if(confirm(“Sure you want to delete this update? There is NO undo!”));
});

54

Hi,

Glad that fixed it :slight_smile:

To ask the user to confirm the delete:

$("button").on("click", function(){
  var reallyDelete = confirm("You sure?");
  if(reallyDelete){
    $(this).parent().parent().remove();
    $("#sortable").trigger("sortupdate");
  }
});
55

Now it’s working perfectly. Thank you very much Sir.

56

You’re welcome :slight_smile:

57

Hello, Would it be difficult to implement a jquery edit function to this script, so that i can edit the title of the link in place?

Thank you.

58

No, it wouldn’t be too hard. I would do it like this:

Attach an event listener to the list items which listens for double clicks.
When a user double clicks the element, use a prompt to get the new title.
When the user enters a new title, set the list item’s text and trigger the sortupdate even to have the list updated on the server.

Something like this:

$("li").on("dblclick", function(){
  var newTitle = prompt("Enter new title");
  if(newTitle){
    $(this).text(newTitle);
    $("#sortable").trigger("sortupdate");
  }
});

This is untested, as your original demo page has disappeared.

59

Hello, i’m sorry for late respons. I’v was in Norway working. I tested this did not quit work. Is it possible to have right click, not dblclick?
I will test some more and be in tuch. Thank you.

60

Hi,

No problem.

Just post back in this thread when you are ready :slight_smile: