Javascript attibute grabber

[funstad]

Hey all i have following problem:

 

I have a drag and drop editor which allow me to edit a URL, or allow me to edit a image trough a pop up screen.

Now i want to change this so i edit the code of a image with URL (click able image).

 

As you can see in the code below, everything works fine. Except it only shows 1 attribute

 

So when i remove the <a></a> tags it shows the image url

When i remove the <img></img tags it show the website url

 

when i enable both only 1 shows up (website url)

 

Anyone with a bit more javascript knowledge knows whats wrong ?

 

Javascript:

    //edit link & image    if(big_parent.attr("data-type")=='imagelink'){            $("#sim-edit-imagelink .imagelink").val(big_parent.children('img').attr("src"));    $("#sim-edit-imagelink .imageurl").val(big_parent.children('a').attr("href"));    $("#sim-edit-imagelink").fadeIn(500);    $("#sim-edit-imagelink .sim-edit-box").slideDown(500);        $("#sim-edit-imagelink .sim-edit-box-buttons-save").click(function() {    $(this).parent().parent().parent().fadeOut(500);    $(this).parent().parent().slideUp(500);        big_parent.children('img').attr("src", $("#sim-edit-imagelink .imagelink").val());    big_parent.children('a').attr("href", $("#sim-edit-imagelink .imageurl").val());    });

html code

    <div class="sim-row-edit" data-type="imagelink" style="text-align:left">    <a href="http://google.be" target="_blank">    <img src="http://fietsendezwaluw.be/news/builder/img/layout1/img4.jpg" alt="" width="195" height="155" />    </a>    </div>

html code popup screen

