I have a div with some id that contains some buttons/labels. Its a container itself. I want to have a button that when user clicks on the button a dialog has to appear with the same div but the div has to disappear from the page. So when Detach button is clicked a dialog appears with that div and button changes into Attach. When attach is clicked dialog disappears and regular div appears on the page.
This is what i tried so far, it works only when Detach is clicked, if Attach is clicked dialog closes but regular div does not show up.
$(document).on('click', '#detach', function() {
var button = $(this).text();
if (button == 'Detach') {
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$('.search_div_box').dialog('open');
$(this).html('Attach');
} else if (button == 'Attach') {
$('.search_div_box').dialog('close');
$(this).html('Detach');
}
});
i know im missing a code in Attach part it only closes the dialog but i tried various things like appending to body again the div and so on but didnt work. Thank you
You could use jQuery's $.clone() to create a duplicate of the div
and then show/hide it along with the dialog like this:
var $original = $('.search_div_box');
var $clone = $('.search_div_box').clone();
$clone.dialog({
autoOpen: false,
width: 700,
});
$(document).on('click', '#detach', function() {
var button = $(this).text();
if (button == 'Detach') {
$original.hide();
$clone.dialog('open');
$(this).html('Attach');
} else if (button == 'Attach') {
$original.show();
$clone.dialog('close');
$(this).html('Detach');
}
});
Try this:
html:
<button id="button">Attach</button>
javascript (jquery):
$("#button").click(function() {
var button = $(this).html();
if (button === "Attach") {
$('.search_div_box').dialog('close');
$(this).html('Detach');
}
else {
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$('.search_div_box').dialog('open');
$(this).html('Attach');
}
});
That should work :)
Try this:
HTML
<button class="content detach"></button>
CSS
.content.detach:after {
content: "Detach";
}
.content.attach:after {
content: "Attach";
}
JS
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$(".content, .ui-dialog-titlebar-close").on("click", function(){
if ($(".content").hasClass("detach")) {
$('.search_div_box').dialog('open');
} else {
$('.search_div_box').dialog('close');
}
$(".content").toggleClass("detach attach");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.