I try to call gridview and pop up on one button click
pop up
<script type="text/javascript">
$(function () {
$("#divcontainer").dialog({
modal: true,
autoOpen: false,
title: "Chart",
width: 600,
height: 450
});
$("#search_data").click(function () {
$("#divcontainer").dialog('open');
});
});
button
<input type="button" ID="search_data" runat="server" class="sear_btn" value="Search Data" OnServerClick="search_data_Click" />
now when i remove this OnServerClick="search_data_Click" from button then pop up display and grid view not display and when i add this then pop up not appear grid view display
whereas i want both on one button
any solution?
Just trigger your search_data_Click Function after Dialog show code in script.
$("#search_data").click(function () {
$("#divcontainer").dialog('open');
search_data_Click();});
Related
I have a bootstrap alert as a Vue component with the following code:
<template>
<div :class="alertStyling" role="alert">
{{ title }}
</div>
</template>
<script>
export default {
props: ['type', 'title'],
computed: {
styling() {
return 'fw-bold text-center alert alert-'+this.type
}
},
mounted() {
$(document).ready(function() {
$(".alert").fadeIn('fast');
setTimeout(function() {
$("alert").fadeOut('fast');
}, 3000);
})
}
}
</script>
And use it in another components/views like so:
<alert-component type="success" title="Alert title" v-if="alertcondition"></alert-component>
I just added the jquery to fade the alert in and out, and it works perfectly once I click a button and meet the conditions of the alert, displaying the alert and then fading out.
However if I click the button again, the alert doesn't show up, I understand why, I just want to know how I can fix it.
My Idea
I thought of removing the node from html and adding it once the button is clicked, but as I'm passing the alert as a component (html element) I don't know if that is possible.
I need to display a form on my homepage (Wordpress site) in a popup. It is my own form and not a contact 7 or something else.
I want a popup plug-in or the code which can do the same on my home page.
I tried many plug-ins but some has their own form designing which does not give me feature to add my form to it.
I need a plain HTML good looking popup.
You can use JQuery 'dialog' to open a popup with your form.
Simply embed your form in a div with an id and convert it into a dialog.
HTML
<button type="button" id="but" >Open Popup</button>
<div id="dialogForm">
<form id="myform" method="post">
Name:
<input type="text"/><br/>
Phone:
<input type="text"/><br/>
<button type="submit"> Submit </button>
</form>
</div>
JavaScript
$('#but').click(function() {
$("#dialogForm").dialog("open");
});
$("#dialogForm").dialog({
modal: true,
autoOpen: true,
show: {effect: "blind", duration: 800}
});
JavaScript for loading the dialog on load of the homepage
Note that the 'autoOpen' is set to true.
$(window).load(function() {
$("#dialogForm").dialog({
modal: true,
autoOpen: true,
show: {effect: "blind", duration: 800}
});
});
Here's the fiddle: http://jsfiddle.net/sve3Lmje/
Fiddle for opening dialog without click: http://jsfiddle.net/sve3Lmje/1/
I am using jquery ui Dialog box. It works fine but I have a requirement that with one button I should be able to create a dialog box with each click.
So Eg: On first click a dialog box is opened. On second click, a new dialog must be created with the first one intact at it's place. I am implementing sticky notes using this.
How can this be achieved??
You can create Modal Dialog Dynamically
$("button").click(function () {
var dynamicDialog = $('<div id="MyDialog">cotent </div>');
dynamicDialog.dialog({
title: "Success Message",
modal: false,
buttons: [{
text: "Yes",
click: function () {}
}]
});
});
Demo
Note: since all come on same location just move and see the new dialog in the demo
I am using bootstrap 3 with bootstrap Switch for checkbixes and radio buttons. I am trying to alert selected value(when switched) but no alert. Here is my code:
$(document).ready(function () {
$('#preAuth').on('switch-change', function (e, data) {
alert(data.value);
});
});
HTML
<div class ="form-group">
<label class="col-sm-3 control-label">Does payment profile exists ?</label>
<label class="checkbox-inline">
<input type="checkbox" id="preAuth" name="preAuth" data-on="primary" data-off="info" data-on-label="YES" data-off-label="NO" >
</label>
</div>
Original documentation for Switch
If you see Toggle State sample, if you click on "State!" button, it is showing alert but am not able to understand how tha tis displaying the alert. I cannot find code that is calling an alert when clicked on button.
I think you are forgetting to create the switch first. You need this:
$(document).ready(function () {
$('#preAuth').bootstrapSwitch(); //create the switch
//Now you can call it:
$('#preAuth').on('switch-change', function (e, data) {
alert(data.value);
});
});
Fiddle
I want to use modal popups for editing and inserting at view html but i couldn't be sure how to do this?
Is there any way to do this?
I don't want to create new html for insert form because there is only name field. Modal pop-up will suit perfectly i think.
Create your html
<div id="demoDialog" title="Dialog Title">
<!-- Content, form, etc. -->
<form></form>
</div>
Initialize the dialog window
Reference: http://api.jqueryui.com/1.8/dialog/
// Dialog creation
$("#demoDialog").dialog({
resizable: false,
draggable: false,
autoOpen: false,
modal: true,
open: function(){
$(".ui-widget-overlay").hide().fadeTo(800, 0.8);
}
});
// Open the dialog
$("#showDialog").click(function(){
$("#demoDialog").dialog( "open" );
return false;
});
You can use a partial view to load your html content. Have inside your dialog ID somehow to store the value returned from the modal window if you need to feed it to another form or processing.