<div class="sim-edit" id="sim-edit-imagelink"><div class="sim-edit-box" style="height:330px;" ><div class="sim-edit-box-title">Edit image and url</div><div class="sim-edit-box-content"><div class="sim-edit-box-content-text">URL image:<span>(please use http://)</span></div><div class="sim-edit-box-content-field"><input type="text" class="sim-edit-box-content-field-input imagelink"/></div><div class="sim-edit-box-content-text">URL link:<span>(please use http://)</span></div><div class="sim-edit-box-content-field"><input type="text" class="sim-edit-box-content-field-input imageurl"/></div></div><div class="sim-edit-box-buttons"><div class="sim-edit-box-buttons-save">Save</div><div class="sim-edit-box-buttons-cancel">Cancel</div></div></div></div>

Click here for the live example

as you can notice when you press on a image it only show http://google.be

and it doesn't show the image url.

Edited October 29, 2015 by funstad

[justsomeguy]

It's going into the if statement that starts on line 119, not the one you posted here.

[funstad]

$(function (){ // Resize    function resize(){    $('.resize-height').height(window.innerHeight - 50);    $('.resize-width').width(window.innerWidth - 250);    //if(window.innerWidth<=1150){$('.resize-width').css('overflow','auto');}        }$( window ).resize(function() {resize();});resize();         //Add Sections$("#newsletter-builder-area-center-frame-buttons-add").hover(  function() {    $("#newsletter-builder-area-center-frame-buttons-dropdown").fadeIn(200);  }, function() {    $("#newsletter-builder-area-center-frame-buttons-dropdown").fadeOut(200);  });$("#newsletter-builder-area-center-frame-buttons-dropdown").hover(  function() {    $(".newsletter-builder-area-center-frame-buttons-content").fadeIn(200);  }, function() {    $(".newsletter-builder-area-center-frame-buttons-content").fadeOut(200);  });$("#add-header").hover(function() {    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='header']").show();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='content']").hide();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='footer']").hide();  });  $("#add-content").hover(function() {    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='header']").hide();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='content']").show();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='footer']").hide();  });  $("#add-footer").hover(function() {    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='header']").hide();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='content']").hide();    $(".newsletter-builder-area-center-frame-buttons-content-tab[data-type='footer']").show();  });          $(".newsletter-builder-area-center-frame-buttons-content-tab").hover(  function() {    $(this).append('<div class="newsletter-builder-area-center-frame-buttons-content-tab-add"><i class="fa fa-plus"></i> Insert</div>');    $('.newsletter-builder-area-center-frame-buttons-content-tab-add').click(function() {    $("#newsletter-builder-area-center-frame-content").prepend($("#newsletter-preloaded-rows .sim-row[data-id='"+$(this).parent().attr("data-id")+"']").clone());    hover_edit();    perform_delete();    $("#newsletter-builder-area-center-frame-buttons-dropdown").fadeOut(200);    })  }, function() {    $(this).children(".newsletter-builder-area-center-frame-buttons-content-tab-add").remove();  });     //Editfunction hover_edit(){$(".sim-row-edit").hover(  function() {    $(this).append('<div class="sim-row-edit-hover"><i class="fa fa-pencil" style="line-height:30px;"></i></div>');    $(".sim-row-edit-hover").click(function(e) {e.preventDefault()})    $(".sim-row-edit-hover i").click(function(e) {    e.preventDefault();    big_parent = $(this).parent().parent();        //edit image    if(big_parent.attr("data-type")=='image'){            $("#sim-edit-image .image").val(big_parent.children('img').attr("src"));    $("#sim-edit-image").fadeIn(500);    $("#sim-edit-image .sim-edit-box").slideDown(500);        $("#sim-edit-image .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);            big_parent.children('img').attr("src",$("#sim-edit-image .image").val());       });    }        //edit link    if(big_parent.attr("data-type")=='link'){        $("#sim-edit-link .title").val(big_parent.text());    $("#sim-edit-link .url").val(big_parent.attr("href"));    $("#sim-edit-link").fadeIn(500);    $("#sim-edit-link .sim-edit-box").slideDown(500);        $("#sim-edit-link .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);               big_parent.text($("#sim-edit-link .title").val());        big_parent.attr("href",$("#sim-edit-link .url").val());        });    }            //edit linkonly    if(big_parent.attr("data-type")=='linkonly'){        $("#sim-edit-linkonly .url").val(big_parent.children('a').attr("href"));    $("#sim-edit-linkonly").fadeIn(500);    $("#sim-edit-linkonly .sim-edit-box").slideDown(500);        $("#sim-edit-linkonly .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);               big_parent.children('a').attr("href", $("#sim-edit-linkonly .url").val());        });    }    //edit link & image    if(big_parent.attr("data-type")=='imagelink'){            $("#sim-edit-imagelink .imagelink").val(big_parent.children('img').attr("src"));    $("#sim-edit-imagelink .imageurl").val(big_parent.children('a').attr("href"));    $("#sim-edit-imagelink").fadeIn(500);    $("#sim-edit-imagelink .sim-edit-box").slideDown(500);        $("#sim-edit-imagelink .sim-edit-box-buttons-save").click(function() {    $(this).parent().parent().parent().fadeOut(500);    $(this).parent().parent().slideUp(500);        big_parent.children('img').attr("src", $("#sim-edit-imagelink .imagelink").val());    big_parent.children('a').attr("href", $("#sim-edit-imagelink .imageurl").val());    });    }        //edit title        if(big_parent.attr("data-type")=='title'){        $("#sim-edit-title .title").val(big_parent.text());    $("#sim-edit-title").fadeIn(500);    $("#sim-edit-title .sim-edit-box").slideDown(500);        $("#sim-edit-title .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);               big_parent.text($("#sim-edit-title .title").val());        });    }        //edit text    if(big_parent.attr("data-type")=='text'){        $("#sim-edit-text .text").val(big_parent.text());    $("#sim-edit-text").fadeIn(500);    $("#sim-edit-text .sim-edit-box").slideDown(500);        $("#sim-edit-text .sim-edit-box-buttons-save").click(function() {      $(this).parent().parent().parent().fadeOut(500);      $(this).parent().parent().slideUp(500);               big_parent.text($("#sim-edit-text .text").val());                               });    }        //edit icon    if(big_parent.attr("data-type")=='icon'){            $("#sim-edit-icon").fadeIn(500);    $("#sim-edit-icon .sim-edit-box").slideDown(500);        $("#sim-edit-icon i").click(function() {      $(this).parent().parent().parent().parent().fadeOut(500);      $(this).parent().parent().parent().slideUp(500);               big_parent.children('i').attr('class',$(this).attr('class'));        });    }//        });  }, function() {    $(this).children(".sim-row-edit-hover").remove();  });}hover_edit();//close edit$(".sim-edit-box-buttons-cancel").click(function() {  $(this).parent().parent().parent().fadeOut(500);   $(this).parent().parent().slideUp(500);});   //Drag & Drop$("#newsletter-builder-area-center-frame-content").sortable({  revert: true});    $(".sim-row").draggable({      connectToSortable: "#newsletter-builder-area-center-frame-content",      //helper: "clone",      revert: "invalid",      handle: ".sim-row-move"});//Deletefunction add_delete(){    $(".sim-row").append('<div class="sim-row-delete"><i class="fa fa-times" ></i></div>');        }add_delete();function perform_delete(){$(".sim-row-delete").click(function() {  $(this).parent().remove();});}perform_delete();//Bekijken $("#newsletter-builder-area-center-frame-buttons-exp").click(function(){         $("#newsletter-preloaded-export").html($("#newsletter-builder-area-center-frame-content").html());    $("#newsletter-preloaded-export .sim-row-delete").remove();    $("#newsletter-preloaded-export .sim-row").removeClass("ui-draggable");    $("#newsletter-preloaded-export .sim-row-edit").removeAttr("data-type");    $("#newsletter-preloaded-export .sim-row-edit").removeClass("sim-row-edit");        export_content = $("#newsletter-preloaded-export").html();        $("#export-textarea").val(export_content)    $( "#export-form" ).submit();    $("#export-textarea").val(' ');     });//Download $("#newsletter-builder-sidebar-buttons-abutton").click(function(){         $("#newsletter-preloaded-export").html($("#newsletter-builder-area-center-frame-content").html());    $("#newsletter-preloaded-export .sim-row-delete").remove();    $("#newsletter-preloaded-export .sim-row").removeClass("ui-draggable");    $("#newsletter-preloaded-export .sim-row-edit").removeAttr("data-type");    $("#newsletter-preloaded-export .sim-row-edit").removeClass("sim-row-edit");        export_content = $("#newsletter-preloaded-export").html();        $("#export-textarea").val(export_content)    $( "#export-form" ).submit();    $("#export-textarea").val(' ');     });          //Export $("#newsletter-builder-sidebar-buttons-bbutton").click(function(){        $("#sim-edit-export").fadeIn(500);    $("#sim-edit-export .sim-edit-box").slideDown(500);        $("#newsletter-preloaded-export").html($("#newsletter-builder-area-center-frame-content").html());    $("#newsletter-preloaded-export .sim-row-delete").remove();    $("#newsletter-preloaded-export .sim-row").removeClass("ui-draggable");    $("#newsletter-preloaded-export .sim-row-edit").removeAttr("data-type");    $("#newsletter-preloaded-export .sim-row-edit").removeClass("sim-row-edit");        preload_export_html = $("#newsletter-preloaded-export").html();    $.ajax({      url: "_css/news.css"    }).done(function(data) {    export_content = '<style>'+data+'</style><link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel="stylesheet" type="text/css"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><div id="sim-wrapper"><div id="sim-wrapper-newsletter">'+preload_export_html+'</div></div>';        $("#sim-edit-export .text").val(export_content);            });                $("#newsletter-preloaded-export").html(' ');        });});

This is the full code, line 119 is empty ?

[justsomeguy]

I was looking at the code on the demo, I was using breakpoints on the script tab to show which if statement it was going into.It looks like it's going into the right one now, but I think setting the value is failing because the img element is not a child of the div element.

[funstad]

the strange thing is when i only have a img element in the div it works for image, if i only have a element in the div it works for url

 

but it only shows 1 when i enable both functions, does it search in the first element only ? maybe it need to be alterd so it search in the entire div tag and not in the first element after the div tag ?

[justsomeguy]

the strange thing is when i only have a img element in the div it works for image, if i only have a element in the div it works for url

That's not strange, that is exactly what you're telling it to do. When you have this structure:

<div><a><img></a></div>

Then the only child of the div is the A tag. The image tag is not a child of the div, the img is a child of the A tag. You're specifically telling it to look for children, not any descendant.

[funstad]

That's not strange, that is exactly what you're telling it to do. When you have this structure:

<div><a><img></a></div>

Then the only child of the div is the A tag. The image tag is not a child of the div, the img is a child of the A tag. You're specifically telling it to look for children, not any descendant.

 

mmmh i see, so this cannot be done this way, then i need to search further :/