Improve company productivity with a Business Account.Sign Up

x
?
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
Medium Priority
?
94 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 62

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 83

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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 62

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 83

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
 

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 83

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 62

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

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

In this article, I’ll talk about multi-threaded slave statistics printed in MySQL error log file.
I recently worked on a Wordpress site that utilized the popular ContactForm7 (https://contactform7.com/) plug-in that only sends an email and does not save data. The client wanted the data saved to a custom CRM database. This is my solution.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

606 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