Can Svelte select elements contain buttons? - javascript

I'm trying to insert buttons into select items such as this. I'd like each element to have a button so that a different action can be taken if the button is clicked, such as removing that item from the list. If I put the code for the button in the label field then the button shows up but it doesn't handle the on:click directive.

first try css , test peroperty z-index: 9999; for close button .
if css peroperty not working try to console.log('someting') if close button with click event in javascript ; and if you got console.log('someting');
now you can write fucntion to close your item;
i hope i can alitel help;

No you can't do this.
This library expects the value to be a string, at most a html script for some extra styling, but you cannot add interactions like that.
The code you have is similar to do doing:
<script>
const str = "<button on:click={console.log}>click me</button>"
</script>
{#html str}
While this will render a button Svelte will not add the event handler to this, but rather just render the string as you gave it (in face if you inspect the rendered markup you will still the on:click written there)

Related

HTML table- Create pop up box for each <td> and display xml data

I am working on a project and I am trying to create a web application. So far, my code is like this example. I press the button and a table appears. As you can see in the example, this table contains data of an XML file. THE PROBLEM: I want by clicking each 'td', a popup box to appear. This box will contain different data for each 'td', from the same XML file. Specifically, it will contain an image and some text that refers to the 'td'. Actually, I want something like this. I tried adding this code to my code and I created a popup button in every 'td'. But clicking these buttons, nothing happens. It would be nice if you share your knowledge with me!
i think its help full for your logic.
$('td').click(function () {
$("#MyModal").modal("show");
});
you can assign a class to td , and by click of that id with jquery modle called by
$("#MyModal").modal("show");
checkout this example
P.S. i have used bootstrap model for popup, but any other can be used with minimum change in code.

jQuery dynamic DOM elements are not posted in PHP

I have a button with id btnGo wrapped in a form with id frmNewRequest. When I tried to use
$('#frmNewRequest').on('click', '#btnGo', (function(e){
//do something
}));
it was not working but when I changed to
$('#btnGo').click(function(e){
//do something
});
it was working. What is the different between the two ?
I have a DOM dynamically generated upon the click of btnGo, but when posted to codeigniter's controller, the newly DOM elements are not posted. Anyone now what's the problem ?
First snippet of code tries to click on form. where there is not method to click on form element. So, it will not work.
Whereas the second snippet you are clicking on button and button have a property to click So, it will work for you.

Call javascript from appended text (order cart)

Let's say that I'm building something like order cart.
I have one main page, and a lot of subpages.
On the subpages I have some specified product which user can add to the order by clicking on the button.
If the user click the button, javascript is called grabbing the name of the product and sending it AJAX to some PHP file which add this product name to some $_SESSION array.
If there's atleast one product in the cart, the FIXED div on the bottom of the screen appear. This div runs modal (bootstrap) and it contains all of the products which user had add to the order. Again I'm using here javascript + AJAX to determine click. If it's, there is a call to .php file which return STRING contains all the products. Then, this string is appended to the div inside this modal.
Content of this modal looks like:
'name_of_the_product', 'delete', 'id_from_session_array'
...
...
So I want allow the user to use DELETE option for any of his products in this list if he no longer want this product in the cart. I wrapped the delete text in some anchor and gave it class - let's say '.delete_from_cart'.
And now, when I'm trying to check in javascript if this element ('.delete_from_cart') has been clicked, nothing happens.
Sample code for this looks like:
$('.delete_from_cart').click(function() {
alert("foo");
});
No alert at all after clicking some .delete_from_cart div. However, in the code source all of this anchors has this class.
How to fix that? It seems like javascript doesnt see appended elements from ajax in this div. Any help?
since you said that your modal is generated using an Ajax call, you will not be able to attach the click event to the element. You will need to use jQuerys on() method to bind the onclick.
$("#themodal").on( "click", ".delete_from_cart", function(){
alert('it worked');
});
See on() method more details.
https://api.jquery.com/on/

Ryan Fait custom HTML form and newly added elements

I'm using this script to style checkboxes and radiobuttons and it works fine:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
The problem is when I add checkboxes and radiobuttons dinamically to the page using jquery. These newly created items don't get styled.
Does anyone know a way around this?
EDIT:
I'm adding the new checkboxes dynamically using this:
dropdown.change(function () {
$('#template').tmpl(data).appendTo('.container'); //here the new elements get added
Custom[init](); //THIS DOESN'T TRIGGER
});
I'm not sure how Ryan's script works, but I've worked on a lot of projects that involve custom radio buttons. Typically what I do is, use CSS and set the opacity of the radio button to zero.
input[type='radio'] {
opacity: 0;
}
Next, I wrap the radio button with a span tag with a class something like .checkbox.
Now you should be easily able to attach an event to show/hide a background image.
See complete demo: http://jsfiddle.net/07x4zr79/
I'm not a big fan of using scripts to do things, when you don't.

Create button in rendered template

Let me get straight to the point :). In my project I'm rendering an template, with jquery-tmpl, like this:
box = $.tmpl('<div> [....] <button></button> [....] </div>')
If I insert box in the DOM, nice JQuery buttons show up. According to the DOM (inspected with Chrome) the buttons have already been converted to jquery-ui buttons.
The question: I want to modify these buttons, but - after trying for two hours - I can't figure out how to. I figured
$('button', box).button({'icons' : {'primary' : 'icon name'}})
for example, would do the trick, but it doesn't. How do I modify my buttons?
jQueryUI generally follows a pattern of updating widgets after they've been initialized on DOM elements:
$("#foo").button("option", "optionname", value);
So to update the button's icon after init, you'd do this:
$("button", box).button("option", "icons", {primary:'icon-name'});

Categories

Resources