MVC Navigate to Another Page With JavaScript

MVC Navigate to Another Page With JavaScript - javascript

When I click on a city in the map on my homepage, the corresponding screen opens as a pop-up. Then if I click on the body of this opened window I want to go to the detail page of the relevant project. But I could not set the JavaScript code.
My Index.cshtml:
#{ Html.RenderPartial("Map");}
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-body popupList">
</div>
</form>
</div>
</div>
<script>
$('g [type=city]').click(function (el) {
$('#turkey-map g [type="city"]').attr('activeChart', 0)
$(this).attr('activeChart', 1);
var cityid = $(this).attr('city_id');
$('.popupList').html('preparing content...');
$.ajax({
method: "get",
url: '#Url.Action("ProjectListPartial", "Home")',
data: { cityID: cityid, UnitID: #UnitID }
})
.done(function (msg) {
$('.popupList').html(msg);
$(".modal").modal();
});
});
</script>
And my ProjectListPartial.cshtml:
<div class="ProjectsPartial">
#foreach (var item in Model)
{
<div class="ProjectPartialBody" data-id="#item.ID">
<div class="portlet-body">
<div class="mt-element-list">
<div class="mt-list-head list-news ext-1 font-white bg-grey-gallery">
<div class="list-head-title-container">
<h5 class="list-title">#item.tbl_Unit.Name</h5>
<br />
<h3 class="list-title">#item.Name</h3>
</div>
</div>
<div class="mt-list-container list-news ext-1">
<ul>
<li class="mt-list-item">
<div class="list-icon-container">
<a href="#Url.Action("Detail", "Project", new {ID = item.ID })">
<i class="fa fa-angle-right"></i>
</a>
</div>
<div class="list-datetime bold font-red"> Sözleşme Başlangıç ve Bitiş Tarihleri </div>
<div class="list-datetime bold font-red"> #((item.SozBasTarihi ?? DateTime.Now).ToString("dd/MM/yyyy")) / #((item.SozBitisTarihi ?? DateTime.Now).ToString("dd/MM/yyyy")) </div>
<div class="list-item-content">
<div class="form-group">
<label>Nakdi Tamamlanma Oranı: %#item.NakdiTamOrani</label>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" style="width: #(item.NakdiTamOrani)%;"></div>
</div>
</div>
<div class="form-group">
<label>Fiziki Tamamlanma Oranı: %#item.FizikiTamOrani</label>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" style="width: #(item.FizikiTamOrani)%;"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
}
</div>
As you can see, when I click city on the map, pop-up windows is open. What I want to do is when I click on pop-up body; I want to go to the detail page of the relevant project with JavaScript. I've try with JavaScript but I failed.
My JavaScript code in ProjectListPartial.cshtml page:
<script>
$('div.ProjectPartialBody').click(function (el) {
var projectid = $(this).data('id');
$.ajax({
method: "get",
url: '#Url.Action("Detail", "Project")',
data: { projectID: projectid }
})
.done(function (msg) {
// I do not know what to write here.
});
});
</script>

try this:
<script>
//pass vale in url
function navigateURL(value) {
var url = '#Url.Action("Index", "ProductView", new {id = "_value" })';
var urlWithValue = url.replace('_value', value);
window.location.href = urlWithValue;
}
</script>

Related

events on multiple calendar it is not taking the id of selected tab

Hi there I have this calendar can someone help me how can I display data of proper agent id this foreach is showing the same for each calendar is it possible to make a query or something
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var agent_id = $(e.target).attr("agent_idja") // activated tab
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
$('#calendar' + agent_id).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
events: [
#foreach($appointments_agents as $appointmenti)
{
title : '{{ $appointmenti->agent_id }}',
start : '{{ $appointmenti->start_at }}',
},
#endforeach
],
drop: function(event) {
var apo_id = $(this).attr('apo_id');
console.log(agent_id);
$.ajax({
method: "POST",
url: "{{ url('/change-agent') }}",
data: {
_token: "{{ csrf_token() }}",
agent_id: agent_id,
appointment_id:apo_id
},
success: function () {
console.log("ok");
},
error: function () {
console.log("error");
}
});
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
});
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Agents</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs customtab" role="tablist">
#foreach($agents as $key=> $agent)
<li class="nav-item"> <a class="nav-link " data-toggle="tab" agent_idja="{{$agent->id}}" href="#agent{{$agent->id}}" id="tab{{$key}}" role="tab"> <div class="user-profile dropdown m-t-20">
<div class="user-pic">
<img src="{{ asset('app/assets/images/users/1.jpg') }}" alt="users" class="rounded-circle img-fluid" />
</div></div> <span class="hidden-xs-down">{{$agent->name}}</span></a> </li>
#endforeach
</ul>
<div class="p-20">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag & Drop Appointments </h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id='external-events'>
#foreach($appointments as $appointment)
<div class='fc-event' apo_id="{{$appointment->id}}" > {{$appointment->firstname}} <br>{{$appointment->start_at}}</div><br>
#endforeach
<p>
<input type='checkbox' id='drop-remove' checked/>
<label for='drop-remove'>remove after drop</label>
</p>
</div>
</div>
</div>
</div>
</div><div class="col-lg-9">
<div class="tab-content tabcontent-border">
<?php $i=1; ?>
#foreach($agents as $key=> $agent)
<div class="tab-pane agent tabs{{$key}}" id="agent{{$agent->id}}" agent_id="{{$agent->id}}" role="tabpanel">{{$agent->id}}
<div class="card-body b-l calender-sidebar">
<div id='calendar-container'>
<div id='calendar{{$agent->id}}' class="calendar" agent-id="{{{$agent->id}}}"></div>
</div>
</div>
</div>
<?php $i++; ?>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So this is how it is shown
As you can see here on the attached screenshot I managed to change the calendars with tabs and when I switch it shows the calendar for that agent id, but for the events it does not work I dont know why does someone have an idea what should I do..? I tried inside the foreach of appointment to use a condition like if $appointment->agent_id == agent_id but does not work

