I have a JQGrid that has an 'Add' button. In my grid, when the 'Add' button is clicked, a single 'Add' form is opened. The 'Add' form has two default buttons: 'Submit' And 'Cancel'. I want to execute some code on the click event of the Cancel button. I'm not sure how to handle this does anyone have any suggestions?
If I understand you correctly, you want to execute a jquery function upon clicking the CANCEL button. This is what I would do:
<input type="button" value="Cancel" id="btnCancel" />
$('#btnCancel').on('click', function() {
//DO STUFF
});
OR
$('#btnCancel').click(function() {
//DO STUFF
});
OR you could put a function call on the input itself:
function myFunction() {
//DO STUFF
}
<input type="button" value="Cancel" id="btnCancel" onclick="return myFunction();" />
Related
I have a modal that is triggered when the button is clicked in the main page. It works and the success modal is displayed and the url modal is closed. But my problem is that if I click the button again, url modal cannot be displayed. Here's my code.
<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page
<form class="search_form" action="" method="">
#csrf
<label>
<input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
<p>
<span class="alert"></span>
</p>
</label>
<div class="flex_box">
<button class="btn pink" type="button" id="save">Apply</button>
</div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>
And this is my ajax code in closing the url modal.
success: function(store) {
$(".apply_modal").hide();
$(".applyfnsh_modal").toggleClass("open");
$('.alert').html('');
},
error: function() {
$('.alert').html('Error occured while applying. Please try again.');
}
In my modal.js
//apply pop up
$(".apply_btn").on("click", function(){
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
var modal = $(this).parent("div").parent("div");
modal.toggleClass("open");
$("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
if (!$(event.target).closest('.apply_box').length) {
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
}
});
So when the url is valid, save to db and display the success modal, which works, but clicking again the apply button in the page, is not displaying the url modal again. I have tried the answers here but nothing is working.
Ok, so here's what I'm thinking is happening... $(".apply_modal").hide(); is setting your modal's style to "display: none;" directly onto the DOM element. In order to display your modal, your code is simply applying a class of "open" to the modal. Any local styles to a DOM element override any styles from CSS. What this means is that the CSS styles applied to the class "open" don't matter because the div itself has a style attribute in it, and that style attribute contains "display: none". To fix this, wherever there is an instance of .toggleClass("open");, add a "show" declaration (.toggleClass("open").show();). You should do some serious refactoring if this works, but it'll at least let you know if we're on the right track.
I want to use a ViewComponent in a Modal dialog to edit some data, I can get the ViewComponent to show on screen, when I click the button and if I hard code a value it will retrieve the correct data.
#await Component.InvokeAsync("Contact", 2);
or
#await Component.InvokeAsync("Contact", new { id=2 });
But what I can't see how to do is make the Id dependent upon which button I click. Ideally I'd like to just use data-id.
All the examples I've seen used fixed values.
Edit:
The ViewComponent is used in a ModalTagHelper, which is toggled on via an anchor tag, but I also have some jQuery that fires first.
$('.btnShow').on('click', function () {
$('#hdnContactId').val($(this).data('id'));
alert($('#hdnContactId').val());
});
Edit
<modal id="EditContact" title="Contact Details">
<modal-body>
#await Component.InvokeAsync("Contact", new { id=2 });
</modal-body>
<modal-footer>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</modal-footer>
</modal>
OK, so I finally figured a way to do it.
I removed the #await etc from the modal section, so by default it gets no data.
Then in the Controller I added:
public IActionResult ContactViewComponent(int Id) {
return ViewComponent("Contact", Id);
}
and changed my script to:
$('.btnShow').on('click', function (e) {
$('#hdnContactId').val($(this).data('id'));
var container = $(".modal-body");
$.get("/Contact/ContactViewComponent?Id=" + $(this).data('id'), function (data) { container.html(data); });
});
and it now works :)
I have some problem.
This is HTML document.
<input class="input" type='checkbox' id='ev_1' name='ev_1' checked='checked'/>
<label for='ev_1'>
<button class='ui-btn custom-btn' id='issue'>On</button>
</label>
This is javascript.
$("#issue").click(function(event){
alert("!");
}
I think that alert("!"); is occur when I click button.
But, not effect....
I want to show alert("!");
I need your help.
As Omar mentioned, your button should be outside the label and your input checkbox can be inside the label:
<label for='ev_1'>
<input class="input" type='checkbox' id='ev_1' name='ev_1' checked='checked' />On
</label>
<button class='ui-btn custom-btn' id='issue'>On</button>
Then you can have event handlers defined in the jQM pagecreate handler. To handle the checkbox, use a change event handler, and for the button a click handler:
$(document).on("pagecreate", "#page1", function () {
$("#issue").on("click", function (event) {
alert("Button Click");
});
$("#ev_1").on("change", function (event) {
alert("Checkbox Change");
});
});
Here is a working DEMO
Please find below my code:
Template of customer search form
<script type="text/x-kendoui-template" id="customer-search-view-template">
<div class="searchform" id="searchCustomer">
<form class="frmSearch">
<input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
<button class="k-button" data-bind="click: searchClicked">Search</button>
<button class="k-button" data-bind="click: newClicked">New</button>
</form>
</div>
</script>
customer-search.js where loading above template and creating viewmodel object
$(function(){
var views = {};
templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");
var layout = new kendo.Layout($('#customer-search-view-template').html());
layout.render($("#main"));
// Create an observable view model object.
var customer = kendo.observable({
customerName: "John",
searchClicked: function() {
this.set("customerName", "Search clicked");
},
newClicked: function() {
this.set("customerName", "New clicked");
}
});
// Bind the view model to the personFields element.
kendo.bind($('#searchCustomer'), customer);
});
When I click the search button, the text is set in the textbox but this also refresh the page with ?searchTxt=Search+clicked in the address bar.
May I know why this button click refresh the page and how do I stop refreshing the page on button click ???
I would try and place the attribute 'type' for each like so:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
The page thinks that each are performing a form submit action, but by placing the type attribute, you can access the event you intended for search. You may not need your form tags if you are not going to post any data, but rather just a js event handler. Good luck.
The reason is that you are inside a <form>, which has no settings (URL, method, etc), so the browser's default behavior is probably to perform a GET to the current URL (which is a refresh). You could just use <div> instead of <form> if you just want to execute that method.
I have a form with 2 submit buttons , I need to give 2 actions for the form based on the submit button I click,How can this be achieved in codeigniter,Thanks Friends. Here is the sample code.
<?php
$attributes = array('name' => 'frmdisplay');
echo form_open('display/goto1', $attributes);
?>
<input type="submit" class="button" value="Showone" name="goto1btn" />
<input type="submit" class="button" value="Showtwo" name="goto2btn" />
Here how can i provide action to both the pages display/goto1 and display/goto2 based on submit btn pressed. THat means if first submit button is pressed thwn action should be display/goto1 and for second submit button action should be display/goto2.
If I'm not mistaken, isn't the name of the submit button passed as a key in the post data? If so, you can just check that:
if (!empty($this->input->post("goto1btn")))
{
// goto1btn pressed
}
else if (!empty($this->input->post("goto2btn")))
{
// goto2btn pressed
}
else
{
// no button pressed
}