Solved

Could you point how to a modal view obtains a main's view control value by using jQuery and then disponibilize it to a function?

Posted on 2016-11-03
13
29 Views
Last Modified: 2016-11-09
Hi Experts

Could you point how to a modal view obtains a main's view control value by using jQuery and then disponibilize it to a function?

Main view
img006
50 is the id to be obtained in modal view.

jQuery modal code:
.on("edit", function(e, data) {

      // How to code here to obtain the "id" value ?
	var $form = $(this);

	$.each(data, function(field, value) {
		//console.log(field+ " - " +value);
		var
			avoid = ' . json_encode($options['edit']['avoid']) . ',
			$field = $form.find(\'[name="\' + field + \'"]\'),
			tag = ($field.length ? $field.prop("tagName").toLowerCase() : undefined)
		;
				if(field ==="anexo"){
					if(value !==null){
						$(".anexo").show();
						var link = "";
						$.each(value,function(id, valor){
							var anexo = valor.anexo;
							anexo = anexo.split("/");
							anexo = $(anexo).get(-1);
					
							
							//Excluir button must to send the id (obtained from main view) and the anexo value - still obtained
							link = link+ "<p><a href=\'"+valor.anexo+ "\' target=\'_blank\' class=\'anexo\' name=\'link\'>"+anexo+"</a><button type=\'button\'  class=\'call-ajax\' data-anexo=\'" + anexo + "\'>Excluir</button></p>";  
						
																;
						});
						$("#anexo").html(link);
					}else{
						$(".anexo").hide();
					}
				}

Open in new window


The above code (modal) produces:
img003

Function to be called by the "Excluir" button - here a Codeigniter controller must be called with 02 arguments id and anexo (still obtained)

  $("body").on("click", ".call-ajax", function() {
	// obtém o valor do link
	console.log("chamada ajax");
  

	data = {
	  anexo: $(this).data("anexo")
	};

	console.log(data);

	// AJAX para o controller
	$.ajax({
	  url: "reclamacao/delete_anexo",
	  data: data,
	  type: "POST"
	}).done(function(resp) {
		console.log("deleção OK");
	  // Display the resposne
	  //$("#result").append($("<li/>").html(resp));
	});
  });

Open in new window


Thanks in advance!
0
Comment
Question by:Eduardo Fuerte
  • 7
  • 3
  • 3
13 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41872991
But what is rendering out the id? What does the html for that view look like?

What is in data line 1?
.on("edit", function(e, data) {

Open in new window


Where does the link (Button Excluir) link to the id?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41873154
let say you've something like :

<span data-id="50" class="openModal">50</span>

$(".openModal").click(function() { // try this first to get click before trying the next line currently commented
//$(document).on("click", ".openModal", function() {
    $(".openModal.lastClicked").removeClass("lastClicked");
    $(this).addClass(".lastClicked");
});

Open in new window


So you can get the ID like this :
.on("edit", function(e, data) {

   var id = $(".openModal.lastClicked").data("id"); // try this first before the next line currently commented
   //var id = $(".openModal.lastClicked").text();
   alert( "the id is: " + id );

Open in new window

0
 

Author Comment

by:Eduardo Fuerte
ID: 41873851
Hi

What I have at modal edit:
<div class="modal-body modal-body-meeta">
	<div class="panel panel-meeta mt-10">
		<!-- Begin: Form Edit -->
		<form method="post" action="#" id="entity-form" enctype="multipart/form-data"  class="dropzone">
		
			<input type="hidden" class="id_reclamacao" name="id_reclamacao" value="">
....

Open in new window


Could it be a way to capture the id_reclamacao value?  (still not working)

.on("edit", function(e, data) {
	
		var $form = $(this);

		var id = $form.data("id_reclamacao");

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41873860
Ok but we need to see the html that generates the table in the image you showed us - where you are pointing to the number 50.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41873879
The modal has no value for "id_reclamacao" - only the main view (using datatables plugin) has a value.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41873890
do a right click on the page, close to the 50, and choose view source to post it here
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Accepted Solution

by:
Eduardo Fuerte earned 0 total points
ID: 41873894
But this runs!

var id = $(this).parents(".modal").find(".id_reclamacao").val();

Open in new window

0
 

Author Comment

by:Eduardo Fuerte
ID: 41873896
Sorry, leakim971, our messages crossed!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41873906
so you mean you can close the question or do you still need help ?
yu can accept your own answer as solution
0
 

Author Comment

by:Eduardo Fuerte
ID: 41873935
Julian

The code that forms the datatable (where I point the number 50) is a Codeigniter helper -  a litle fantasmagoric.... that outputs to the view, I posted here before.  It's no longer necessary to deep on it. But if you still want to review...
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41874216
The code that forms the datatable (where I point the number 50) is a Codeigniter helper
I understand but to access values in it we need to see the HTML render of the table.

Based on this post and the code from this post
<div class="modal-body modal-body-meeta">
	<div class="panel panel-meeta mt-10">
		<!-- Begin: Form Edit -->
		<form method="post" action="#" id="entity-form" enctype="multipart/form-data"  class="dropzone">
		
			<input type="hidden" class="id_reclamacao" name="id_reclamacao" value="">

Open in new window


I am assuming that the <form> above is part of the image you showed us. What confuses me though is that you are referencing an input that is hidden - yet your image showed a value 50 - so for us to make the connection between a value shown on the screen and a hidden control is a bit of a stretch.

The solution to this problem is easy but without being able to see all the pieces we have to guess.

Anyway, glad you got sorted out.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41876932
Hi @Julian

Making it clearer:

The main view is formed by the helper that configures datatables plugin and then the modals is coded:
<!-- Begin: Content -->
<section id="content" class="table-layout animated fadeIn">
    <!-- Begin: .tray-center -->
    <div class="tray tray-center">

        <!-- Begin: Listagem -->
        <div class="panel">
            <div class="panel-menu admin-form theme-primary">
                <div class="row">
                    <div class="col-sm-12">
                        <span class="fa fa-building mr10"></span>
                        <span>Reclamações</span>
                    </div>
                </div>
            </div>
            <div class="panel-body pn">
                <button class='btn btn-primary btn-gradient btn-alt item-active' onClick ="$('#datatables').tableExport({type: 'excel', escape: 'false'});">Excel</button>
                <div class="col-sm-12">
                    <?php
					// This helper mounts datatable's plugin grid => where "50" remains as id_reclamacao
                    echo datatables(
                            array(
                        'id_reclamacao' => 'ID',
                        'sise' => 'SISE',
                        'fk_seguradora' => 'Cliente Corporativo',
                        'nome_reclamante' => 'Nome Reclamante',
                        'data' => 'Data',
                        'sla' => 'SLA',
                        'created_by' => 'Analista',
                        'procedencia' => 'Status',
                        'acoes' => 'Ações',
                            ),
                            // Options dataTables
                            array(
                        'id' => 'datatables',
                        'width' => '100%',
                        'controller' => 'reclamacao',
                        'action' => 'datatables_list',
                            ),                     
                            array(
                        'like' => array(
                            'sise', 'id_reclamacao', 'fk_seguradora', 'data_search', 'sla', 'nome_reclamante', 'created_by', 'procedencia_f', 'status'
                        ),
                        'search_submit' => '.pesquisar_groups_form',
                            )
                    );
                    ?>


                   
                </div>
            </div>
        </div>
        <!-- End: Listagem -->

        <!-- Modal Edit !!!!!!!!!!!!!!!!!!!!!!! -->
		<!-- The modals code starts here -->
....
            <!-- Modal View-->
...

Open in new window


It doesn't matter that the modal  value is hidden since the value is obtained from the  main view  (that was mounted by the helper).

So what I guess is: we can "abstract" the way the id is mounted in the main view - in this case by using datatables. By using a code like that:

var id = $(this).parents(".modal").find(".id_reclamacao").val();

Open in new window


We could obtain the control value.
0
 

Author Closing Comment

by:Eduardo Fuerte
ID: 41880271
It's a easier way to obtain a main view value.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now