How to load XML data on button click?

I created a sample code to view xml data. When the page is loading, my current code load full xml file. But I need to load XML file after the button click. How can I fix the issue?
here is the code
$(document).ready(function(){
$.ajax({
type:"GET",
url:"contact.xml",
dataType:"xml",
success:showCD
});
});
function showCD(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<div class="thumbnail">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div> </div>`;
$("#xmldata").append(html);
});
}
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>
Plunker

Just add a click event listener to the button and put the AJAX request inside the handler.
$(document).ready(function(){
// adding click event listener to the button
$('#myButton1').on('click', function() {
// make the AJAX request
$.ajax({
type:"GET",
url:"contact.xml",
dataType:"xml",
success:showCD
});
});
});
function showCD(xml){
xml = $(xml).children();
$("#xmldata").empty();
xml.each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<div class="thumbnail">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div> </div>`;
$("#xmldata").append(html);
});
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>

How i can do a modal with picture

I ask a question about my function Javascript.
I recover a data list after an a ajax call.
In the list i have a field with a picture and i want show this in a modal bootstrap.
In my code the picture is displayed below the column.
Thanks in advance guys :)
$.when(promiseListeRubriqueDocument).then(function(result) {
var data = JSON.parse(result);
$(".listRubrique").html("");
$.each(data, function(index, item) {
console.log(item);
var rubTemplate = $(".template");
var modal = (".img");
var rub = $(rubTemplate).clone().removeClass("template").removeClass("hide");
$(rub).find(".labelRubrique").text(item.codeRubrique);
$(rub).find(".inputRubrique").val(item.libelleRubrique);
$(rub).find("div.rubrique-image").attr("data-rubrique-id", item.idRub);
$(rub).find("div.rubrique-image[data-rubrique-id=" + item.idRub + "]").click(function(i, element) {
if (item.imageRubrique) {
if ($("" + "[data-rubrique-id=" + item.idRub + "]").find('img.rubrique-exemple').length < 1) {
$("" + "[data-rubrique-id=" + item.idRub + "]").append("<div><img class='rubrique-exemple' src=" + item.imageRubrique + " width='100px' /></div>");
}
}
});
$(".listRubrique").append(rub);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="list-group-item template hide">
<label class="labelRubrique" style="font-weight:bold"></label>
<div class="row rubrique-image" data-rubrique-id="">
<div class="col-md-8">
<input name="enteteRubrique" id="enteteRubrique" maxlength="255" type="text" class="form-control aveo-icon aveo-magnifier inputRubrique" disabled/>
</div>
<div class="col-md-3">
<a class="seeImage" href="javascript:void(0);" role='button' aria-expanded='false' aria-controls='collapseExample'><span class='glyphicon glyphicon-eye-open fa-lg'></span></a>
</div>
</div>
</li>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<liferay-ui: messagekey="admin.gestion.documents.rubriques.disponibles" />
</div>
<div class="panel-body">
<ul class="list-group listRubrique">
</ul>
</div>
</div>
</div>
</div>

"Lightbox" is the common name for what you've described. Since you mentioned a modal bootstrap, something like http://jbutz.github.io/bootstrap-lightbox/ is likely to be aligned with your goals.

simply clone your "field" div, give it id then append to a bootstrap modal body. Or to avoid appending new clone everytime: use .html() instead.
from https://www.w3schools.com/bootstrap/bootstrap_modal.asp with modification, using bootstrap 3.3.7, jquery 3.3.1
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id='myColumn'>
<img src="https://via.placeholder.com/350x150"/>
<p>Some text in the modal.</p>
</div>
</div>
<script>
$(document).ready(function(){
// var field = $("" + "[data-rubrique-id=" + item.idRub + "]").clone();
var fieldtest= $('#myColumn').clone();
var modal = $("<div id='myModal' class='modal'>\
<div class='modal-dialog'>\
<div class='modal-content'>\
<div id='myBody' class='modal-body'>\
</div>\
</div>\
</div>\
</div>").appendTo('body');
// $('#myBody').html(field);
$('#myBody').html(fieldtest);
});
</script>
</body>
`

jquery each selector and ajax not producing the right results

I am trying to simplify my code but running into issues where it is not working when it place in an each loop.
Here is what I am trying to do:
- html has n parent DIV that generates a report via an AJAX call to pull data
- each div respective to report utilizes a data attribute to define which report to pull
- based no the results of the report, it should populate the html with the respective results.
HTML Code (to simplify, using n = 2):
<div class="widget-box widget-hits card no-border bg-white no-margin" data-widget-report="widget-hits">
<div class="container-xs-height full-height">
<div class="row-xs-height">
<div class="col-xs-height col-top">
<div class="card-header top-left top-right">
<div class="card-title text-black hint-text">
<span class="font-montserrat fs-11 all-caps">Weekly Hits
<i class="far fa-chevron-right p-l-5"></i>
</span>
</div>
<div class="card-controls">
<ul>
<li>
<a data-toggle="refresh" class="card-refresh text-black" href="#">
<i class="far fa-circle fa-xs"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-xs-height ">
<div class="col-xs-height col-top relative">
<div class="row">
<div class="col-sm-6">
<div class="p-l-20 widget-total">
<h3 class="no-margin p-b-5"></h3>
<p class="small hint-text m-t-5">
<span class="label m-r-5">%</span>
</p>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="widget-chart"></div>
</div>
</div>
</div>
</div>
<div class="widget-box widget-sales card no-border bg-white no-margin" data-widget-report="widget-sales">
<div class="container-xs-height full-height">
<div class="row-xs-height">
<div class="col-xs-height col-top">
<div class="card-header top-left top-right">
<div class="card-title text-black hint-text">
<span class="font-montserrat fs-11 all-caps">Weekly Sales
<i class="far fa-chevron-right p-l-5"></i>
</span>
</div>
<div class="card-controls">
<ul>
<li>
<a data-toggle="refresh" class="card-refresh text-black" href="#">
<i class="far fa-circle fa-xs"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-xs-height ">
<div class="col-xs-height col-top relative">
<div class="row">
<div class="col-sm-6">
<div class="p-l-20 widget-total">
<h3 class="no-margin p-b-5"></h3>
<p class="small hint-text m-t-5">
<span class="label m-r-5">%</span>
</p>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="widget-chart"></div>
</div>
</div>
</div>
</div>
JS:
$('.widget-box').each(function() {
$widget_report = $(this).data('widget-report');
if ($widget_report !== undefined) {
$.ajax({
type: 'get',
url: '/admin/reports/' + $widget_report,
dataType: 'json',
success:
function(data) {
if (data.success) {
var labelsData = [];
var seriesData = [];
var trend = data.trend * 100;
widget_class = '.' + $widget_report + ' .widget-chart';
console.log(widget_class);
$(this).find('.widget-total h3').text(data.total);
$(this).find('.widget-total p span').text(trend + '%');
trend_span = $(this).find('.widget-total p').children('span');
if(data.trend > 0) {
$(this).find('.widget-total p span.label').addClass('label-success');
$(this).find('.widget-total p').text('Higher');
}
else {
$(this).find('.widget-total p span.label').addClass('label-important');
$(this).find('.widget-total p').text('Lower');
}
$(this).find('.widget-total p').prepend(trend_span);
$.each(data.values, function(key, value){
date = new Date(value.label + 'T00:00:00');
labelsData.push(date.getMonth() + 1 + '/' + date.getDate());
seriesData.push(value.value);
});
chartData = {
labels: labelsData,
series: [seriesData]
}
alert(widget_class);
new Chartist.Bar(widget_class, chartData, {
axisX: {
showGrid: false
},
axisY: {
showGrid: false,
showLabel: false
}
});
}
}
});
}
});
Here are the problems I've encountered:
$(this).find('.widget-total h3').text is not updating the respective DIV group
widget_class for some reason is always returning the last DIV group... even if the last DIV group was returning data.success = false. Ex: above would return widget-sales twice and not widget-hits and then widget-sales.
I am scratching my head on this one... I am able to get this to work without the .each loop and distinctively create one for each... but was hoping to make this universal and allow the control rely on the data-widget-report attribute on the html.
Is this the proper approach?
Any help / direction is appreciated...

Add var in front of widget_class and $widget_report so they are scoped to the function instead of global. I think that will fix your problem. Right now $widget_report gets replaced by the last widget even before the ajax calls are completed.
As for the $(this) not working, you have to assign it to a variable before you make the ajax call.
$('.widget-box').each(function() {
var widgetBoxElement = $(this);
var $widget_report = $(this).data('widget-report');
if ($widget_report !== undefined) {
$.ajax({
type: 'get',
url: '/admin/reports/' + $widget_report,
dataType: 'json',
success:
function(data) {
if (data.success) {
// use widgetBoxElement here instead of $(this)
}
}
});
}
});

Show different forms within a modal on click of different buttons

I'm definitely going about this all wrong but there must be a way to simplify this process. I have a modal that contains 4 forms all hidden except one that has a class "active". I need to trigger each individual form based on click events from different buttons ie. sign-up / forgot-password / sign-in etc. so when i click the sign-up button the modal appears with the signup form active, clicking the forgot password just switches the form to show the forgot password. and so on.
my thinking was to create:
function modalSwitch() {
var btnModal = [$('btn-one'),$('btn-two'),$('btn-three'), $('btn-four')];
var formModal = [$('form-one'),$('form-two'),$('form-three'), $('btn-four')];
btnModal.click(function(){
if ( btnModal[].attr('class') === formModal[].attr('data-id')) {
formModal.addClass('active');
}
});
}
modalSwitch();
instead of the on click event for :
function modalSwitch() {
var btnOne = $('.btn-one');
var btnTwo = $('.btn-two');
var btnThree = $('.btn-three');
var btnFour = $('.btn-four');
var btnFive = $('.btn-five');
var btnSix = $('.btn-six');
var modalOne = $('.modal-one');
var modalTwo = $('.modal-two');
var modalThree = $('.modal-three');
var modalFour = $('.modal-four');
var modalFive = $('.modal-five');
var modalSix = $('.modal-six');
btnOne.click(function(){
modalOne.addClass('show');
modalTwo.removeClass('show');
modalThree.removeClass('show');
modalFour.removeClass('show');
modalFive.removeClass('show');
modalSix.removeClass('show');
....
});
}
modalSwitch();
but i'm so lost right now, any help will be appreciated

You can use data-src attribute to achieve this, for example:
<a href="#" class="btn btn-normal open-logs" data-src="my_details" data-heading="My Heading">
Demo
</a>
<div id="my_details" class="hide">
your form here
</div>
Create a css class to hide the div by default.
Something like this to open modal box:
$(document).ready(function() {
$(".open-logs").click(function(e){
e.preventDefault();
var logId = $(this).data('src');
var html = $("#"+logId).html();
$("#myModalLabel").html($(this).data('heading'));
$("#modalBody").html(html);
$("#logModal").modal('show');
});
});

Code below will solve all your query. Code in snippet have an extra set of css and js which will generate bootstrap model for you. You don't need to write conventional and same block of code for all your models.
function simpleSHow(title)
{
var msg=$('#simple-div');
BootstrapDialog.show({
title : title,
message: $('#simple-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function complexSHow(title)
{
var msg=$('#complex-div');
BootstrapDialog.show({
title : title,
message: $('#complex-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv1(div_id)
{
var msg=$('#lavel-2_div-1');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-1'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv2(div_id)
{
var msg=$('#lavel-2_div-2');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-2'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv3(div_id)
{
var msg=$('#lavel-2_div-3');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-3'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv4(div_id)
{
var msg=$('#lavel-2_div-4');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-4'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>
<!-- This is a container Div which contains all the div to show when bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
<div id="simple-div">
<h1>This is H1 Heading</h1>
This is most simple coding
<br>
<button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
<button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
</div>
<div id="lavel-2_div-1">
<h3>This is Level 2 Header</h3>
<span style="color : blue;">This is Level 2 Message 1</span>
</div>
<div id="lavel-2_div-2">
<h3>This is Level 2 Header</h3>
<span style="color : greenyellow;">This is Level 2 Message 2</span>
</div>
<div id="lavel-2_div-3">
<h3>This is Level 2 Header</h3>
<span style="color : pink;">This is Level 2 Message 3</span>
</div>
<div id="lavel-2_div-4">
<h3>This is Level 2 Header</h3>
<span style="color : green;">This is Level 2 Message 4</span>
</div>
<div class="container-fluid" id="complex-div">
<button type="button" class="btn btn-primary" onclick="showDiv3()">Lavel-2 div-3</button>
<button type="button" class="btn btn-primary" onclick="showDiv4()">Lavel-2 div-4</button>
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
       
<button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div Show</button>
       
<button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex Div Show</button>

Develop Reference

JavaScript is the programming language of the Web.

MVC Navigate to Another Page With JavaScript - javascript

try this: <script> //pass vale in url function navigateURL(value) { var url = '#Url.Action("Index", "ProductView", new {id = "_value" })'; var urlWithValue = url.replace('_value', value); window.location.href = urlWithValue; } </script>

Related

events on multiple calendar it is not taking the id of selected tab

How to load XML data on button click?

How i can do a modal with picture

jquery each selector and ajax not producing the right results

Show different forms within a modal on click of different buttons

Categories

Resources